今天小编给大家讲解一下,Vue3 中组合式下的侦听器。
我正在参加 2022年「博客之星」年度总评选,请大家帮我支持一下,给我一个五星。
|
点击前往我的评选页面:
|
大家只要按图给我五星即可,谢谢大家的帮助。
下面的所有代码都写在前置代码的 script 标签中
侦听:原始类型的数据变化
watch(source,callback,options)
watch(account, (newData, oldData) => {
console.log("---账号的新旧值---");
console.log(newData);
console.log(oldData);
console.log("-----------------");
});
停止侦听器:调用watch() 返回的函数即可
// 需要自行停止侦听器时,可以调用 $watch() 返回的函数
let stopWatch = watch(account, (newData, oldData) => {
console.log("---账号的新旧值---");
console.log(newData);
console.log(oldData);
console.log("-----------------");
});
setTimeout(() => {
stopWatch();
}, 3000);
watch(
() => emp.salary,
(newData, oldData) => {
console.log("---薪资的新旧值---");
console.log(newData);
console.log(oldData);
console.log("-----------------");
}
);
watch(emp, (newData, oldData) => {
console.log("---信息的新旧值---");
console.log(newData);
console.log(oldData);
console.log("-----------------");
});
解决1:侦听指定的属性(如果属性过多,如果属性名未知)
解决2:配置深度侦听(新旧值相等,无法获取到旧值)
watch(
() => dept,
(newData, oldData) => {
console.log("---部门的新旧值---");
console.log(newData);
console.log(oldData);
console.log("-----------------");
},
{
deep: true,
}
);
watch(
[account, () => emp.salary, dept],
// 回调函数中:参数1:新值的数组,参数2:旧值的数组
([newAccount, newSalary, newDept], [oldAccount, oldSalary, oldDept]) => {
console.log("---账号的新旧值---");
console.log(newAccount);
console.log(oldAccount);
console.log("---薪资的新旧值---");
console.log(newSalary);
console.log(oldSalary);
console.log("---部门的新旧值---");
console.log(newDept);
console.log(oldDept);
console.log("-----------------");
}
);
watchEffect() 会立即执行一遍回调函数,如果这个时候函数产生了副作用,
Vue 会自动追踪副作用的依赖关系,自动分析出响应源
回调函数中用到的数据源,如果发生了改变,会自动监听,并重新执行该函数
watchEffect(() => {
// 回调函数中用到的数据源,如果发生了改变,会自动监听,并重新执行该函数
console.log("账号:" + account.value);
console.log("薪资:" + emp.salary);
console.log(document.getElementById("main"));
});
回调的触发时机:默认情况下,创建的侦听器,都会在Vue组件更新状态之前调用,所以获取的都是DOM更新之前的状态
如果想访问更新之后的状态呢?
let stopPost = watchPostEffect(() => {
console.log("部门:" + dept.name);
console.log(document.getElementById("main"));
});
watch:(手动性)
watchEffect:(自动性)
最后还请大家帮我点击一下,谢谢大家的帮助
我正在参加 2022年「博客之星」年度总评选,请大家帮我支持一下,给我一个五星。
|
点击前往我的评选页面:
|
大家只要按图给我五星即可,谢谢大家的帮助。
以上就是 Vue3 中组合式下的侦听器,不懂得也可以在评论区里问我或私聊我询问,以后会持续发布一些新的功能,敬请关注。
我的其他文章:https://blog.csdn.net/weixin_62897746?type=blog