对比Vue2和Vue3的监听器

简介: 我们总是会把计算属性和监听器做比较,简单来说,计算属性可以声明性地计算推导值,监听器更多的是为了处理一些状态的变化,不具备声明性。Vue发布了两个大版本,其监听器也发生了变化,本文就重点探讨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来创建监听器
  • 异步创建的监听器要及时销毁,避免内存泄漏
相关文章
|
5天前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
83 59
|
4天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
5天前
|
缓存 JavaScript 前端开发
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
该文章全面覆盖了Vue.js从基础知识到进阶原理的48个核心知识点,包括Vue CLI项目结构、组件生命周期、响应式原理、Composition API的使用等内容,并针对Vue 2与Vue 3的不同特性进行了详细对比与讲解。
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
|
5天前
|
API UED
如何实现Vue2项目升级Vue3?
如何实现Vue2项目升级Vue3?
12 1
|
5天前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
24 0
|
JavaScript 前端开发
vue通过监听实现相同路径的视图重新加载
最近在做一个项目,前端菜单路径如下: { path: '/oa/workflow/process/:status', component: sys_workflow_process, ...
1252 0
|
6天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
4天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
1天前
|
JavaScript
理解 Vue 的 setup 应用程序钩子
【10月更文挑战第3天】`setup` 函数是 Vue 3 中的新组件选项,在组件创建前调用,作为初始化逻辑的入口。它接收 `props` 和 `context` 两个参数,内部定义的变量和函数需通过 `return` 暴露给模板。`props` 包含父组件传入的属性,`context` 包含组件上下文信息。`setup` 可替代 `beforeCreate` 和 `created` 钩子,并提供类似 `data`、`computed` 和 `methods` 的功能,支持逻辑复用和 TypeScript 类型定义。
20 11
|
5天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
下一篇
无影云桌面