當(dāng)前位置:首頁 >  站長 >  編程技術(shù) >  正文

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

 2021-01-27 16:56  來源: 腳本之家   我來投稿 撤稿糾錯

  域名預(yù)訂/競價,好“米”不錯過

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

1.watch偵聽器

引入watch

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

對基本數(shù)據(jù)類型進行監(jiān)聽----- watch特性:

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

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

3.可以偵聽多個數(shù)據(jù)的變化,用一個偵聽起承載

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

對引用類型進行監(jiān)聽-----

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

沒有過多的參數(shù) 只有一個回調(diào)函數(shù)

1.立即執(zhí)行,沒有惰性,頁面的首次加載就會執(zhí)行。

2.自動檢測內(nèi)部代碼,代碼中有依賴 便會執(zhí)行

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

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

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也可以變?yōu)榉嵌栊缘?立即執(zhí)行的 添加第三個參數(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ū)別的詳細內(nèi)容,更多關(guān)于vue3 watch和watchEffect的資料請關(guān)注腳本之家其它相關(guān)文章!

來源:腳本之家

鏈接:https://www.jb51.net/article/204827.htm

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關(guān)文章

熱門排行

信息推薦