vue3 watch只监听一次
时间: 2023-12-12 09:35:54 浏览: 81
是的,Vue3中的watch默认只会监听一次。如果需要持续监听,需要在watch选项中设置immediate为true。下面是一个示例代码:
```javascript
watch: {
name: {
immediate: true,
handler(newVal, oldVal) {
console.log(`name changed from ${oldVal} to ${newVal}`);
}
}
}
```
在上面的代码中,我们设置了immediate为true,这样在组件挂载时就会立即执行handler函数,并且在name属性变化时也会继续监听。
相关问题
vue3 watch 第一次不监听
在Vue3中,watch默认情况下不会在第一次渲染时执行回调函数。这是因为Vue3的watch选项默认是懒执行的,只有在侦听的属性发生变化时才会执行回调函数。如果你希望在第一次渲染时也执行回调函数,可以通过设置`immediate: true`来实现。
以下是一个示例代码:
```javascript
watch: {
type: {
handler(val, old) {
this.settype();
},
immediate: true
}
}
```
在上述代码中,我们将`immediate`选项设置为`true`,这样watch选项会在组件初始化时立即执行回调函数,即使属性的初始值没有发生变化。
vue2中watch只会监听一次
在 Vue 2 中,`watch` 是用来监视 Vue 实例上的数据变化的。默认情况下,`watch` 只会在初始渲染时执行一次。这意味着如果被监视的数据没有发生变化,`watch` 将不会再次执行。
但是,你可以通过设置 `immediate` 选项来让 `watch` 立即执行一次。例如:
```javascript
watch: {
myData: {
handler(newVal, oldVal) {
// 在 myData 变化时执行
},
immediate: true // 立即执行一次
}
}
```
当 `myData` 发生变化时,`handler` 函数将被触发,并且在初始渲染时也会执行一次。
另外,如果你需要在每次数据变化时都执行 `watch`,你可以使用深度监听选项 `deep`,或者在 `watch` 中使用一个函数来返回需要监听的值。这样,只要监听的值发生变化,`watch` 就会执行。
需要注意的是,在 Vue 3 中,`watch` API 发生了一些改变。如果你正在使用 Vue 3,请参考 Vue 3 的官方文档来查看最新的 `watch` 使用方法。