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,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,5000)
 })

watch也可以變為非惰性的 立即執行的 新增第三個引數 immediate: true

 watch([() => nameObj.name,5000)
 },{
 	immediate: true
 })

以上就是vue3 watch和watchEffect的使用以及有哪些區別的詳細內容，更多關於vue3 watch和watchEffect的資料請關注我們其它相關文章！