watch
用于观察一个表达式或computed函数在Vue.js实例上的变化。回调函数调用时会从参数得到新数据（new value）和旧数据（old value）。表达式只接受以点分割的路径，例如
obj,obj.a.如果是比较复杂的表达式，可以用函数代替表达式。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="app">姓名：<input type="text" v-model="obj.name"><br>年龄：<input type="text " v-model="obj.age"><br><button @click="fn">点我修改</button></div></body><script src="./vue.js"></script><script>// watch:// 1.只要被监听的数据发生改变，就会触发对应的逻辑代码// 2.如果被监听的数据是个对象，对象中的属性发生改变时，监听是不会触发上的let vm = new Vue({el: '#app',data: {obj: {name: "xiaoming",age: 18}},watch: {// 如果被监听的数据是个对象，对象中的属性发生改变时，监听是不会触发上的// obj: function () {// console.log('obj改变了');// },// 单独监听obj中的name属性，只要其修改watch就会触发'obj.name': function (newValue, oldValue) {// newValue为新值// oldValue为旧值console.log('obj改变了');console.log('obj改变了');}},methods: {fn() {this.obj = {} // 修改了obj中的内在指向// this.obj.name = "zhansang" //还是在obj中内存中修改不会触发watch}},})</script></html>
watch深度监听
deep为true开启，默认为false开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码数组也是同样如此<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app">姓名：<input type="text" v-model="obj.name" /><br />年龄：<input type="text " v-model="obj.age" /><br /></div></body><script src="./vue.js"></script><script>// watch:// 1.只要被监听的数据发生改变，就会触发对应的逻辑代码// 2.如果被监听的数据是个对象，对象中的属性发生改变时，监听是不会触发上的let vm = new Vue({el: '#app',data: {obj: {name: 'xiaoming',age: 18}},watch: {obj: {handler: function () {console.log('obj改变了')},// 开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码deep: true}}})</script></html>
watch的immediate
在选项中指定immediate: true,将立即以表达式的当前值触发回调watch: {obj.name: {handler: function () {console.log('obj改变了')},// 立即以obj.name的当前值触发回调immediate: true}}
watch的数组格式
有时我们需要在某一变量中调用多个操作传入的回调数组，它们会被逐一调用
watch: {'obj.name': {handler () {this.fn1 ()this.fn2 ()},immediate: true,deep: true}},methods: {fn1 () {console.log('执行了fn1')},fn2 () {console.log('执行了fn2')} }
fn1,fn2都需要在value变动的时候调用，如果需要两者的调用时机不同，以上写法就无法实现了，这就需要用到watch的数组格式了
watch: {'obj.name': [{handler () {this.fn1 ()},deep: true},// 进入需立即执行一次fn2{handler () {this.fn2 ()},deep: true,immediate: true}]},methods: {fn1 () {console.log('执行了fn1')},fn2 () {console.log('执行了fn2')}},
如果觉得《watch中的深度监听》对你有帮助，请点赞、收藏，并留下你的观点哦！
