watch侦听一个let id='1234' 首次改变id='123455' 会触发watch 再次将id值改为 1234 ,watch不触发
时间: 2024-09-12 19:09:52 浏览: 40
vue侦听器watch精彩案例分享
Vue.js 中的 `watch` 监听器是用来监听数据变化的,当你设置了一个 `watch` 函数来监视某个变量(在这个例子中是 `id`),它会在目标值发生改动时执行回调函数。然而,如果你只是简单地改变了 `id` 的值回原来的值(如 `id = '1234'`),而这个值本身并没有实际改变(即从 `'1234'` 到 `'1234'`),Vue 没有检测到真正的变更,所以不会再次触发 `watch` 函数。
通常,`watch` 观察的是变量的深层次引用,而不是其字面值。如果只是字符串或数字的简单赋值,除非它们指向了全新的内存地址(例如,通过数组操作产生了新的引用),否则不会被视为已更改。
为了确保 `watch` 只在 `id` 的真实值发生变化时触发,你可以使用 Vue 的 `deep` 或 `immediate` 选项。`deep` 表示深度监控嵌套的对象或数组的变化,而 `immediate` 则是在首次数据绑定时立即执行回调,即便没有后续数据更新。
如果你想让 `watch` 在每次 `id` 被赋新值时都触发,可以设置 `immediate: true`:
```javascript
data() {
return {
id: '1234'
}
},
watch: {
id(newVal, oldVal) {
console.log('id changed');
},
immediate: true
}
```
当 `id` 改变时,无论是否回到原来值,都会记录这次变更。但是请注意,频繁的无意义变更可能会增加性能负担。
阅读全文