前言
watch函数与watcheffect函数都是监听器，在写法和用法上有一定区别，是同一功能的两种不同形态，底层都是一样的。【相关推荐：vue.js视频教程】
watch和watchEffect的对比
watch
-
watch显式指定依赖数据，依赖数据更新时执行回调函数 - 具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置
immediate: true时可以变为非惰性，页面首次加载就会执行） - 监视ref定义的响应式数据时可以获取到原值
- 既要指明监视的属性，也要指明监视的回调
watchEffect
watchEffect自动收集依赖数据，依赖数据更新时重新执行自身立即执行，没有惰性，页面的首次加载就会执行
无法获取到原值，只能得到变化后的值
-
不用指明监视哪个属性，监视的回调中用到哪个属性就监视哪个属性
立即学习“前端免费学习笔记（深入）”；
深度解析watch函数
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);
});深度解析watchEffect函数
函数用法如下代码所示，注释详细：
当前求和为：{{sum}}
当前的信息为：{{msg}}
姓名：{{person.name}}
年龄:{{person.age}}
薪资：{{person.job.j1.salary}}
watchEffect取消监听
const stop = watchEffect(() => {
console.log(nameObj.name);
setTimeout(() => {
stop();
}, 5000);});watchEffect与computed
watchEffect与computed有点像：
但是computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
computed若是值没有被使用时不会调用，但是watchEffect始终会调用一次
举例：
当前求和为：{{sum}}
当前的信息为：{{msg}}
姓名：{{person.name}}
年龄:{{person.age}}
薪资：{{person.job.j1.salary}}
