12 监视属性(watch)
可以先使用技术属性的方式编写天气案例，然后使用监视属性，通过对比，更加清晰明了
12.1 编写案例
我们可以使用三木运算符实现对天气的更换，如果属性为真就是炎热，为假就是寒冷
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 三元表达式 --> <h2>今天天气很{{isHot ? '炎热':'寒冷'}}</h2> <button>点击切换天气</button> </div> <script type="text/javascript"> //Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键 const vm=new Vue({ el:'#root', data:{ //布尔值，如果为真就是天气热，为假就是天气冷 isHot:true } }) </script> </body> </html>
但是不建议在插值语法里面做复杂操作，可以使用技术属性操作，利用插值语法获取计算属性的结果
12.2 计算属性完善案例
使用计算属性完善案例，同时给按钮绑定单击事件去升级案例改变天气
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 三元表达式 --> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">点击切换天气</button> </div> <script type="text/javascript"> //Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键 const vm=new Vue({ el:'#root', data:{ //布尔值，如果为真就是天气热，为假就是天气冷 isHot:true }, computed:{ info(){ return this.isHot?'炎热':'寒冷' } }, methods: { changeWeather(){ // 直接两极反转 this.isHot=!this.isHot } }, }) </script> </body> </html>
代码到这对于这个案例基本就写完了，但是我想分享一个坑和一个使用技巧
12.3 坑
我们改下代码，注意看，现在已经不用info这个计算属性和isHot这个属性了
我们单击按钮，发现vue开发工具对应的数据并没有改变，其实已经改变了，只是它觉得既然页面上已经没有用到这些改变数据的地方了，那么它就没必要更新了，反正它更新你也不用
通过控制台验证数据已经更新
这个问题也不严重，只是目前存在，说不定某天版本迭代就把这个坑填上了，只是希望大家知道这个坑！
12.4 使用技巧
注意观察代码和案例，按钮只想做一件事，就是更改属性的值，那么我就不需要写那么多的代码去做一个简单的事情，而是把逻辑都写在单击事件里面
效果也是一样的，但是要说明下，如果事件的逻辑很简单只有一件事，这样写没有问题，如果有多个事，需要用;分开，比如：
<button @click="isHot=!isHot;a++">点击切换天气</button>
如果有多个逻辑需要处理，那么还是建议写在函数里面
12.5 监视属性完成案例
在原有的技术上，通过监视属性的方式完成案例，监视isHot属性的变化，如果改变了，就要通知我，由我执行对应的逻辑,有两种监视方式，一一说明
监视方式1 直接使用watch
vue中通过watch实现监视，有一个handler函数，如果我们对监视属性的值进行修改的时候就会被调用，handler有两个参数，分别是修改前的值和修改后的值
还有一个函数叫immediate,默认为false，如果设置为true表示初始化时候让handler调用一下
我还没点击呢就自己调用了，还有更多的函数就不一一列举了
不只是可以监视data中的属性，也可以监视computed里面的计算属性
相关代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">点击切换天气</button> </div> <script type="text/javascript"> //Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键 const vm=new Vue({ el:'#root', data:{ //布尔值，如果为真就是天气热，为假就是天气冷 isHot:true }, computed:{ info(){ return this.isHot?'炎热':'寒冷' } }, methods: { changeWeather(){ // 直接两极反转 this.isHot=!this.isHot } }, // 第一种监视方式 watch:{ isHot:{ immediate:true, //初始化时候让handler调用一下 // handler什么时候被调用？ 当isHot发生改变时，就会发生调用 有两个参数，分别是修改前的值和修改后的值 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } } }) </script> </body> </html>
监视方式2 使用$watch()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">点击切换天气</button> </div> <script type="text/javascript"> //Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键 const vm=new Vue({ el:'#root', data:{ //布尔值，如果为真就是天气热，为假就是天气冷 isHot:true }, computed:{ info(){ return this.isHot?'炎热':'寒冷' } }, methods: { changeWeather(){ // 直接两极反转 this.isHot=!this.isHot } }, // 第一种监视方式 // watch:{ // isHot:{ // immediate:true, //初始化时候让handler调用一下 // // handler什么时候被调用？ 当isHot发生改变时，就会发生调用 有两个参数，分别是修改前的值和修改后的值 // handler(newValue,oldValue){ // console.log('isHot被修改了',newValue,oldValue) // } // } // } }) // 第二种监视方式 vm.$watch('isHot',{ immediate:true, //初始化时候让handler调用一下 // handler什么时候被调用？ 当isHot发生改变时，就会发生调用 有两个参数，分别是修改前的值和修改后的值 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) </script> </body> </html>
两种监视方式如何选择
如果很明确的知道需要监视哪个属性，那么直接使用方式1的watch监视比较合适，如果说不知道要检测谁，后续根据用户的行为才知道检测谁，那么方式2使用$watch无疑是更好的
12.6 总结watch
监视属性watcher:
1 当被监视的属性发生变化时，回调函数自动调用，进行相关逻辑处理
2 监视的属性必须存在，才能进行监视
- 3 监视的两种写法：
- （1）.new Vue时传入watch配置
- （2）通过vm.$watch监视
12.7 深度监视
在监视属性的技术上，再学习深入的深度监视，还是天气的案例，再次基础上加一个新的功能
接下来提出需求，我想要监视a的变化，我们如果直接写number,a的话会报错，因为这个key是错误格式的，所以面对这种情况，我们需要还原成原始key的写法，也就是'number.a',这种写法适用于多级属性结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">点击切换天气</button> <hr/> <h2>a的值是:{{number.a}}</h2> <button @click='number.a++'>点我让a自增</button> <hr/> <h2>b的值是:{{number.b}}</h2> <button @click='number.b++'>点我让b自增</button> </div> <script type="text/javascript"> //Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键 const vm=new Vue({ el:'#root', data:{ //布尔值，如果为真就是天气热，为假就是天气冷 isHot:true, number:{ a:1, b:1 } }, computed:{ info(){ return this.isHot?'炎热':'寒冷' } }, methods: { changeWeather(){ // 直接两极反转 this.isHot=!this.isHot } }, watch:{ //监视多级结构中某个属性的变化 'number.a':{ immediate:true, //初始化时候让handler调用一下 handler(newValue,oldValue){ console.log('a被修改了',newValue,oldValue) } } } }) </script> </body> </html>
如果我想要监视属性b呢？
我一开始想到的笨办法是，复制a的监视改为b，但是如果number里面如果有成千上万个数据呢。。
不如直接监视number，并且配置一个新的属性：deep(有深度的)，默认false，改为true就表示深度监视对象的每一个属性变化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">点击切换天气</button> <hr/> <h2>a的值是:{{number.a}}</h2> <button @click='number.a++'>点我让a自增</button> <hr/> <h2>b的值是:{{number.b}}</h2> <button @click='number.b++'>点我让b自增</button> </div> <script type="text/javascript"> //Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键 const vm=new Vue({ el:'#root', data:{ //布尔值，如果为真就是天气热，为假就是天气冷 isHot:true, number:{ a:1, b:1 } }, computed:{ info(){ return this.isHot?'炎热':'寒冷' } }, methods: { changeWeather(){ // 直接两极反转 this.isHot=!this.isHot } }, watch:{ //监视多级结构中某个属性的变化 /* 'number.a':{ immediate:true, //初始化时候让handler调用一下 handler(newValue,oldValue){ console.log('a被修改了',newValue,oldValue) } } */ //监视多级结构中所有属性的变化 number:{ deep:true, //开启深度监视 immediate:true, //初始化时候让handler调用一下 handler(newValue,oldValue){ console.log('number被修改了',newValue,oldValue) } } } }) </script> </body> </html>
12.8 总结深度监视
深度监视：
（1）vue中的watch默认不监测对象内部值的改变（一层）
（2）配置deep:true可以监测对象内部值改变（多层）
备注：
（1）vue自身可以监测对象内部值的改变，但vue提供的watch默认
（2）使用watch时根据数据的具体结构，决定是否采用深度监视
12.9 监视的简写形式
watch简写
监视是可以简写的，但是有两个前提：
1 不需要immediate（初始化调用）
2 不需要deep（深度监视）
也就是说当配置项只有handler的时候，就可以开启简写形式
写法如下：
效果也是一样的
$watch的简写
友情提示：函数要用普通函数去写，不能使用箭头函数，不然this就不是vue实例对象了
完整代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">点击切换天气</button> </div> <script type="text/javascript"> //Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键 const vm=new Vue({ el:'#root', data:{ //布尔值，如果为真就是天气热，为假就是天气冷 isHot:true }, computed:{ info(){ return this.isHot?'炎热':'寒冷' } }, methods: { changeWeather(){ // 直接两极反转 this.isHot=!this.isHot } }, watch:{ // 正常写法 /* isHot:{ immediate:true, //初始化时候让handler调用一下 // handler什么时候被调用？ 当isHot发生改变时，就会发生调用 有两个参数，分别是修改前的值和修改后的值 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } */ // 简写写法 /* isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } */ } }) // $watch正常格式 /* vm.$watch('isHot',{ immediate:true, //初始化时候让handler调用一下 // handler什么时候被调用？ 当isHot发生改变时，就会发生调用 有两个参数，分别是修改前的值和修改后的值 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) */ // $watch简写格式 vm.$watch('isHot',function(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) }) </script> </body> </html>
12.10 computed和watch之前的区别
- computed和watch之前的区别
- 1 computed能够完成的功能，watch都能完成
- 2 watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
- 两个重要的小原则：
- 1 所被vue管理的函数，最好都写成普通函数，这样this指向的才是vue实例对象
- 2 所有不被vue所管理的函数（定时器的回调函数，ajax的回调函数等），最好都写成箭头函数，这样this指向的才是vm或组件实例对象
