日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區別，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下

1、watch偵聽器

引入watch

import { ref, reactive, watch, toRefs } from 'vue'

對基本數據類型進行監聽----- watch特性：

1、具有一定的惰性lazy 第一次頁面展示的時候不會執行，只有數據變化的時候才會執行

2、參數可以拿到當前值和原始值

3、可以偵聽多個數據的變化，用一個偵聽起承載

setup() {
    const name = ref('leilei')
    watch(name, (curVal, prevVal) => {
        console.log(curVal, prevVal)
    })
}
template: 'Name: <input v-model="name" />'

對引用類型進行監聽-----

setup() {
    const nameObj = reactive({name: 'leilei', englishName: 'bob'})
    監聽一個數據
    watch(() => nameObj.name, (curVal, prevVal) => {
        console.log(curVal, prevVal)
    })
    監聽多個數據 
    watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
        console.log(curName, curEng, '----', prevName, curEng)
        setTimeout(() => {
            stop1()
        }, 5000)
    })
    const { name, englishName } = toRefs(nameObj)
}
template: 'Name: <input v-model="name" /> englishName: <input v-model="englishName" />'

2、watchEffect

沒有過多的參數 只有一個回調函數

1、立即執行，沒有惰性，頁面的首次加載就會執行。

2、自動檢測內部代碼，代碼中有依賴 便會執行

3、不需要傳遞要偵聽的內容 會自動感知代碼依賴，不需要傳遞很多參數，只要傳遞一個回調函數

4、不能獲取之前數據的值 只能獲取當前值

5、一些=異步的操作放在這里會更加合適

watchEffect(() => {
    console.log(nameObj.name) 
})

偵聽器的取消 watch 取消偵聽器用法相同

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

watch也可以變為非惰性的 立即執行的 添加第三個參數 immediate: true

watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
    console.log(curName, curEng, '----', prevName, curEng)
    setTimeout(() => {
        stop1()
    }, 5000)
}, {
    immediate: true
})