Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
一、侦听器的基本用法
<div id="demo">{{ fullName }}</div> 复制代码
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) 复制代码
这段代码的作用就是监听firstName和fullName，当它们发生变化的时候，就改变fullname的值。
二、侦听器的格式
- 方法格式的侦听器
- 缺点1：无法在刚进入页面的时候，自动触发！
- 缺点2：如果侦听的是一个对象，如果属性中的属性发生了变化，不会触发侦听器！
- 对象格式的侦听器
- 好处1：可以实现刚进入页面，自动触发!
- 好处2：可以实现深度监听，也就是监听对象中的属性是否变化！
三、实现刚进入页面就触发监听和深度监听
刚进入页面就触发监听
通过添加immediate选项来实现
const vm = new Vue({ el: '#app', data: { info: { username: 'admin' } }, watch:{ info:{ handle(newVal){ console.log(newVal) }, // 实现刚进入页面就触发监听 immediate: true } } }) 复制代码
深度监听
在上述代码中，当username发生变化时我们是不能监听成功的，因为变化的是对象属性的值，因此需要深度监听，添加deep选项即可
const vm = new Vue({ el: '#app', data: { info: { username: 'admin' } }, watch:{ info:{ handle(newVal){ console.log(newVal) }, // 实现刚进入页面就触发监听 immediate: true, // 实现深度监听,只要对象中的任何一个属性变化了，都会触发“对象的侦听” deep: true } } }) 复制代码
深度监听返回侦听对象子属性的值
上述代码中执行结果是打印info这个对象，我们希望打印的username的值，需要加上newVal.username还是比较麻烦的，我们其实可以直接监听并打印变化子属性的值，只需要在要监听的子属性外面加上一层单引号即可：
const vm = new Vue({ el: '#app', data: { info: { username: 'admin' } }, watch:{ 'info.username': { handle(newVal){ console.log(newVal) } } } }) 复制代码
最后
⚽本文介绍了Vue中的侦听器的基本使用以及如何实现深度监听，希望大家阅读完有一定的收获呦~
⚾如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
