网站建站前期准备工作,大型app定制开发,中国新闻军事报道,营销系统在Vue3中#xff0c;watch中的参数可以分为两部分#xff0c;即要监听的响应式数据以及回调函数。
语法格式如下#xff1a; watch(要监听的响应式数据, 回调函数)除了以上的两个还有其他的参数
immediate#xff1a;是否在初始化时立即执行一次回调函数#xff0c;默认…在Vue3中watch中的参数可以分为两部分即要监听的响应式数据以及回调函数。
语法格式如下 watch(要监听的响应式数据, 回调函数)除了以上的两个还有其他的参数
immediate是否在初始化时立即执行一次回调函数默认为false。deep是否深度观察对象或数组的变化默认为false。flush在触发回调函数之前进行何种操作默认为pre。可选值有pre立即更新DOM、post延迟到队列中的所有回调函数执行完毕后再更新DOM和sync在变更时同步应用更改。onTrigger在触发回调函数之前执行的函数。onStop当停止观察时执行的函数。lazy是否初始不触发回调函数默认为false。
参数说明
要监听的响应式数据可以是一个ref对象、reactive对象或者计算属性等回调函数当被监听的响应式数据发生变化时回调函数会被调用可以接受到被监听的数据的新值和旧值
示例代码 import { reactive, watch } from vue
const state reactive({count: 0
})
watch(() state.count, (newValue, oldValue) {console.log(count发生变化, newValue, oldValue)
})
state.count // count发生变化 1 0import { watch, ref, reactive } from vue;
// 观察一个响应式对象
const state reactive({name: John,age: 25,
});
watch(() state.name, (newValue, oldValue) {console.log(Name changed from ${oldValue} to ${newValue});
});
// 观察一个ref
const count ref(0);
watch(() count.value, (newValue, oldValue) {console.log(Count changed from ${oldValue} to ${newValue});
});
// 观察一个函数
watch(() {return state.age * count.value;},(newValue, oldValue) {console.log(Computed value changed from ${oldValue} to ${newValue});}
);
// 监听多个数据源
watch([() state.name, () count.value], ([newName, newCount], [oldName, oldCount]) {console.log(Name changed from ${oldName} to ${newName});console.log(Count changed from ${oldCount} to ${newCount});
});
// 配置项示例
watch(() state.name,(newValue, oldValue) {console.log(Name changed from ${oldValue} to ${newValue});},{ immediate: true } // 立即执行回调函数
);
值得注意的是在Vue3中watch函数返回一个stop函数用于停止侦听。你可以使用stop函数来停止之前注册的watchconst stopWatcher watch(() state.name, (newValue, oldValue) {console.log(Name changed from ${oldValue} to ${newValue});
});
// 停止监听
stopWatcher();
