解決Vue數(shù)據(jù)更新了但頁面沒有更新的問題
背景
在vue項目中，有些我們會遇到修改完數(shù)據(jù)，但是視圖卻沒有更新的情況。具體的場景不一樣，解決問題的方法也不一樣。在網(wǎng)上看了很多文章，在此總結(jié)匯總一下。針對，數(shù)據(jù)更新視圖沒有更新的情況，建議深入了解一下，vue的響應(yīng)式原理。
如果，你發(fā)現(xiàn)自己需要在vue中做一次強制更新，99.9%的情況，是你在某個地方做錯了事。
一、vue數(shù)據(jù)更新但頁面沒有更新的7種情況匯總
1.vue無法檢測實例被創(chuàng)建時，不存在于data中的property
原因：由于vue會在初始化實例時，對property執(zhí)行g(shù)etter/setter轉(zhuǎn)化，所以，property必須在data對象上存在才能讓vue將它轉(zhuǎn)化為響應(yīng)式的。
①場景：
var vm = new Vue({
data:{},
// 頁面不會變化
template: '<div>{{message}}</div>'
})
vm.message = 'Hello!' // `vm.message` 不是響應(yīng)式的②解決辦法：
var vm = new Vue({
data: {
// 聲明 a、b 為一個空值字符串
message: '',
},
template: '<div>{{ message }}</div>'
})
vm.message = 'Hello!'2.vue無法檢測對象property的添加或移除
原因：官方–由于JavaScript(ES5)的限制，Vue.js不能檢測到對象屬性的添加或刪除。因為vue.js在初始化實例時將屬性轉(zhuǎn)為getter/setter，所以屬性必須在data對象上才能讓vue.js轉(zhuǎn)換它，才能讓它使響應(yīng)的。
①場景：
var vm = new Vue({
data:{
obj: {
id: 001
}
},
// 頁面不會變化
template: '<div>{{ obj.message }}</div>'
})
vm.obj.message = 'hello' // 不是響應(yīng)式的
delete vm.obj.id // 不是響應(yīng)式的②解決辦法：
//動態(tài)添加 -- vue.set
Vue.set(vm.obj,propertyName,newValue);
//動態(tài)添加 -- vm.$set
vm.$set(vm.obj,propertyName,newValue);
//動態(tài)添加多個
// 代替Object.assign(this.obj,{a:1,b:2})
this.obj = Object.assign({},this.obj,{a:1,b:2});
//動態(tài)移除--vm.$delect
Vue.delete(vm.obj,propertyName);
//動態(tài)移除 --vm.$delete
vm.$delete(vm.obj,propertyName);3.vue不能檢測通過數(shù)組索引值，直接修改一個數(shù)組項
原因：官方–由于JavaScript的限制，Vue不能檢測數(shù)組和對象的變化；性能代價和獲得用戶體驗不成正比。
①場景：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是響應(yīng)性的②解決辦法：
//Vue.set Vue.set(vm.items,indexOfItem,newValue); //vm.$set vm.$set(vm.items,indexOfItem,newValue); //Array.prototype.splice vm.items.splice(indexOfItem,1,newValue);
擴展：Object.defineProperty()可以監(jiān)測數(shù)組的變化
Object.defineProperty()可以監(jiān)測到數(shù)組的變化。但對數(shù)組新增一個屬性(index)不會監(jiān)測到數(shù)據(jù)變化，因為無法監(jiān)測到新增數(shù)組的小標(index)，刪除一個屬性(index)也是。
①場景：
var arr = [1, 2, 3, 4]
arr.forEach(function(item, index) {
Object.defineProperty(arr, index, {
set: function(value) {
console.log('觸發(fā) setter')
item = value
},
get: function() {
console.log('觸發(fā) getter')
return item
}
})
})
arr[1] = '123' // 觸發(fā) setter
arr[1] // 觸發(fā) getter 返回值為 "123"
arr[5] = 5 // 不會觸發(fā) setter 和 getter4.vue不能監(jiān)測直接修改數(shù)組長度的變化
原因：官方–由于JavaScript的限制，vue不能檢測數(shù)組和對象的變化；（性能代價和獲得用戶體驗不成正比）。
①場景：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items.length = 2 // 不是響應(yīng)性的②解決辦法：
vm.items.splice(newLength)
5.在異步更新執(zhí)行之前操作DOM數(shù)據(jù)不會變化
原因：Vue在更新DOM時是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，vue將開啟一個隊列，并緩沖在同一個事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個watcher被多次觸發(fā)，只會被推入到隊列中一次。這種在緩沖時，去除重復(fù)數(shù)據(jù)對于避免不必要的計算和DOM操作是非常重要的。然后，在下一個的時間循環(huán)"tick"中，vue刷新隊列并執(zhí)行實際（已去重的）工作。vue在內(nèi)部對異步隊列嘗試使用原生的Promise.then、MutationObserver和setImmediate，如果執(zhí)行環(huán)境不支持，則會采用setTimeout(fn,0)代替。
①場景：
<div id="example">{{message}}</div>var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
vm.$el.style.color = 'red' // 頁面沒有變化②解決辦法：
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改數(shù)據(jù)
//使用Vue.nextTick(callback) callback將在DOM更新完成后被調(diào)用
Vue.nextTick(function(){
vm.$el.textContent === 'new message' //true
vm.$el.style.color = 'red' //文字顏色變成紅色
})擴展：異步更新帶來的數(shù)據(jù)響應(yīng)的誤解
<!-- 頁面顯示：我更新啦！ -->
<div id="example">{{message.text}}</div>var vm = new Vue({
el: '#example',
data: {
message: {},
}
})
vm.$nextTick(function () {
this.message = {}
this.message.text = '我更新啦！'
})上段代碼中，我們在data對象中聲明了一個message空對象，然后，在下次DOM更新循環(huán)結(jié)束之后，觸發(fā)的異步回調(diào)中，執(zhí)行了如下兩段代碼：
this.message = {};
this.message.text = '我更新啦！'到這里，模板更新了，頁面最后會顯示我更新啦！。
模板更新了，應(yīng)該具有響應(yīng)式特性，如果這么想那么你就已經(jīng)走入誤區(qū)。
一開始，我們在data對象中，只是聲明了一個message空對象，并不具有text屬性，所以該text屬性是不具有響應(yīng)式特性的。
但模板切切實實已經(jīng)更新了，這又是怎么回事呢？
那是因為Vue.js的DOM更新是異步的，即當(dāng)setter操作發(fā)生后，指令并不會立馬更新，指令的更新操作會有一個延遲，當(dāng)指令更新執(zhí)行的時候，此時text屬性已經(jīng)賦值，所以指令更新模板時，得到的是新值。
模板中每一個指令/數(shù)據(jù)綁定都有一個對應(yīng)的watcher對象，在計算過程中，它把屬性記錄為依賴。之后當(dāng)依賴的setter被調(diào)用時，會觸發(fā)watcher重新計算，也就會導(dǎo)致它的關(guān)聯(lián)指令更新DOM。
具體流程如下所示：
- 執(zhí)行this.message = { };時，setter被調(diào)用；
- Vue.js追蹤到message依賴的setter被調(diào)用后，會觸發(fā)watcher重新計算；
- this.message.text = ‘我更新啦！’；對text屬性進行賦值；
- 異步回調(diào)邏輯執(zhí)行結(jié)束之后，就會導(dǎo)致它的關(guān)聯(lián)指令更新DOM，指令更新開始執(zhí)行。
- 所以，真正的觸發(fā)模板更新的操作是this.message = { };這一句引起的，因為觸發(fā)了setter，所以單看上述例子，具有響應(yīng)式特性的數(shù)據(jù)只有message這一層，它的動態(tài)添加的屬性是不具備的。
對應(yīng)上述第二點–vue無法檢測對象property的添加或移除
6.循環(huán)嵌套層級太深，視圖不更新？
看到網(wǎng)上有些人說，數(shù)據(jù)更新的層級太深，導(dǎo)致數(shù)據(jù)不更新或者更新緩慢從而導(dǎo)致視圖不更新？PS:我遇到的就是這種情況，暫時也沒發(fā)現(xiàn)哪里有問題（尷尬.jpg），就使用了強制更新的方法。針對上述情況，有人給出解決方法是使用強制更新：
如果，你發(fā)現(xiàn)發(fā)自己需要在vue中做一次強制更新，99.99%的情況，是你在某個地方做錯了事。
vm.$forceUpdate()
7.擴展：路由參數(shù)變化時，頁面不更新（數(shù)據(jù)不更新）
擴展一個因為路由參數(shù)變化，而導(dǎo)致頁面不更新的問題，頁面不更新本質(zhì)上就是數(shù)據(jù)沒有更新。
原因：路由視圖組件引用了相同組件時，當(dāng)路由參數(shù)變化時，會導(dǎo)致該組件無法更新，也就是我們常說的頁面無法更新的問題。
①場景：
<div id="app">
<ul>
<li><router-link to="/home/foo">To Foo</router-link></li>
<li><router-link to="/home/baz">To Baz</router-link></li>
<li><router-link to="/home/bar">To Bar</router-link></li>
</ul>
<router-view></router-view>
</div>const Home = {
template:`<div>{{message}}</div>`,
data(){
return{
message:this.$route.params.name
}
}
}
const router = new VueRouter({
mode:'history',
routes:[
{path:'/home',component:Home},
{path:'/home/:name',component:Home}
]
})
new Vue({
el:'#app',
router
})上段代碼中，我們在路由構(gòu)建選項routes中配置了一個動態(tài)路由’/home/:name’，他們共用一個路由組件Home，這代表他們復(fù)用RouterView。當(dāng)進行路由切換時，頁面只會渲染第一次路由匹配到的參數(shù)，之后再進行路由切換時，message是沒有變化的。
②場景：
<div id="app">
<ul>
<li><router-link to="/home/foo">To Foo</router-link></li>
<li><router-link to="/home/baz">To Baz</router-link></li>
<li><router-link to="/home/bar">To Bar</router-link></li>
</ul>
<router-view></router-view>
</div>const Home = {
template: `<div>{{message}}</div>`,
data() {
return {
message: this.$route.params.name
}
}
}
const router = new VueRouter({
mode:'history',
routes: [
{path: '/home', component: Home },
{path: '/home/:name', component: Home }
]
})
new Vue({
el: '#app',
router
})上段代碼中，我們在路由構(gòu)建選項routes中配置了一個動態(tài)路由’/home:/name’，它們共用一個路由組件Home，這代表他們復(fù)用RouterView。當(dāng)進行路由切換時，頁面只會渲染第一次路由匹配到的參數(shù)，之后再進行路由切換時，message是沒有變化的。
③解決辦法：
解決辦法有很多種，這里只列舉我常用到的幾種方法。
1.通過watch監(jiān)聽$route的變化：
const Home = {
template: `<div>{{message}}</div>`,
data() {
return {
message: this.$route.params.name
}
},
watch:{
'$route':function(){
this.message = this.$route.params.name
}
}
}
...
new Vue({
el: '#app',
router
})2.給綁定key屬性，這樣vue就會認為這是不同的。
弊端：如果從/home跳轉(zhuǎn)到/user等其他路由下，我們是不用擔(dān)心組件更新問題的，所以這個時候key屬性是多余的。
<div id="app"> ... <router-view :key="key"></router-view> </div>
二、本人常用的方法：
給dom綁定key值，然后數(shù)據(jù)更新，再更改key值，這樣可以解決強制刷新set，delete，Object.assign()等方法this.$nextTick(() => { })
this.$forceUpdate()
以上就是解決Vue數(shù)據(jù)更新了但頁面沒有更新的問題的詳細內(nèi)容，更多關(guān)于Vue數(shù)據(jù)更新但頁面沒更新的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
關(guān)于vue中watch檢測到不到對象屬性的變化的解決方法
本篇文章主要介紹了關(guān)于vue中watch檢測到不到對象屬性的變化的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了京東 Vue3 組件庫支持小程序開發(fā)的詳細流程，通過引入NutUI，即可在項目中使用，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-06-06
在uniapp中,vue的生命周期的用法基本都得以保留,但是對于特殊的需求以及特殊的情況,uniapp還引入了一些特有的生命周期鉤子,本文給大家詳細介紹了vue生命周期在uniapp中的用法,感興趣的朋友可以參考下2024-01-01
本文通過實例代碼給大家介紹了vue生命周期和react生命周期對比 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了VUE表達式{{}}中如何拼接字符問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
本文介紹了如何使用Vite創(chuàng)建Vue項目,包括版本升級、命令變化以及配置vue-router、Vuex和AntDesignVue的方法,同時,也提供了降級Vue?CLI以兼容Vue2項目的步驟2024-12-12
這篇文章主要介紹了Vant主題定制如何修改顏色樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解
這篇文章主要介紹了vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vue實現(xiàn)長圖垂直居上 vue實現(xiàn)短圖垂直居中
這篇文章主要為大家詳細介紹了vue彈性布局實現(xiàn)長圖垂直居上，vue實現(xiàn)短圖垂直居中，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要給大家分享的是 Vue中props用法介紹，? 在Vue中通過props,可以將原本孤立的組件串聯(lián)起來，也就是可以子組件可以接收父組件傳遞過來的data，下面我們一起進入文章看看內(nèi)容的詳細介紹吧,需要的朋友也可以參考一下2021-11-11