Vue3中的watch函數和watchEffect用法詳解

一、前言：

使用過Vue.js框架開發過項目的朋友們應該都知道watch函數在日常開發中有着至關重要的作用，隨着vue3的發布,很多東西都會有相應的變化,今天就來講講其中watch函數使用上的不同以及新增api-watchEffect

二、Vue2.x中的watch：

咱們先來簡單回顧一下vue2.x版本中watch的使用

watch: {
    dataName (val, oldVal){
        console.log("改變前的數據-" + oldVal, "改變后的數據-" + val)
    }
}

三、Vue3中的watch：

watch 函數用來偵聽特定的數據源，並在回調函數中執行副作用。默認情況是懶執行的，也就是說僅在偵聽的源變更時才執行回調。

<template>
  <button @click="change">count is: {{ state.count }}</button>
</template>

<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    let state = reactive({count: 0})
    let change = () => state.count++;
    watch(state, () => {
      console.log(state, '改變')
    })
    return { state, change }
  }
}
</script>

注意上面的代碼，第一個參數傳入的 state 對象，第二個參數是回調函數，只要 state 中任意的屬性發生改變都會執行回調函數，和 vue2 的區別是不要寫 deep 屬性，默認就是深度監聽了。

現在是監聽整個對象，當然我們也可以監聽對象上的某個屬性，注意下面代碼的寫法：第一個是回調函數，第二個參數也是回調函數。

<template>
  <button @click="change">count is: {{ state.count }}</button>
</template>

<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    let state = reactive({count: 0})
    let change = () => state.count++;
    watch(() => state.count, (oldVlaue, newValue) => {
      console.log(oldVlaue, newValue, '改變')
    })
    return { state, change }
  }
}
</script>

上面都是以創建響應式對象函數reactive()方式定義的數據，下面再看看使用ref()初始化的數據怎樣實現數據監聽

<template>
  <button @click="change">count is: {{ count }}</button>
</template>

<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    let count = ref(0)
    let change = () => count.value++;
    watch(count, () => {
      console.log(count.value '改變')
    })
    return { count , change }
  }
}
</script>

四、watchEffect：

其實與 watch 類似的 API 還有一個就是：watchEffect，立即執行傳入的一個函數，並響應式追蹤其依賴，並在其依賴變更時重新運行該函數。

<template>
  <button @click="change">count is: {{ state.count }}</button>
</template>

<script>
import { reactive, watchEffect } from 'vue'
export default {
  setup () {
    let state = reactive({count: 0})
    let change = () => state.count++;
    watchEffect(() => {
      console.log(state.count, '改變')
    })
    return { state, change }
  }
}
</script>

注意它與watch的區別：

1、watch 是需要傳入偵聽的數據源，而 watchEffect 是自動收集數據源作為依賴。

2、watch 可以訪問偵聽狀態變化前后的值，而 watchEffect 沒有。

3、watch 是屬性改變的時候執行，而 watchEffect 是默認會執行一次，然后屬性改變也會執行。