快捷導航

vue3中watch與watchEffect的區(qū)別

更新時間：2023年02月17日 10:16:31 作者：Lvan的前端筆記

vue3 新增的 Composition API中的 watchEffect 和 watch都可在 setup() 函數(shù)中使用，本文重點介紹vue3中watch與watchEffect的區(qū)別，感興趣的朋友一起看看吧

vue3中watch與watchEffect的區(qū)別

watch ref

const x = ref(0)
const y = ref(0)

// 單個 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函數(shù)
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// 多個來源組成的數(shù)組
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

watch reactive

// 提供一個 getter 函數(shù)
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  },
  // 立即執(zhí)行
  { immediate: true }
)

注意，不要使用如下方式：

const obj = reactive({ count: 0 })

// 錯誤，因為 watch() 得到的參數(shù)是一個 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

watchEffect

不用顯式的定義要 watch 的參數(shù)

const todoId = ref(0)
watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

todoId 的值改變了才觸發(fā)

對比

watch 和 watchEffect 都能響應(yīng)式地執(zhí)行有副作用的回調(diào)。它們之間的主要區(qū)別是追蹤響應(yīng)式依賴的方式：

watch 只追蹤明確偵聽的數(shù)據(jù)源。它不會追蹤任何在回調(diào)中訪問到的東西。另外，僅在數(shù)據(jù)源確實改變時才會觸發(fā)回調(diào)。watch 會避免在發(fā)生副作用時追蹤依賴，因此，我們能更加精確地控制回調(diào)函數(shù)的觸發(fā)時機。

watchEffect，則會在副作用發(fā)生期間追蹤依賴。它會在同步執(zhí)行過程中，自動追蹤所有能訪問到的響應(yīng)式屬性。這更方便，而且代碼往往更簡潔，但有時其響應(yīng)性依賴關(guān)系會不那么明確。

一般的副作用就是說這個函數(shù)做了不屬于它應(yīng)該做的事，比如console.log，或者它修改了其他的外部變量之類的。
react中的函數(shù)組件要求必須是純函數(shù)也就是沒有副作用的函數(shù)，就是因為這個函數(shù)會被很多次調(diào)用，如果有副作用比如修改了全局變量，那么將無法控制該變量的準確性。（react hooks 函數(shù)組件中的生命周期函數(shù)就是副作用）
vue里面一般就是說，一些當狀態(tài)改變時需要執(zhí)行的行為，比如在每次msg變量改變時我需要重新打印它，那么這個打印行為就可以說是一個副作用(effect)

擴展：vue3中的 watchEffect 和 watch 有什么區(qū)別以及如何使用

vue3 新增的 Composition API中的 watchEffect 和 watch
都可在 setup() 函數(shù)中使用

watchEffect：
1.它是立即執(zhí)行的，在頁面加載時會主動執(zhí)行一次，來收集依賴
2.不需要傳遞需要偵聽的內(nèi)容，它可以自動感知代碼依賴，只需要傳遞一個回調(diào)函數(shù)
3.它不能獲取之前數(shù)據(jù)的值
4.它的返回值用來停止此監(jiān)聽

例：

setup() {
  const { reactive, watchEffect } = vue;
  const data = reactive({ name:'lei' })

  const stop = watchEffect( () => {  // 返回值 stop 用來停止監(jiān)聽
    console.log( data.name )  // 頁面加載時執(zhí)行一次之后，當 data.name 改變時，將會再次執(zhí)行l(wèi)og

    setTimeout( () => {
      stop();  //5秒之后停止此監(jiān)聽
    }, 5000 )
  })
}

watch : （watch也可以在setup中使用）
1.具備一定的惰性 lazy （但可配置 immediate , 使其主動）
2.參數(shù)可拿到更改之前的值和更改之后的值
3.可以偵聽多個數(shù)據(jù)的變化，用一個偵聽器承載

例：

const { reactive, watch, ref } = vue;
const name = ref('yang')
// ref包裝過的可直接通過watch的第一個參數(shù)傳入
watch( name, (newValue,oldValue) => { //  第一個參數(shù) 需要監(jiān)聽的數(shù)據(jù)
  console.log(newValue)  // 新值
  console.log(newValue)  // 舊值
}，{ immediate: true }) //  第三個參數(shù)可接受配置項

const data = reactive({ name:'lei', age:18 })
// 但是 reactive 包裝過的值不可以直接傳入，可使用箭頭函數(shù) return 出需要監(jiān)聽的數(shù)據(jù)
watch( () => data.name, (newValue,oldValue) => { //  第一個參數(shù) 需要監(jiān)聽的數(shù)據(jù)
  console.log(newValue)  // 新值
  console.log(newValue)  // 舊值
}，{ immediate: true }) //  第三個參數(shù)可接受配置項

上邊說到可以偵聽多個數(shù)據(jù)的變化，用一個偵聽器承載，接著看

例：

const data = reactive({ name:'lei', age:18 })
// 可用數(shù)組接收參數(shù)
watch( [() => data.name, () => data.age], ([newName, newAge], [oldName, oldAge]) => { 
  console.log(newName, newAge)  // 新值
  console.log(oldName, oldAge)  // 舊值
})

具體需要用 watch 還是 watchEffect 就看業(yè)務(wù)需求啦

到此這篇關(guān)于vue3中watch與watchEffect的區(qū)別的文章就介紹到這了,更多相關(guān)vue3 watch與watchEffect的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: