快捷導(dǎo)航

vue3 watch和watchEffect的使用以及有哪些區(qū)別

更新時(shí)間：2021年01月26日 14:30:41 作者：靜女

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

1.watch偵聽(tīng)器

引入watch

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

對(duì)基本數(shù)據(jù)類型進(jìn)行監(jiān)聽(tīng)----- watch特性：

1.具有一定的惰性lazy 第一次頁(yè)面展示的時(shí)候不會(huì)執(zhí)行，只有數(shù)據(jù)變化的時(shí)候才會(huì)執(zhí)行

2.參數(shù)可以拿到當(dāng)前值和原始值

3.可以偵聽(tīng)多個(gè)數(shù)據(jù)的變化，用一個(gè)偵聽(tīng)起承載

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

對(duì)引用類型進(jìn)行監(jiān)聽(tīng)-----

setup() {
	const nameObj = reactive({name: 'leilei', englishName: 'bob'})
 監(jiān)聽(tīng)一個(gè)數(shù)據(jù)
	watch(() => nameObj.name, (curVal, prevVal) => {
 	console.log(curVal, prevVal)
 })
 監(jiān)聽(tīng)多個(gè)數(shù)據(jù) 
	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

沒(méi)有過(guò)多的參數(shù) 只有一個(gè)回調(diào)函數(shù)

1.立即執(zhí)行，沒(méi)有惰性，頁(yè)面的首次加載就會(huì)執(zhí)行。

2.自動(dòng)檢測(cè)內(nèi)部代碼，代碼中有依賴便會(huì)執(zhí)行

3.不需要傳遞要偵聽(tīng)的內(nèi)容會(huì)自動(dòng)感知代碼依賴，不需要傳遞很多參數(shù)，只要傳遞一個(gè)回調(diào)函數(shù)

4.不能獲取之前數(shù)據(jù)的值只能獲取當(dāng)前值

5.一些=異步的操作放在這里會(huì)更加合適

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

偵聽(tīng)器的取消 watch 取消偵聽(tīng)器用法相同

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也可以變?yōu)榉嵌栊缘?立即執(zhí)行的添加第三個(gè)參數(shù) immediate: true

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

以上就是vue3 watch和watchEffect的使用以及有哪些區(qū)別的詳細(xì)內(nèi)容，更多關(guān)于vue3 watch和watchEffect的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: