前言
监视属性
一、监视属性
1.介绍
- 当被监视的属性变化时，回调函数自动调用，进行相关操作
- 监视的属性必须存在，才能进行监视！
- 监视的两种写法：
（1） Vue实例化对象内watch配置
（2）通过Vue实例（假设是vm）vm.$watch监视
2.实例
天气小案例：点击”切换天气“按钮，文字在”炎热“和”凉快“之间切换。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="change">切换天气</button> </div> <script> var vm = new Vue({ el: "#root", data: { ishot: true }, methods: { change() { this.ishot = !this.ishot } }, computed: { info() { return this.ishot ? '炎热' : '凉快' } }, watch: { immediate:true,//初始化时让handler调用一下 info: { handler(newValue, oldValue) { console.log("info被修改了", newValue, oldValue); } } } }) </script> </body> </html>
然后点击按钮，天气由最开始的”炎热”变成“凉快”，并且watch监视info属性，并且在控制台打印了info变化前后的值（handler函数第一个参数newValue是改变后的值，第二个oldValue是改变前的值）。（watch里的handler在监视属性发生变化时触发）
另一中写法，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="change">切换天气</button> </div> <script> var vm = new Vue({ el: "#root", data: { ishot: true }, methods: { change() { this.ishot = !this.ishot } }, computed: { info() { return this.ishot ? '炎热' : '凉快' } }, }) vm.$watch('info', { immediate: true, //初始化时让handler调用一下 handler(newValue, oldValue) { console.log("info被修改了", newValue, oldValue); } }) </script> </body> </html>
二、深度监视
1.实例一
监视多级结构中的某个属性
（监视number对象中的a，b的值）
代码如下（示例）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h3>{{numbers.a}}</h3><br> <button @click="numbers.a++">点我a+1</button><br> <h3>{{numbers.b}}</h3><br> <button @click="numbers.b++">点我b+1</button><br> </div> <script> var vm = new Vue({ el: "#root", data: { numbers: { a: 1, b: 1 } }, watch: { 'numbers.a': { handler() { console.log("a被改变"); } }, 'numbers.b': { handler() { console.log("b被改变"); } } } }) </script> </body> </html>
2.实例二
监视多级结构中的所有属性
（监视number对象）
代码如下（示例）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h3>{{numbers.a}}</h3><br> <button @click="numbers.a++">点我a+1</button><br> <h3>{{numbers.b}}</h3><br> <button @click="numbers.b++">点我b+1</button><br> </div> <script> var vm = new Vue({ el: "#root", data: { numbers: { a: 1, b: 1 } }, watch: { numbers: { deep: true, handler() { console.log("numbers改变了"); } } } }) </script> </body> </html>
3.结论
- Vue实例对象中的watch默认不监测对象内部值的改变（一层）
- 配置deep：true可以监测对象内部值改变（多层）
- Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
- 使用watch时根据数据的具体结构，决定是否采用深度检测
三、监视器简写
简写条件：没有immediate，deep
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="change">切换天气</button> </div> <script> var vm = new Vue({ el: "#root", data: { ishot: true }, methods: { change() { this.ishot = !this.ishot } }, computed: { info() { return this.ishot ? '炎热' : '凉快' } }, watch: { info(newValue, oldValue) { console.log("info改变了", newValue, oldValue); } } }) </script> </body> </html>
总结
以上就是监视属性
