Vue2 和 Vue3 中的 watch 用法

Posted 2023-05-15

参考技术A

数据

情况一，监视 ref 所定义的一个响应式数据

情况二，监视 ref 所定义的多个响应式数据

情况三，监视 reactive 所定义的一个响应式数据

输出结果：

情况四，监视 reactive 所定义的一个响应式数据中的某个属性,(需要写到函数里面)

情况五，监视 reactive 所定义的一个响应式数据中的某些属性,(需要用数组包裹，在写到函数里面)

输出结果：

输出结果：

watchEffect
watch 的套路是：既要指明监视的属性，也要指明监视的回调
watchEffect 的套路是：不用指明监视哪个属性，监视的回掉中用到那个属性，那就监视哪个属性
watchEffect 有点像computed：

总结：

vue中computed和watch的用法

• computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
• watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，

本文原网址：https://www.cnblogs.com/gunelark/p/8492468.html