一文詳解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函數的用法在下面程式碼中都有所體現，註解詳細

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

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

       //情况一：监视ref所定义的一个响应式数据
       watch(sum,(newValue,oldValue)=>{
           console.log(&#39;sum的值变化了&#39;,newValue,oldValue)
       },{immediate:true,deep:true})
       //immediate的值为true时表示非惰性的立即执行的(默认情况下是false)
       //deep深层次触发（此处设置deep无意义）

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

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

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

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


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

      //情况五：监视reactive所定义的响应式数据中的某些属性,写成数组的形式
        watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
            console.log(&#39;person的name或age改变了&#39;,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 id="当前求和为-sum">当前求和为：{{sum}}</h2>
        <button @click="sum++">点我+1</button>
        <hr>
        <h2 id="当前的信息为-msg-nbsp">当前的信息为：{{msg}} </h2>
        <!-- 点击button拼接！ -->
        <button @click="msg+=&#39;!&#39;">修改数据</button>
        <hr>
        <h2 id="姓名-person-name">姓名：{{person.name}}</h2>
        <h2 id="年龄-person-age">年龄:{{person.age}}</h2>
        <h2 id="薪资-person-job-j-salary">薪资：{{person.job.j1.salary}}</h2>
        <button @click="person.name+=&#39;~&#39;"> 修改姓名</button>
        <button @click="person.age++"> 增长年龄</button>
        <button @click="person.job.j1.salary++"> 增长薪资</button>
    </div>
</template>

<script>
import {ref,reactive,watch,watchEffect} from &#39;vue&#39;
export default {
   name:&#39;demo&#39;,
   setup(){
       //数据
       let sum = ref(0)
       let msg = ref(&#39;hello&#39;)
       let person = reactive({
           name:&#39;zhangsan&#39;,
           age:&#39;18&#39;,
           job:{
               j1:{
                   salary:20
               }
           }
       })
//watchEffect函数内部所指定的回调中用到的数据只要发生变化，就会重新执行回调
//只有一个参数，就是回调
    watchEffect(()=>{
        const x1 = sum.value//因为sum是ref定义的响应式数据，需要使用.value调用
        const x2 = person.age
        console.log(&#39;watchEffect配置的回调执行了&#39;)
    })
           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 id="当前求和为-sum">当前求和为：{{sum}}</h2>
        <button @click="sum++">点我+1</button>
        <hr>
        <h2 id="当前的信息为-msg-nbsp">当前的信息为：{{msg}} </h2>
        <!-- 点击button拼接！ -->
        <button @click="msg+=&#39;!&#39;">修改数据</button>
        <hr>
        <h2 id="姓名-person-name">姓名：{{person.name}}</h2>
        <h2 id="年龄-person-age">年龄:{{person.age}}</h2>
        <h2 id="薪资-person-job-j-salary">薪资：{{person.job.j1.salary}}</h2>
        <button @click="person.name+=&#39;~&#39;"> 修改姓名</button>
        <button @click="person.age++"> 增长年龄</button>
        <button @click="person.job.j1.salary++"> 增长薪资</button>
    </div>
</template>

<script>
import {ref,reactive,watch,watchEffect, computed} from &#39;vue&#39;
export default {
   name:&#39;demo&#39;,
   setup(){
       //数据
       let sum = ref(0)
       let msg = ref(&#39;hello&#39;)
       let person = reactive({
           name:&#39;zhangsan&#39;,
           age:&#39;18&#39;,
           job:{
               j1:{
                   salary:20
               }
           }
       })
       let person1 = reactive({
           firstName:&#39;张&#39;,
           lastName:&#39;三&#39;
       })
       //computed
       //计算属性——简写（没有考虑计算属性被修改的情况）
       person1.fullName = computed(()=>{
           //必须含有返回值
           return person1.firstName+&#39;-&#39;+person1.lastName
       })

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

以上是一文詳解Vue中watch和watchEffect的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！