watch函数与watchEffect函数都是监听器,在写法和用法上有一定区别,是同一功能的两种不同形态,底层都是一样的。【相关推荐:vue.js视频教程】
watch
显式指定依赖数据,依赖数据更新时执行回调函数immediate: true
时可以变为非惰性,页面首次加载就会执行)watchEffect
自动收集依赖数据,依赖数据更新时重新执行自身
立即执行,没有惰性,页面的首次加载就会执行
无法获取到原值,只能得到变化后的值
不用指明监视哪个属性,监视的回调中用到哪个属性就监视哪个属性
watch函数有两个小坑:
监视reactive定义的响应式数据(该数据为一个对象,因为reactive只能定义数组或对象类型的响应式)时:oldValue无法正确获取,会强制开启深度监视,deep配置不生效。
监视reactive定义的响应式数据中的某个属性时,且该属性是一个对象,那么此时deep配置生效。
具体的watch函数的用法在下面代码中都有所体现,注释详细
当前求和为:{{sum}}
当前的信息为:{{msg}}
姓名:{{person.name}}
年龄:{{person.age}}
薪资:{{person.job.j1.salary}}
watch取消监听
const stop1 = watch( [() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, "----", prevName, curEng); setTimeout(() => { stop(); }, 5000); });
函数用法如下代码所示,注释详细:
当前求和为:{{sum}}
当前的信息为:{{msg}}
姓名:{{person.name}}
年龄:{{person.age}}
薪资:{{person.job.j1.salary}}
watchEffect取消监听
const stop = watchEffect(() => { console.log(nameObj.name); setTimeout(() => { stop(); }, 5000);});
watchEffect与computed有点像:
但是computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。
而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。
computed若是值没有被使用时不会调用,但是watchEffect始终会调用一次
举例:
当前求和为:{{sum}}
当前的信息为:{{msg}}
姓名:{{person.name}}
年龄:{{person.age}}
薪资:{{person.job.j1.salary}}
以上是一文详解Vue中watch和watchEffect的区别的详细内容。更多信息请关注PHP中文网其他相关文章!