記錄一下vue中數(shù)據(jù)變了 但是頁(yè)面沒(méi)有變化的幾種情況和解決辦法

情況一：vue無(wú)法檢測(cè)實(shí)例不存在于data中的變量

原因：由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)data中的數(shù)據(jù)執(zhí)行getter/setter轉(zhuǎn)化，所以變量必須在data對(duì)象上存在才能讓Vue將它轉(zhuǎn)化成響應(yīng)式的

例如

<div>{{message}}</div>

data() {

? ? ? ? return { };

}

this.message = "Hello"? //頁(yè)面不會(huì)發(fā)生變化

?解決方法

<div>{{message}}</div>

data() {

? ? ? ? return { message : " " };

}

this.message = "Hello"?

情況二：vue不能檢測(cè)到data中對(duì)象的動(dòng)態(tài)添加屬性或刪除屬性

動(dòng)態(tài)給對(duì)象新增或刪除屬性是不會(huì)觸發(fā)視圖更新的，vue始別不出來(lái)

例如

<div>{{obj.message}}</div>

data() {

? ? ? ? return {

? ? ? ? ? ? ? ? obj: { id: 1 }

???????? };

}

this.obj.message = "Hello"? //不是響應(yīng)式的，頁(yè)面不會(huì)發(fā)生變化

delete this.obj.id //不是響應(yīng)式的

解決辦法

Vue.set(this.obj, 'id', 1)?//動(dòng)態(tài)添加

this.$set(this.obj, 'id', 2) //動(dòng)態(tài)添加

this.obj = Object.assign( {}, this.obj, {a:1, b: 2} ) //動(dòng)態(tài)添加多個(gè)

Vue.delete(this.obj, 'name') //動(dòng)態(tài)移除

this.$delete(this.obj, 'name') //動(dòng)態(tài)移除

情況三：變量為數(shù)組時(shí)，不能通過(guò)索引值直接修改或賦值，也不能修改數(shù)組長(zhǎng)度

在修改數(shù)組數(shù)據(jù)的時(shí)候，應(yīng)該使用push，pop，shift，unshift，sort，reverse等原生方法修改數(shù)據(jù)，因?yàn)関ue能檢測(cè)到這些方法所帶來(lái)的數(shù)組數(shù)據(jù)變化。

?例如

data() {

? ? ? ? return {

? ? ? ? ? ? ? ? arr: ['a', 'b', 'c' ]

???????? };

}

this.arr[0] = 'x' // 不是響應(yīng)式的

this.arr.length = 2 //不是響應(yīng)式的

解決方法

Vue.set( this.arr, 4, 'd' )

this.$set?( this.arr, 4, 'd' )

?情況四：異步獲取接口數(shù)據(jù)，DOM數(shù)據(jù)不發(fā)生變化

vue在更新DOM時(shí)是異步執(zhí)行的。當(dāng)數(shù)據(jù)變化時(shí)，vue不會(huì)立即更新DOM，而是等到下一次事件循環(huán)再執(zhí)行更新。如果需要立即更新視圖，可以使用 Vue.nextTick()方法

情況五：循環(huán)嵌套層級(jí)太深，試圖不更新

當(dāng)嵌套太深時(shí)，頁(yè)面可能不刷新，可以使用?this.$forceUpdate()?讓頁(yè)面強(qiáng)制刷新。this.$forceUpdate()?迫使vue實(shí)例重新渲染虛擬DOM，它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。

官方說(shuō)如果你現(xiàn)在的場(chǎng)景需要用forceUpdate方法，那么99%是你的操作有問(wèn)題

情況六：路由參數(shù)變化時(shí)，頁(yè)面數(shù)據(jù)不更新?

/home/a，/home/b 公用一個(gè)組件Home，這代表他們復(fù)用RouterView，當(dāng)進(jìn)行路由切換時(shí)，頁(yè)面只會(huì)渲染第一次路由匹配到的參數(shù)，之后再進(jìn)行路由切換時(shí)，數(shù)據(jù)不會(huì)變化的。

解決辦法：

1. 通過(guò)watch監(jiān)聽(tīng)$route的變化

2. 給<router-view>綁定key屬性，這樣vue就會(huì)認(rèn)為這是不同的

<router-view :key="key"></router-view>

情況七：變量通過(guò)賦值來(lái)定義的

在Vue中有兩種類型的變量：響應(yīng)式變量和非響應(yīng)式變量。

在后端獲取的變量，通常是響應(yīng)式變量，他們會(huì)被vue監(jiān)測(cè)到變化并同步到頁(yè)面上，如果你修改了這些響應(yīng)式變量，頁(yè)面會(huì)隨之改變。

通過(guò)賦值來(lái)定義的變量，通常是非響應(yīng)式變量，如果你修改了這些非響應(yīng)式變量，vue不會(huì)監(jiān)測(cè)到他們的變化，所以頁(yè)面不會(huì)改變。

如果你需要非響應(yīng)式變量變成響應(yīng)式變量，可以使用Vue.set方法或者數(shù)組的變異方法（例如push、splice等）

Vue.set(對(duì)象，添加的key, 屬性值)

this.$set(對(duì)象，添加的key, 屬性值)

this.$set 是 Vue.js 中的一個(gè)方法，用于解決Vue不能檢測(cè)到對(duì)象屬性的添加或刪除的問(wèn)題。當(dāng)需要?jiǎng)討B(tài)地向響應(yīng)式對(duì)象添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的（即當(dāng)期值改變時(shí)，視圖也會(huì)更新），可以使用this.$set

在Vue3中，this.$set已被移除，因?yàn)閂ue3使用了proxy來(lái)實(shí)現(xiàn)響應(yīng)式，這樣在數(shù)據(jù)變化后能夠更精確的檢測(cè)到屬性的添加和刪除。