Vue?CompositionAPI中watch和watchEffect的區(qū)別詳解

更新時間：2023年06月19日 11:33:46 作者：一直酷下去

這篇文章主要為大家詳細介紹了Vue?CompositionAPI中watch和watchEffect的區(qū)別，文中的示例代碼簡潔易懂，希望對大家學習Vue有一定的幫助

watch

偵聽一個數(shù)據(jù)

【例1: watch偵聽ref基礎類型的數(shù)據(jù)】

const app = Vue.createApp({
    setup() {
        const { ref,watch } = Vue;
        const name = ref('LeBrown')
        watch(name,(currentVal,preVal) => {
            console.log(currentVal,preVal);
        })
        return {name}
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
        </div>
    `
})
const vm = app.mount('#root')

【例2: watch偵聽reactive類型的數(shù)據(jù)】

const app = Vue.createApp({
    setup() {
        const { reactive,watch,toRefs} = Vue;
        const nameObj = reactive({name:'LeBrown'})
        watch(()=> nameObj.name,(currentVal,preVal) => {
            console.log(currentVal,preVal);
        })
        const {name} = toRefs(nameObj)
        return {name}
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
        </div>
    `
})
const vm = app.mount('#root')

【備注】

watch具備一定的惰性 lazy (wath偵聽器首次加載不會執(zhí)行，只有數(shù)據(jù)發(fā)生變化才會執(zhí)行)
watch中的參數(shù)可以拿到原始值(回調(diào)函數(shù)的第一個參數(shù))和當前值(回調(diào)函數(shù)的第二個參數(shù))
watch可以偵聽ref基礎類型的數(shù)據(jù)，也可以對reactive類型的數(shù)據(jù)進行監(jiān)聽(watch的第一個參數(shù)要寫成函數(shù)的形式，函數(shù)里面寫要監(jiān)聽值或?qū)ο蟮膶傩?

偵聽多個數(shù)據(jù)

【例1】

const app = Vue.createApp({
    setup() {
        const { reactive,watch,toRefs} = Vue;
        const nameObj = reactive({name:'LeBrown',englishname:'James'})
        watch([()=> nameObj.name,()=> nameObj.englishname],([curName,curEng],[prevName,prevEng]) => {
            console.log(curName,curEng);
            console.log(prevName,prevEng);
        })
        const {name,englishname} = toRefs(nameObj)
        return {name,englishname}
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
          <div>
            EnglishName: <input v-model="englishname"/>
          </div>
          <div>
            Name is: {{englishname}}
          </div>
        </div>
    `
})
  const vm = app.mount('#root')

【備注】

watch可以偵聽多個數(shù)據(jù)的變化(watch的第一個參數(shù)是一個數(shù)組，第二個參數(shù)是一個函數(shù)，函數(shù)的參數(shù)是數(shù)組)，用一個偵聽器承載

watchEffect

【例1】

 const app = Vue.createApp({
    setup() {
        const { reactive,  watchEffect, toRefs } = Vue;
        const nameObj = reactive({ name: 'LeBrown', englishname: 'James' })
        watchEffect(()=>{
            console.log(nameObj.name);
        })
        const { name, englishname } = toRefs(nameObj)
        return { name, englishname }
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
          <div>
            EnglishName: <input v-model="englishname"/>
          </div>
          <div>
            Name is: {{englishname}}
          </div>
        </div>
    `
})
const vm = app.mount('#root')

【運行結(jié)果】

【備注】

watchEffect 會立即執(zhí)行 immediate，沒有惰性(wath偵聽器首次加載就執(zhí))
watchEffect發(fā)現(xiàn)偵聽器中的代碼對外部有依賴，就會對其進行偵聽，如果依賴的值發(fā)生變化，就會執(zhí)行偵聽器中的代碼，也就是說它不需要傳遞你要偵聽的內(nèi)容,自動會感知代碼依賴，不需要傳遞很多參數(shù)，只需要傳遞一個回調(diào)函數(shù)
watchEffect只能獲取到當前的值，不能獲取到之前的值

【總結(jié)】

watch和watchEffect 都是具備偵聽能力的語法，但是在使用時還是有區(qū)別的。比如：在代碼中要寫ajax請求的時候，一般不會用到之前的數(shù)據(jù)，只會用到當前的數(shù)據(jù)，結(jié)合當前的數(shù)據(jù)發(fā)送請求，這種情況下使用watchEffect來發(fā)送ajax就比較合適
setup是純函數(shù)，給固定的輸入就會有固定的輸出，但是涉及到異步請求或者定時器，輸出和輸入就不是純函數(shù)，導致它不是純函數(shù)的異步請求叫Effect(副作用)，因此從名字上看在處理異步的操作的時候，最好使用watchEffect

其他

取消偵聽器

const app = Vue.createApp({
    setup() {
        const { reactive,  watchEffect, toRefs } = Vue;
        const nameObj = reactive({ name: 'LeBrown', englishname: 'James' })
        const stop = watchEffect(()=>{
            console.log(nameObj.name);
            console.log(nameObj.englishname);
            setTimeout(() => {
                // 取消偵聽器
                stop()
            }, 3000);
        })
        const { name, englishname } = toRefs(nameObj)
        return { name, englishname }
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
          <div>
            EnglishName: <input v-model="englishname"/>
          </div>
          <div>
            Name is: {{englishname}}
          </div>
        </div>
    `
})
const vm = app.mount('#root')

取消watch偵聽器也是一樣