Vue 2 中雙向數(shù)據(jù)綁定失效的情況

對(duì)象 / 數(shù)組的新增屬性 / 索引
Vue 2 的響應(yīng)式系統(tǒng)通過 Object.defineProperty 實(shí)現(xiàn)，只能追蹤初始聲明的屬性。

• 直接給對(duì)象添加新屬性（如 this.obj.newProp = 123）不會(huì)觸發(fā)更新
• 直接通過索引修改數(shù)組（如 this.arr[0] = 'new'）不會(huì)觸發(fā)更新
• 直接修改數(shù)組長度（如 this.arr.length = 0）不會(huì)觸發(fā)更新

解決：使用 Vue.set(obj, key, value) 或 this.$set(obj, key, value)。

使用非響應(yīng)式數(shù)據(jù)
如果數(shù)據(jù)在 data 中未初始化（如 data() { return {} } 后動(dòng)態(tài)添加屬性），新增的屬性不會(huì)成為響應(yīng)式數(shù)據(jù)，綁定會(huì)失效。

異步操作中修改數(shù)據(jù)未觸發(fā)更新
雖然 Vue 通常能捕獲異步操作（如 setTimeout）中的數(shù)據(jù)修改，但某些特殊場(chǎng)景下可能需要手動(dòng)觸發(fā)更新：

setTimeout(() => {
  this.msg = 'new message'
  this.$forceUpdate() // 強(qiáng)制更新
}, 1000)

計(jì)算屬性未正確返回值
計(jì)算屬性（computed）如果沒有正確返回值（如忘記 return），會(huì)導(dǎo)致綁定的數(shù)據(jù)無法更新。

v-model 綁定到非響應(yīng)式屬性
例如綁定到 props 的原始值（非對(duì)象 / 數(shù)組），由于 props 是單向數(shù)據(jù)流，直接修改會(huì)失效且報(bào)錯(cuò)。

Vue 3 中雙向數(shù)據(jù)綁定失效的情況

Vue 3 使用 Proxy 實(shí)現(xiàn)響應(yīng)式系統(tǒng)，解決了 Vue 2 的部分限制，但仍有以下失效場(chǎng)景：

使用 ref 時(shí)未訪問 .value
在腳本中修改 ref 包裝的基本類型數(shù)據(jù)時(shí)，必須通過 .value 訪問，否則不會(huì)觸發(fā)更新：

const count = ref(0)
count = 1 // 錯(cuò)誤，不會(huì)更新
count.value = 1 // 正確

解構(gòu)響應(yīng)式對(duì)象導(dǎo)致失去響應(yīng)性
直接解構(gòu) reactive 創(chuàng)建的對(duì)象會(huì)丟失響應(yīng)性：

const obj = reactive({ name: 'Vue' })
const { name } = obj // name 是非響應(yīng)式的
name = 'Vue 3' // 綁定不會(huì)更新

解決：使用 toRefs 解構(gòu)：const { name } = toRefs(obj)。

修改 reactive 數(shù)組的長度
雖然 Vue 3 支持通過索引修改數(shù)組，但直接修改 length 仍可能導(dǎo)致部分場(chǎng)景失效：

const arr = reactive([1, 2, 3])
arr.length = 0 // 可能無法觸發(fā)更新

解決：使用 arr.splice(0) 清空數(shù)組。

響應(yīng)式對(duì)象被整體替換
reactive 創(chuàng)建的對(duì)象如果被整體替換，新對(duì)象會(huì)失去響應(yīng)性：

let obj = reactive({ name: 'Vue' })
obj = { name: 'Vue 3' } // 新對(duì)象非響應(yīng)式，綁定失效

解決：使用 ref 包裝對(duì)象（const obj = ref({ name: 'Vue' })），通過 obj.value = newObj 更新。

v-model 綁定到 props 時(shí)的錯(cuò)誤用法
Vue 3 中 v-model 本質(zhì)是 modelValue 屬性 + update:modelValue 事件，若直接修改 props.modelValue 會(huì)失效（違反單向數(shù)據(jù)流），需通過 emit 通知父組件更新。

共同失效場(chǎng)景

1. 模板中使用未定義的變量
   若 v-model 綁定的變量在數(shù)據(jù)中未聲明（如 v-model="undefinedVar"），綁定會(huì)失效。
2. 使用 v-model 時(shí)的語法錯(cuò)誤
   例如綁定到表達(dá)式（v-model="count + 1"）或只讀屬性，會(huì)導(dǎo)致雙向綁定失效。
3. 在 setup（Vue 3）或 created 前的鉤子中操作數(shù)據(jù)
   數(shù)據(jù)尚未初始化時(shí)的修改可能無法被響應(yīng)式系統(tǒng)捕獲。

總結(jié)

• Vue 2 的失效主要源于 Object.defineProperty 的限制（無法追蹤新增屬性 / 索引）。
• Vue 3 由于 Proxy 的特性，解決了大部分場(chǎng)景，但需注意 ref 的 .value 訪問、reactive 對(duì)象的解構(gòu)和整體替換問題。

遇到綁定失效時(shí)，通?？梢酝ㄟ^ Vue 提供的 API（如 $set、toRefs）或修正數(shù)據(jù)操作方式解決。

以上就是Vue雙向數(shù)據(jù)綁定失效的常見場(chǎng)景和解決方案的詳細(xì)內(nèi)容，更多關(guān)于Vue雙向數(shù)據(jù)綁定失效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！