vue3 watch的使用
时间: 2024-07-18 21:01:45 浏览: 72
Vue 3 中的 `watch` 是用于监听视图数据变化的响应式系统的一部分。它可以在指定的表达式或属性值改变时执行特定的函数。`watch` 可以用于以下几个方面:
1. **深度监听**:默认情况下,`watch` 只会监听浅层的数据变化,如果你需要监听嵌套对象或数组的变化,可以传入一个回调函数,比如 `(newVal, oldVal) => {}`,并设置 `deep` 选项为 `true`。
```js
this.$watch('obj', (newVal, oldVal) => {
console.log('obj has changed:', newVal);
}, { deep: true });
```
2. **立即执行**:如果你想让监听在第一次数据变化时立即执行一次,可以设置 `immediate` 为 `true`。
```js
this.$watch('value', () => {
// 首次执行
}, { immediate: true });
```
3. **只读模式**:如果只想监视数据是否被修改而不想影响它,可以设置 `nonenumerable` 为 `true`,这样不会对原始数据造成副作用。
4. **取消监听**:你可以通过返回取消函数来取消 `watch` 监听,这样当你不再需要这个功能时可以清理资源。
```js
const cancel = this.$watch('count', console.log);
// 稍后...
cancel();
```
阅读全文