首页前端开发其他前端知识watch和watchEffect对比是怎样的，怎样应用呢？

watch和watchEffect对比是怎样的，怎样应用呢？

时间2024-03-25 01:26:03发布访客分类其他前端知识浏览1614
导读：这篇文章分享给大家的内容是关于watch和watchEffect对比是怎样的，怎样应用呢？，本文介绍得很详细，内容有一定的参考价值，能帮助大家进一步学习和理解“watch和watchEffect对比是怎样的，怎样应用呢？”，有这方面学习需要...
这篇文章分享给大家的内容是关于watch和watchEffect对比是怎样的，怎样应用呢？，本文介绍得很详细，内容有一定的参考价值，能帮助大家进一步学习和理解“watch和watchEffect对比是怎样的，怎样应用呢？”，有这方面学习需要的朋友可以看看，接下来就让小编带领大家一起来学习一下吧。

前言

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>

以上就是关于watch和watchEffect对比是怎样的，怎样应用呢？的介绍，本文内容仅供参考，有需要的朋友可以借鉴了解看看，希望对大家学习或工作，想要了解更多欢迎关注网络，小编每天都会为大家更新不同的知识。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！


若转载请注明出处： watch和watchEffect对比是怎样的，怎样应用呢？
本文地址： https://pptw.com/jishu/652448.html
自定义MVC框架怎样实现，有哪些要点？ PHP中去掉数组两边括号的方法是什么

游客 回复需填写必要信息
↑