对比Vue2和Vue3的监听器

前言

我们总是会把计算属性和监听器做比较，简单来说，计算属性可以声明性地计算推导值，监听器更多的是为了处理一些状态的变化，不具备声明性。Vue发布了两个大版本，其监听器也发生了变化，本文就重点探讨Vue2和Vue3关于监听器的区别。

Vue2的监听器

Vue通过watch选项来监听响应式数据的变化，当数据状态变化时，就会执行对应的回调函数。

new Vue({
    data: {
        name: ''
    },
    watch: {
        name: {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal)
            },
            deep: true, // 是否为深度监听，多用于对象等深层次的数据
            immediate: true, // 是否立即执行
        },
        ...
    }
})

当前组件实例中，所有的监听属性都会放在watch选项中，可以是对象的方式，也可以是一个函数。

Vue3的监听器

Vue3的监听器相比Vue2有很大的不同，在组合式API中，需要手动调用watch()函数来实现一个监听器，并且每次调用只能作用于一个响应式数据，如果要有多个监听器，那么就需要多次调用函数。

普通监听

watch方法需要从vue中导入

import {watch} from 'vue'

watch(source, callback[, options])

参数说明：

• source：响应式数据，可以是不同形式的来源，包括ref、计算属性、reactive、getter函数、多个来源混合的数组等。不能直接监听响应式对象的property，但是可以通过getter函数的形式访问。

  <script setup>
  import { reactive, watch } from 'vue';
  const obj = reactive({count: 0})
  watch(() => obj.count, (val) => {
    console.log(val);
  })
  // 直接监听响应式对象的属性是不可以的，需要通过getter函数，或者直接监听响应式对象
  // watch(obj.count, (val) => {
  //   console.log(val);
  // })
  </script>
  <template>
    <div>
      <input type="text" v-model="obj.count">
    </div>
  </template>

• callback：回调函数，监听对象状态发生改变后的处理函数，只在状态发生改变时才会执行；如果是getter函数，那么函数返回值发生变化时才会触发回调
• options：侦听器的选项，例如如果要实现深度监听，则可以添加deep属性。使用深度监听会遍历对象中所有嵌套的属性，如果对象的层次深、结构复杂，使用深度监听往往会比较消耗性能，应减少深度监听的范围和深度，可选参数。

普通监听

<script setup>
import { ref, watch } from 'vue'

const question = ref('') // 声明响应式变量

// 可以直接侦听一个 ref
watch(question, async (newQuestion, oldQuestion) => {
  console.log(newQuestion, oldQuestion)
})
</script>

<template>
  <input v-model="question" />
</template>

深度监听

如果是给watch()传入了一个响应式对象，那么将会默认创建一个深度监听，当响应式对象的属性、嵌套属性发生变化时都会触发回调函数。

const obj = reactive({ count: 0 }) // 声明响应式对象

watch(obj, (newValue, oldValue) => {
  // 在嵌套的 property 变更时触发
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象！
})

obj.count++

深度监听会遍历被监听对象的所有属性，如果对象的层次深、数据结构复杂，那么使用深度监听将会带来比较大的性能消耗，可以考虑只监听一些必要的属性。

立即执行监听

watch监听一般都是懒执行，这在Vue2和Vue3中都是一样的。在某些时候，我们需要创建监听器的时候先执行一遍回调函数，也就是立即执行，在Vue2中我们通过指定immediate: true来表示立即执行，但是在Vue3中我们需要导入新的方法：watchEffect()

watchEffect()在创建监听器的时候，会立即执行一遍回调函数，然后Vue会自动追踪函数中存在的依赖关系，并找出响应式源，也就是说不需要我们自己指定。需要注意的是，watchEffect()会找出回调函数中存在的所有响应式property，并且任意一个响应式property状态发生改变都会触发该回调函数。

举个简单的例子：我们有两个输入框，分别输入不同的值，然后在watchEffect()中打印两个输入框的值

<script setup>
import { reactive, watchEffect } from 'vue';
const obj = reactive({count: 0, num: 1})
watchEffect(() => {
  console.log(obj.count, obj.num);
})
</script>
<template>
  <div>
    <input type="text" v-model="obj.count">
    <input type="text" v-model="obj.num">
  </div>
</template>

运行结果：

页面渲染后，会立即指定回调函数并打印出0和1，然后在不同的输入框中输入，都会触发回调函数并打印出输入框的值

组件更新与监听器回调

默认情况下，创建的监听器，都会在Vue组件更新前被调用，这个时候在回调函数中访问的DOM将会是被Vue更新前的状态，如果是立即执行的监听器，访问DOM有可能会出现DOM节点还未渲染的情况。造成这种现象，和Vue的声明周期有关。

先来看一个例子：

<script setup>
import { reactive, watchEffect, ref, nextTick, watchPostEffect } from 'vue';
const obj = reactive({count: 0, num: 1})
watchEffect(() => {
  console.log(obj.count, obj.num);
  // nextTick(() => {
  //   console.log(document.getElementById('sumRef') && document.getElementById('sumRef').innerText);
  // })
  console.log(document.getElementById('sumRef') && document.getElementById('sumRef').innerText);
}, {
    // flush: 'post'
})
// watchPostEffect(() => {
//   console.log(obj.count, obj.num);
//   console.log(document.getElementById('sumRef') && document.getElementById('sumRef').innerText);
// })
</script>
<template>
  <div>
    <input type="text" v-model="obj.count">
    <input type="text" v-model="obj.num">
    <p id="sumRef">Sum: {{obj.count + obj.num}}</p>
  </div>
</template>

页面上有两个输入框，并且显示两个输入框的字符相加的结果。在立即执行的监听器中获取DOM元素并打印文本内容。可以发现，第一次执行的时候DOM节点还未渲染，因此是null；而后更新输入框的值，打印出来的结果也总是会慢一拍。

如果我们想要在回调函数中访问被Vue更新后的DOM，应该怎么操作呢？

• 在普通监听和深度监听中的options参数对象中，指定flush: 'post'
• 使用封装好的watchPostEffect方法
• 可以在回调函数中使用nextTick方法，需要提前导入

销毁监听器

Vue中创建的监听器都会返回一个销毁监听器的方法，并且默认会绑定到宿主组件实例上，伴随组件实例的销毁而销毁，因此大多数情况下是可以不考虑销毁监听器的。这种情况仅限于是同步创建的监听器，如果是异步创建的监听器，那么将不会绑定到组件实例中，在组件实例销毁时也就不会自动销毁，需要我们手动销毁，避免出现内存泄漏。

<script setup>
import { watchEffect } from 'vue'

// 默认绑定到组件实例上，会自动停止
watchEffect(() => {})

// 异步创建的监听器会自动停止
const unWatch = null;
setTimeout(() => {
 unWatch = watchEffect(() => {})
}, 100)
if (unWatch) {
    unWatch(); // 手动销毁异步创建的监听器
}
</script>

总结

• 本文对比了Vue2和Vue3的监听器，Vue2是在watch选项中声明，Vue3的监听器通过函数来创建，分别为：watch、watchEffect、watchPostEffect
• watch可监听响应式对象、getter函数等，如果是要监听响应式对象的属性property，则需要使用getter函数返回响应式对象的属性
• watch可添加第三个参数options，设置是否未深度监听：{deep: true}
• Vue3的立即监听需要使用watchEffect方法来创建，其响应式依赖关系并不明确，Vue会自动跟踪
• Vue的监听器执行在DOM更新前，因此如果要在回调函数中访问更新后的DOM，可以借助于watchPostEffect来创建监听器
• 异步创建的监听器要及时销毁，避免内存泄漏