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

侦听器

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

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

侦听器的格式

1. 方法格式的侦听器

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

2. 对象格式的侦听器

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

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实例对象创建时还没确定好监听什么，需要后续在确定，则可以使用下面这种方法

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

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

深度侦听(deep选项)

<div id="app">
	<input type="text" v-model="info.username">		<!-- 注意这里不能直接写username，因为data里面就没有username这个属性 -->
</div>

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👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖