冇事来学系--Vue2.0侦听器

---

theme: scrolls-light

「这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战」。

侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做出特定的操作

js 语法格式 const vm = new Vue({ el: '#app', data: {username: ''}, // 所有侦听器都要定义在watch节点之下 watch: { // 监听 username值的变化 // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可 // newVal是"变化后的新值", oldVal是"变化之前的旧值" username(newVal, oldVal){ console.log(newVal, oldVal) } } })

侦听器的格式

1. 方法格式的侦听器

- - 缺点一：无法在刚进入页面的时候自动触发侦听器 - 缺点二：当侦听的是一个对象时，若对象里面的属性发生了变化，不会触发侦听器

2. 对象格式的侦听器

- - 优点一：可以通过immediate选项，让侦听器自动触发 - 优点二：可以通过deep选项，让侦听器监听对象中每个属性的变化

```js const vm = new Vue({ el: '#app', data: {username: 'admin'}, // username带默认值 // 所有侦听器都要定义在watch节点之下 watch: { // 监听 username值的变化 username: { // 侦听器的处理函数handler，当username发生变化时被调用 handler(newVal, oldVal){

},
  immediate: true               // immediate属性，默认值为false，当为true时进入页面会立即执行一次侦听器
}

} }) ```

补充：

另一种监听的方式 vm.$watch()

当vm实例对象创建时就知道要监听哪个属性，则可以在对象内使用watch节点来写配置对象

当vm实例对象创建时还没确定好监听什么，需要后续在确定，则可以使用下面这种方法

```js // 在vm实例的外面 vm.$watch('属性名称', { // 配置对象 })

// 示例：监听username vm.$watch('username', { immediate: true, handler(newVal, oldVal){ console.log(newVal, oldVal) } }) ```

深度侦听(deep选项)

```

```

``` const vm = new Vue({ el: '#app', data: { // 用户的信息对象 info: { username: 'admin', pwd: 666666 } },

watch: { // 监听info对象的变化 info: { handler(newVal){ console.log(newVal) }, deep: true // 开启深度侦听，只要对象中任意一个属性发生变化，就会触发 对象的侦听器 } ,

// 也可以直接侦听对象中某一子属性的变化，但必须用单引号包裹(其实每个属性都是引号包裹的，只不过那些都省略了)
'info.username'(newVal){
    console.log(newVal)
}

} }) ```

注意：监听一个复杂数据类型的属性，如一个对象，在改变里面的其中一个属性时，由于这个对象的地址没有发生改变，所以在监听不到这个对象发生变化；而用一个新对象去覆盖原来的对象，这样导致的地址的改变，所以才能监听到对象发生了变化。

所以，我们需要深度监听，只要对象中任意一个属性发生变化，就会触发 对象的侦听器

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖