在 Vue 開發(fā)里，很多人都遇到過這種情況：

一、什么是響應(yīng)式

Vue 的核心能力之一，就是把數(shù)據(jù)和視圖綁定起來：

• 數(shù)據(jù)變了，視圖自動更新
• 視圖操作后，數(shù)據(jù)也能同步變化

也就是說，Vue 會在你修改數(shù)據(jù)時，自動偵測變化并觸發(fā)重新渲染。

但這個能力有前提：數(shù)據(jù)必須處于 Vue 的響應(yīng)式系統(tǒng)里。

二、數(shù)據(jù)丟失響應(yīng)式的常見原因

1. 直接給對象新增屬性

這是 Vue 2 里最經(jīng)典的問題。

data() {
  return {
    form: {}
  }
}

后面你這樣寫：

this.form.name = '張三'

在 Vue 2 中，name 這個字段一開始不存在，所以 Vue 沒有為它建立響應(yīng)式監(jiān)聽，頁面可能不會更新。

為什么會這樣

Vue 2 使用的是 Object.defineProperty，它只能在初始化時把已有屬性轉(zhuǎn)成響應(yīng)式。
后面新增的字段，它不知道。

2. 直接修改數(shù)組索引

this.list[0] = 'new value'

或者：

this.list.length = 0

在 Vue 2 中，這些寫法也可能無法觸發(fā)更新。

原因

Vue 2 無法攔截數(shù)組索引賦值和長度修改，因此不一定能檢測到變化。

3. 解構(gòu)響應(yīng)式對象，導(dǎo)致響應(yīng)式丟失

比如在 Vue 3 里：

const state = reactive({
  name: 'Tom',
  age: 18
})
const { name } = state

這里的 name 已經(jīng)不再是響應(yīng)式引用了，只是一個普通變量。

為什么

解構(gòu)后拿到的是值，不再通過原來的代理對象訪問，所以丟失了跟蹤能力。

4. 使用了普通對象副本

const newForm = { ...this.form }

這個 newForm 只是一個普通對象，不是 Vue 的響應(yīng)式代理對象。

如果你后面一直操作這個副本，頁面當(dāng)然不會跟著變。

5.ref/reactive用法不當(dāng)

在 Vue 3 中：

const count = ref(0)

需要通過：

count.value++

如果你寫成：

const value = count.value
value++

那么 value 只是一個普通變量，和響應(yīng)式源已經(jīng)脫鉤了。

6. 對響應(yīng)式對象做了深拷貝

const copy = JSON.parse(JSON.stringify(state))

這樣會得到一個全新的普通對象，響應(yīng)式自然就沒了。

7. 使用了markRaw、shallowReactive、shallowRef

這些 API 本身就會讓響應(yīng)式“變淺”或者直接跳過代理。

例如：

const obj = markRaw({
  name: 'Tom'
})

這個對象不會被 Vue 深度代理。

三、Vue 2 和 Vue 3 的區(qū)別

Vue 2

Vue 2 基于 Object.defineProperty，所以有這些典型限制：

• 新增屬性不響應(yīng)
• 刪除屬性不響應(yīng)
• 數(shù)組索引賦值不響應(yīng)
• 數(shù)組長度修改不響應(yīng)

Vue 3

Vue 3 基于 Proxy，能力強(qiáng)很多：

• 新增屬性通常是響應(yīng)式的
• 刪除屬性通常也能響應(yīng)
• 數(shù)組索引賦值一般沒問題

所以 Vue 3 比 Vue 2 省心很多，但它也不是“完全不會丟響應(yīng)式”，只是丟失的場景變少了，主要集中在：

• 解構(gòu)
• 拷貝
• 賦值給普通變量
• 使用 shallow / raw API

四、怎么解決

1. Vue 2 中新增屬性用Vue.set或this.$set

this.$set(this.form, 'name', '張三')

這樣 Vue 會把新字段補(bǔ)成響應(yīng)式。

2. Vue 2 中修改數(shù)組用splice

this.list.splice(0, 1, 'new value')

而不是：

this.list[0] = 'new value'

3. 初始化時把字段都聲明好

這是最穩(wěn)的方式。

data() {
  return {
    form: {
      name: '',
      age: '',
      address: ''
    }
  }
}

這樣后面你直接：

this.form.name = '張三'

就不會有問題。

4. Vue 3 中避免直接解構(gòu)響應(yīng)式對象

錯誤寫法：

const state = reactive({
  form: { name: 'Tom' }
})
const { form } = state

推薦寫法：

const state = reactive({
  form: { name: 'Tom' }
})
const form = toRef(state, 'form')

或者：

const { form } = toRefs(state)

5. 不要隨手把響應(yīng)式對象轉(zhuǎn)成普通副本

如果你只是為了臨時顯示，可以復(fù)制。
如果你還想繼續(xù)響應(yīng)式更新，就不要拷貝成普通對象。

6. 注意ref的.value

Vue 3 里：

const count = ref(0)
count.value++

這是正確的。

五、怎么判斷是不是“丟失響應(yīng)式”

你可以用這幾個方法排查：

• console.log 看數(shù)據(jù)有沒有變
• 檢查模板是否依賴的是同一個響應(yīng)式對象
• 看字段是不是后來才加進(jìn)去的
• 看是不是經(jīng)過了拷貝、解構(gòu)、序列化
• 看是不是 Vue 2 的數(shù)組索引/對象新增問題

如果數(shù)據(jù)變了但頁面沒變，大概率就是：

1. 沒有被 Vue 追蹤
2. 操作方式繞開了響應(yīng)式
3. 視圖依賴的不是你改的那個對象

六、總結(jié)

Vue 數(shù)據(jù)丟失響應(yīng)式，本質(zhì)上就一句話：

你改的不是 Vue 追蹤的那個數(shù)據(jù)源，或者你修改的方式?jīng)]有被 Vue 捕獲。

Vue 2 重點記?。?/h3>

• 新增對象屬性用 Vue.set / this.$set
• 修改數(shù)組索引用 splice
• 初始化時盡量聲明完整字段

Vue 3 重點記?。?/h3>

• 不要隨便解構(gòu)響應(yīng)式對象
• 不要把響應(yīng)式對象拷貝成普通對象
• ref 要記得用 .value
• 少用 markRaw、shallowReactive 這類會降低響應(yīng)式能力的 API

到此這篇關(guān)于Vue 中數(shù)據(jù)丟失響應(yīng)式的原因和解決方案的文章就介紹到這了,更多相關(guān)Vue 數(shù)據(jù)丟失內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

• 三招教你如何解決Vuex數(shù)據(jù)丟失問題
• Vue2中pinia刷新后數(shù)據(jù)丟失的問題解決
• vuex頁面刷新數(shù)據(jù)丟失解決方法詳解
• vue路由傳參之使用query傳參頁面刷新數(shù)據(jù)丟失問題解析
• vue項目element UI input框掃碼槍掃描過快出現(xiàn)數(shù)據(jù)丟失問題及解決方案
• Vue刷新后頁面數(shù)據(jù)丟失問題的解決過程
• vuex頁面刷新數(shù)據(jù)丟失問題的四種解決方式
• 解決vue頁面刷新vuex中state數(shù)據(jù)丟失的問題
• vuex結(jié)合session存儲數(shù)據(jù)解決頁面刷新數(shù)據(jù)丟失問題

最新評論