如果希望监听某个数据的变化，当数据变化后，再做出特定的操作，这个时候就需要使用侦听属性了。
侦听属性 watch 适合处理一些消耗性能的需求，比如 Ajax 请求等等。
当被监视的数据发生变化时，回调函数会自动执行，并进行相关操作。
监视的数据必须存在，才能进行监听！！
正常写法：
<div id="APP"> <h2>今天天气很{{info}}</h2> <button @click="istoggle">切换天气</button> </div>
const vm = new Vue({ el: "#APP", data(){ return { isHot: true } }, methods:{ istoggle(){ this.isHot = !this.isHot; } }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽'; } }, watch:{ // 侦听属性的名称必须和数据名称一致。 isHot:{ // 侦听属性中的 handler 是一个配置项，当监听的数据发生变化后就会执行。 handler(newValue,oldValue){ // 可以在 handler 中接收新旧数据，参数名自定义。 console.log("isHot被修改了"); console.log("改变后的数据",newValue); console.log("改变前的数据",oldValue); } }, } });
注：当点击切换天气按钮后，监听的数据 isHot 发生了变化，就会自动执行 watch 中的 isHot 侦听属性。
深度监视：
<div id="APP"> <h3>a的值是：{{numbers.a}}</h3> <button @click="adda">点击让a+1</button> <h3>b的值是：{{numbers.b}}</h3> <button @click="addb">点击让b+1</button> <hr/> <button @click="isReplace">替换numbers的引用地址</button> </div>
原因：当我们改变 a 或者改变 b 的值时，只是改变的 numbers 对象中的内容，而 numbers 对象的引用地址未发生改变，所以不会触发 numbers 的侦听属性。
注：当改变 numbers 的引用地址时，也可以触发内部值 a 和 b 的侦听属性。
深度监视：如果想改变 a 或者改变 b 的值时，让 numbers 的侦听属性也执行，就需要开启深度监视了。
在侦听属性中，配置 deep 属性为 true 就可以监测对象内部值的改变了，监测多层数据。
简写方式【常用】
当 watch 的配置项只需要用到 handler 时，就可以使用简写的方式了。也就是说简写方式不可以使用 immediate 初始化执行或者 deep 深度监视 。
<div id="APP"> <h3>num的值是：{{num}}</h3> <button @click="add">点击让num+1</button> </div>
const vm = new Vue({ el: "#APP", data(){ return { num: 1 } }, methods:{ add(){ this.num++; }, }, watch:{ num(newValue,oldValue){ console.log("num 被修改了"); console.log("改变后的数据",newValue); console.log("改变前的数据",oldValue); } } });
注：简写时侦听属性需要写成函数，但是不能写成箭头函数！否则 this 将不再指向 Vue 实例 或 组件实例对象。
$watch 简写方式【了解】
<div id="APP"> <h3>num的值是：{{num}}</h3> <button @click="add">点击让num+1</button> </div>
const vm = new Vue({ el: "#APP", data(){ return { num: 1 } }, methods:{ add(){ this.num++; }, } }); vm.$watch('num',function(newValue,oldValue){ console.log("num 被修改了"); console.log("改变后的数据",newValue); console.log("改变前的数据",oldValue); })
原创作者 ：吴小糖
创作时间：2023.2.12
