方式一:监听单个基本数据类型(ref)，（ref定义的基本类型使用watch监听时候不需要.value）
watch(sum, (newVal, oldValue) => {
console.log(newVal, oldValue);
});方式二:监多个基本数据类型(ref)
watch([sum, tips], (newVal, oldValue) => {
console.log(newVal, oldValue);// [121, 'a']，[78, 'b']监听结果新的值和旧的值都是数组
});方式三:监听对象(reactive)，不建议使用
这种监听方式，在vue3存在问题：（不建议直接监听reactive整个对象）
1.reactive和ref响应式使用proxy代理无法正确监听并获取对象旧的值（拿到的都是新值）
2.强制开启深度监听,设置false关闭无效(deep配置无效)
watch(state,(newVal, oldValue) => {
console.log(newVal, oldValue); //{name: '老王', age: 23},{name: '老王', age: 23}
},
{ deep: false }
);方式四:监听对象中某一个属性变化（reactive)，强烈建议使用此方式监听reactive响应对象数据（无坑）
watch(() => state.count, (newVal, oldValue) => {
console.log(newVal, oldValue);
}
);方式五:监听对象中某几个属性（reactive)，建议使用
watch([() => obj.test, () => obj.year], (newVal, oldValue) => {
console.log(newVal, oldValue); //得到的是对象
}
);版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66304.html
