当前位置: 首页 > 工具软件 > Watch > 使用案例 >

Vue —— watch和watchEffect的区别

谷泽宇
2023-12-01

前言

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)
       },{immediate:true,deep:true})
       //immediate的值为true时表示非惰性的立即执行的(默认情况下是false)
       //deep深层次触发(此处设置deep无意义)

       //情况二:监视ref所定义的多个响应式数据,写成数组的形式

       watch([sum,msg],(newValue,oldValue)=>{
           console.log('sum或者msg变了',newValue,oldValue)
       })

       //情况三:监视reactive所定义的响应式数据
                //若监视的是reactive定义的响应式数据,则无法正确获得oldValue
                //若监视的是reactive定义的响应式数据,则watch会强制开启深度监视

        //我们发现改变person的任意一个属性都会被监视到
        watch(person,(newValue,oldValue)=>{
            console.log('person改变了',newValue,oldValue)
        }) 
        
        //我们尝试设置deep:false,关闭深度监听(目的:改变job的值不会被watch监听到)
        //但是我们发现deep:false并没有生效,原因是此时watch监视的是reactive定义的响应式对象,默认强制开启了深度监听
        watch(person,(newValue,oldValue)=>{
            console.log('person改变了',newValue,oldValue)
        },{deep:false}) 
        


      //情况四:监视reactive所定义的响应式数据中的某个属性
       watch(()=>person.name,(newValue,oldValue)=>{
            console.log('person的job改变了',newValue,oldValue)
        })
         watch(()=>person.age,(newValue,oldValue)=>{
            console.log('person的job改变了',newValue,oldValue)
        })
        watch(()=>person.job,(newValue,oldValue)=>{
            console.log('person的job改变了',newValue,oldValue)
        })
        //从上边我们发现改变name,age都会触发监听,但是改变job不会
        //这是因为name和age属性的值只是一个简单的基本类型数据,
        //而job属性的值是一个对象,比较深,想要监视到,就要开启深度监视,程序如下:
        watch(()=>person.job,(newValue,oldValue)=>{
            console.log('person的job改变了',newValue,oldValue)
        },{deep:true})//此时job改变,会被监视到,此处的deep配置生效
        //需要和情况三进行区分,此处watch监视的是reactive所定义的对象中的某个属性,而情况三watch监视的是reactive所定义的对象

      //情况五:监视reactive所定义的响应式数据中的某些属性,写成数组的形式
        watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
            console.log('person的name或age改变了',newValue,oldValue)
        })

       //返回一个对象(常用)
       return{
           sum,
           msg,
           person
       }
   }
}
</script>

watch取消监听

const stop1 = watch(
  [() => nameObj.name, () => nameObj.name],
  ([curName, curEng], [prevName, curEng]) => {
    console.log(curName, curEng, "----", prevName, curEng);
    setTimeout(() => {
      stop();
    }, 5000);
  }
);

深度解析watchEffect函数

函数用法如下代码所示,注释详细:

<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
               }
           }
       })
//watchEffect函数内部所指定的回调中用到的数据只要发生变化,就会重新执行回调
//只有一个参数,就是回调
    watchEffect(()=>{
        const x1 = sum.value//因为sum是ref定义的响应式数据,需要使用.value调用
        const x2 = person.age
        console.log('watchEffect配置的回调执行了')
    })
           return{
           sum,
           msg,
           person
       }
   }
}
</script>

watchEffect取消监听

const stop = watchEffect(() => {
  console.log(nameObj.name);
  setTimeout(() => {
    stop();
  }, 5000);
});

watchEffect与computed

watchEffect与computed有点像:

  • 但是computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。

  • 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。

  • computed若是值没有被使用时不会调用,但是watchEffect始终会调用一次

举例:

<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, computed} 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
               }
           }
       })
       let person1 = reactive({
           firstName:'张',
           lastName:'三'
       })
       //computed
       //计算属性——简写(没有考虑计算属性被修改的情况)
       person1.fullName = computed(()=>{
           //必须含有返回值
           return person1.firstName+'-'+person1.lastName
       })

       //计算属性——完整写法(考虑读和写)
       person1.fullName = computed({
           //必须含有返回值
           get(){
               return person1.firstName+'-'+person1.lastName
           },
           set(value){
               const nameArr = value.split('-')
               person1.firstName = nameArr[0]
               person1.lastName = nameArr[1]
           }
       })
       //watchEffect
        //可以不写给返回值
        watchEffect(()=>{
            const x1 = sum.value//因为sum是ref定义的响应式数据,需要使用.value调用
            const x2 = person.age
            console.log('watchEffect配置的回调执行了')
        })
         return{
           sum,
           msg,
           person,
           person1
       }
   }
}
</script>
 类似资料: