Vue中的|Vue中的 watch监听属性详情 Vue中的watch监听属性详情

一.watch监听一般数据的变化(数值，字符串，布尔值)

1.数值
2.字符串
3.布尔值

二.watch 监听复杂类型数据的变化

1.对象
2.数组
3.对象数组
4.对象数组的属性

首先要确认 watch是一个对象，要当成对象来使用。
键：就是那个，你要监听的那个家伙；
值：可以是函数，当你监控的家伙发生变化时，需要执行的函数，这个函数有两个形参
第一个是当前值（新的值），第二个是更新前的值（旧值）
值也可以是函数名：不过这个函数名要用单引号来包裹。
值是包括选项的对象：选项包括有三个。

1.第一个 handler：其值是一个回调函数。即监听到变化时应该执行的函数。
2.第二个是 deep：其值是 true 或 false；确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。)
3.第三个是 immediate：其值是 true 或 false；确认是否以当前的初始值执行 handler 的函数。

一.watch监听一般数据的变化(数值，字符串，布尔值)
举例说明：

1.数值

在data数据中心的num，当我们通过点击事件让它发生变化时，通过watch监听属性监听它的变化

{{num}}
let vm = new Vue({el:'#app',data:{num:0},watch:{// 当前值（已经改变的值）newval旧值 oldvalnum:function(newval,oldval){console.log("新值是："+newval); console.log("旧值是："+oldval); }}})

当我们点击按钮时，查看控制台：

文章图片

注意：在watch中还有其他两种方法

watch:{// 当前值（已经改变的值）newval旧值 oldval// num(newval,oldval){//console.log("新值是："+newval); //console.log("旧值是："+oldval); // }num:{handler(newval,oldval){console.log("新值是："+newval); console.log("旧值是："+oldval); }}}

输出结果是一致的，下面的例子统一使用第三种方法，也就是带handler的方法。

2.字符串

输入的内容为：{{mes}}
let vm = new Vue({el:'#app',data:{mes:''},watch:{mes:{handler(newval,oldval){console.log("新的内容："+newval); console.log("旧的内容："+oldval); }}}})

当我们在文本框内输入内容时：

文章图片

查看输出结果：

文章图片

3.布尔值

通过修改布尔值显示和隐藏
let vm = new Vue({el:'#app',data:{isShow:true},watch:{isShow:{handler(newval,oldval){console.log("新的值："+newval); console.log("旧的值："+oldval); }}}})

当点击按钮切换时，查看控制台：

文章图片

二.watch 监听复杂类型数据的变化

deep 属性：深度监听对象变化 (代表是否深度监听)，当需要监听一个对象的改变时，普通的 watch 方法无法监听到对象内部属性的改变，此时就需要 deep 属性对对象进行深度监听。

1.对象

输入的内容是：{{mes.name}}
let vm = new Vue({el:'#app',data:{mes:{name:''}},watch: {mes:{// watch监听属性监听对象时新旧值时相同的handler(newval){console.log("新值为："+this.mes.name); },deep:true}}})

在文本框中输入内容后，查看控制台：