企业官网建设流程全解析

watch 作用

watch 监视数据的变化，写法vue2与vue3中不同

watch 情况一：ref 定义的数据

左边是vue3导入的；
右边是vue2中使用watch方法的；

监听的对象：ref定义的数据sum，不是sum.value.

问题：为什么这里再次调用就停止这个函数了?

stopWatch变量里保存的不是 watch本身，而是 watch调用后返回的一个用于“取消订阅”的清理函数。调用它，就等于注销了监听，这就是“停止监视”的原理。

箭头函数

为什么vue3中可以经常使用箭头函数？
不用this，this是undefind,

箭头函数是 ES6 (ES2015) 引入的一种新的函数语法，用更简洁的方式编写函数。
没有自己的 this，这是箭头函数最重要的特性！

()=>{}

watch 情况二：ref 定义的对象数据

ref的对象数据，监听的是对象的地址值的变化，不是对象属性的值的变化；
若想监视对象内部的数据，要手动开启深度监视

watch的第三个参数是监听的配置项：
deep:true 深度监视
immidate:true 立刻监视，先执行下监听的函数