很多使用 Vue3 的朋友都遇到過一個問題：在 setup() 函數(shù)里直接解構(gòu) props，數(shù)據(jù)就不再響應(yīng)了。這是為什么呢？

我們先看一個例子。假設(shè)我們有一個組件，它接收一個 user 屬性。在 setup() 里我們可能會這樣寫：

export default {
  props: ['user'],
  setup(props) {
    const { name } = props.user
    return { name }
  }
}

這樣寫看起來沒問題，但實際上，name 已經(jīng)失去了響應(yīng)性。父組件更新 user 時，這里的 name 不會跟著變。

原因：理解 Vue3 的響應(yīng)式原理

要明白原因，得先知道 Vue3 的響應(yīng)式原理。Vue3 用 Proxy 來追蹤數(shù)據(jù)變化。props 本身是響應(yīng)式的，但當你解構(gòu)出 props.user.name 時，你拿到的是一個普通的值。這個值和原來的響應(yīng)式數(shù)據(jù)斷開了聯(lián)系。

一個比喻

就像你有一根水管，水在水管里流動。你把水接出來放到杯子里，水還在杯子里。但水管里再流動的水，就和杯子里的水沒關(guān)系了。

Vue3 的響應(yīng)式系統(tǒng)也是這樣工作的。它只能追蹤那些被 reactive 或 ref 包裹的數(shù)據(jù)。直接解構(gòu)出來的值，只是一個普通的 JavaScript 值，系統(tǒng)不知道這個值需要被追蹤。

正確的做法是什么？

那么，正確的做法是什么呢？有兩種方法。

方法一：避免提前解構(gòu)

不要提前解構(gòu)，在模板里直接使用 props.user.name。這樣就能保持響應(yīng)性。

方法二：使用toRefs

import { toRefs } from 'vue'

export default {
  props: ['user'],
  setup(props) {
    const { user } = toRefs(props)
    const name = user.value.name
    return { name }
  }
}

toRefs 會把響應(yīng)式對象的每個屬性都轉(zhuǎn)成 ref。這樣解構(gòu)出來的屬性還是響應(yīng)式的。

注意細節(jié)

toRefs 處理的是 props 本身，不是 props.user。因為 props 才是響應(yīng)式對象，props.user 可能只是一個普通對象。

如果你需要解構(gòu) props.user 里的屬性，可以這樣寫：

import { toRefs, reactive } from 'vue'

export default {
  props: ['user'],
  setup(props) {
    const user = reactive({ ...props.user })
    const { name } = toRefs(user)
    return { name }
  }
}

先用 reactive 包裹，再用 toRefs 解構(gòu)。這樣 name 就是響應(yīng)式的了。

特殊情況：將props值傳遞給函數(shù)

還有一種情況要注意。有些時候，你解構(gòu) props 是為了傳值給其他函數(shù)。比如：

setup(props) {
  const { id } = props
  fetchData(id)
}

這樣寫，id 變化時，fetchData 不會重新執(zhí)行，因為這里的 id 只是一個普通值。

正確的寫法是用 watch 或 watchEffect：

import { watch } from 'vue'

setup(props) {
  watch(
    () => props.id,
    (newId) => {
      fetchData(newId)
    }
  )
}

這樣，props.id 變化時，fetchData 就會用新的 id 重新執(zhí)行。

總結(jié)

直接解構(gòu) props 會丟失響應(yīng)性，因為解構(gòu)出來的是普通值。要保持響應(yīng)性，可以：

1. 在模板里直接使用props.xxx
2. 用 toRefs 處理后再解構(gòu)
3. 需要響應(yīng)式地使用 props 值時，記得用 watch 或 watchEffect

最新評論