watch 与 watchEffect的区别（vue3）

最新推荐文章于 2026-05-02 09:54:50 发布

原创

最新推荐文章于 2026-05-02 09:54:50 发布 · 4.7k 阅读

标签

#vue.js

本文详细对比了Vue中watch和watchEffect两个监听器函数的用法和特点。watch需要显式指定依赖并可以选择惰性执行，而watchEffect自动收集依赖并立即执行。在处理reactive定义的响应式数据时，watch有特定的行为模式，如强制开启深度监听。watchEffect则关注执行过程而非计算结果，始终至少执行一次。此外，文章还提到了如何取消监听以及watchEffect与computed的差异。

watch函数与watchEffect函数都是监听器，在写法和用法上有一定区别，是同一功能的两种不同形态，底层都是一样的。

watch和watchEffect的对比

watch
watch显式指定依赖数据，依赖数据更新时执行回调函数
具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性，页面首次加载就会执行）
监视ref定义的响应式数据时可以获取到原值
既要指明监视的属性，也要指明监视的回调

watchEffect
watchEffect自动收集依赖数据，依赖数据更新时重新执行自身

立即执行，没有惰性，页面的首次加载就会执行

无法获取到原值，只能得到变化后的值

不用指明监视哪个属性，监视的回调中用到哪个属性就监视哪个属性

深度解析watch函数

watch函数有两个小坑：

监视reactive定义的响应式数据（该数据为一个对象，因为reactive只能定义数组或对象类型的响应式）时：oldValue无法正确获取，会强制开启深度监视，deep配置不生效。
监视reactive定义的响应式数据中的某个属性时，且该属性是一个对象，那么此时deep配置生效。

具体的watch函数的用法在下面代码中都有所体现，注释详细

<template>
    <div>
        <h2>当前求和为：{
   
   {
   
   sum}}</h2>
        <button @click="sum++">点我+1</button>
        <hr>
        <h2>当前的信息为：{
   
   {
   
   msg}} </h2>
        <!-- 点击button拼接！ -->
        <button @click="msg+='!'">修改数据</button>
        <hr>
        <h2>姓名：{
   
   {
   
   person.name}}</h2>
        <h2>年龄:{
   
   {
   
   person.age}}</h2>
        <h2>薪资：{
   
   {
   
   person.job.j1.salary}}</h2>
        <button @click="person.name+='~'"> 修改姓名</button>
        <button @click="person.age++"> 增长年龄</button>
        <button @click="person.job.j1.salary++"> 增长薪资</button>
    </div>
</template>

<script>
import {
   
   ref,reactive,watch,watchEffect} from 'vue'
export default {
   
   
   name:'demo',
   setup(){
   
   
       //数据
       let sum = ref(0)
       let msg = ref('hello')
       let person = reactive({
   
   
           name:'zhangsan',
           age:'18',
           job:{
   
   
               j1:{
   
   
                   salary:20
               }
           }
       })
       //监视(三个参数，第一个是监视的对象，第二个是监视的回调函数，第三个是监视的配置)

       //情况一：监视ref所定义的一个响应式数据
       watch(sum,(newValue,oldValue)=>{
   
   
           console.log('sum的值变化了',newValue,oldValue

最低0.47元/天解锁文章