一文详解Vue中watch和watchEffect的区别

前言

watch函数与watcheffect函数都是监听器，在写法和用法上有一定区别，是同一功能的两种不同形态，底层都是一样的。【相关推荐：vue.js视频教程】

watch和watchEffect的对比

watch

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

watchEffect

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

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

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

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

立即学习“前端免费学习笔记（深入）”；

深度解析watch函数

watch函数有两个小坑：

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

监视reactive定义的响应式数据中的某个属性时，且该属性是一个对象，那么此时deep配置生效。

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

    
        
当前求和为：{{sum}}
        点我+1        
        
当前的信息为：{{msg}} 
                修改数据        
        
姓名：{{person.name}}
        
年龄:{{person.age}}
        
薪资：{{person.job.j1.salary}}
         修改姓名         增长年龄         增长薪资    
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       }   }}

登录后复制

watch取消监听

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

登录后复制

深度解析watchEffect函数

函数用法如下代码所示，注释详细：

    
        
当前求和为：{{sum}}
        点我+1        
        
当前的信息为：{{msg}} 
                修改数据        
        
姓名：{{person.name}}
        
年龄:{{person.age}}
        
薪资：{{person.job.j1.salary}}
         修改姓名         增长年龄         增长薪资    
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       }   }}

登录后复制

watchEffect取消监听

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

登录后复制

watchEffect与computed

watchEffect与computed有点像：

但是computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。

而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

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

举例：

    
        
当前求和为：{{sum}}
        点我+1        
        
当前的信息为：{{msg}} 
                修改数据        
        
姓名：{{person.name}}
        
年龄:{{person.age}}
        
薪资：{{person.job.j1.salary}}
         修改姓名         增长年龄         增长薪资    
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       }   }}

登录后复制

以上就是一文详解Vue中watch和watchEffect的区别的详细内容，更多请关注【创想鸟】其它相关文章！