前言

监视属性

一、监视属性

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>