vue2.x中Watch和vue3.x中Watch使用和区别

vue2.xWatch和vue3.xWatch使用和区别

​ 大家都知道在vue中,我们经常会用到监听数据一个数据,当数据发生变化的话执行某个功能,实现的方法有很多,现在的话重点说一下vuex2.x中属于配置项的watch,vue3.x组合式Apiwatch函数。

vue2.x中的watch

​ 基本的使用:

​ 我们创建一个Demo组件,定义一个count数据,当点击的时候让count加1,并且监听watch的变化,并执行打印。

但是这个普通的监听当时存在问题:当数据是深层嵌套的话无法监听到数据的改变,所以无法执行回调







vue3.0中的watch

​ 在vue3.0中新加了composituon(组合)api,watch不在时一个配置项,而是作为函数的调用出现,当然在vue3.0中也可以使用vue2.x中watch配置项监听ref or reactive 定义的数据,但是在使用vue3.0的时候不建议混合使用。




使用vue3中的组合式api监听数据的变化






总结:

当使用vue2中的watch配置项监听浅层数据的时候通过默认的监视方,当需要监听的数据是嵌套的数据时,通过配置watch的配置项进行监听。

当使用vue3的组合式api监听数据的变化时,分为ref定义的响应式数据和reactive定义的数据,ref定义的数据监听还是比较简单的,reactive监听数据的时候分为几种情况:

​ 1.当监听的为reactive定义的整个对象时,默认开启深度监听,无法通过deep关闭深度监听,并且无法正确获取oldValue(上一次的值)。

​ 2.当监听reactive定义的对象中的某个属性时又分为:

​ 普通类型:通过函数返回值的形式监听, 可以正确获取oldValue

​ 复杂数据类型(对象or数组): 通过返回值的形式监听,并且需要开启深度监听,无法获取正确的oldValue

以上是个人对Vue中watch的使用学习时的笔记,若存在错误欢迎指正

你可能感兴趣的:(vue,vue.js)