Vue數(shù)據(jù)更新頁面卻沒有更新的幾種情況以及解決方法
官方：如果，你發(fā)現(xiàn)自己需要在vue中做一次強(qiáng)制更新，99.9%的情況，是你在某個地方做錯了事。
情況一：Vue無法檢測實例被創(chuàng)建時不存在于data中的變量
原因：由于 Vue 會在初始化實例時對 data中的數(shù)據(jù)執(zhí)行 getter/setter 轉(zhuǎn)化，所以 變量必須在 data 對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。
例如：
new Vue({
data:{},
template: '<div>{{message}}</div>'
})
this.message = 'Hello world!' // `message` 不是響應(yīng)式的頁面不會發(fā)生變化解決方法：
new Vue({
data: {
message: '',
},
template: '<div>{{ message }}</div>'
})
this.message = 'Hello world!'情況二：vue也不能檢測到data中對象的動態(tài)添加和刪除
例如：
new Vue({
data:{
obj: {
id: 1
}
},
template: '<div>{{ obj.message }}</div>'
})
this.obj.message = 'hello' // 不是響應(yīng)式的
delete this.obj.id // 不是響應(yīng)式的解決方法：
// 動態(tài)添加 - Vue.set
Vue.set(this.obj, 'id', 002)
// 動態(tài)添加 - this.$set
this.$set(this.obj, 'id', 002)
// 動態(tài)添加多個
// 代替 Object.assign(this.obj, { a: 1, b: 2 })
this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })
// 動態(tài)移除 - Vue.delete
Vue.delete(this.obj, 'name')
// 動態(tài)移除 - this.$delete
this.$delete(this.obj, 'name')情況三：變量為數(shù)組時
不能通過索引直接修改或者賦值，也不能修改數(shù)組的長度
例如：
new Vue({
data: {
items: ['a', 'b', 'c']
}
})
this.items[1] = 'x' // 不是響應(yīng)性的
this.items[3] = 'd' // 不是響應(yīng)性的
this.items.length = 2 // 不是響應(yīng)性的解決方法：
// Vue.set Vue.set(this.items, 4, 'd') // this.$set this.$set(this.items, 4, 'd) // Array.prototype.splice this.items.splice(indexOfItem, 4, 'd') //修改長度 this.items.splice(3)
情況四：異步獲取接口數(shù)據(jù)，DOM數(shù)據(jù)不發(fā)現(xiàn)變化
原因：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(funcation, 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' // 文字顏色變成紅色
})情況五：循環(huán)嵌套層級太深，視圖不更新
當(dāng)嵌套太深時，頁面也可能不更新，此時可以讓頁面強(qiáng)制刷新
this.$forceUpdate()迫使vue實例重新（rander）渲染虛擬DOM，注意并不是重新加載組件。
結(jié)合vue的生命周期，調(diào)用$forceUpdate后只會觸發(fā)beforeUpdate和updated這兩個鉤子函數(shù)，不會觸發(fā)其他的鉤子函數(shù)。
它僅僅影響實例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
//官方說如果你現(xiàn)在的場景需要用forceUpdate方法 ,那么99%是你的操作有問題 this.$forceUpdate();
情況六：路由參數(shù)變化時，頁面不更新(數(shù)據(jù)不更新)
例如：
<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)進(jìn)行路由切換時，頁面只會渲染第一次路由匹配到的參數(shù)，之后再進(jìn)行路由切換時，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.給<router-view> 綁定key屬性，這樣 Vue 就會認(rèn)為這是不同的 <router-view>。
弊端：如果從 /home 跳轉(zhuǎn)到 /user 等其他路由下，我們是不用擔(dān)心組件更新問題的，所以這個時候 key 屬性是多余的。
<div id="app">
<router-view :key="key"></router-view>
</div>情況七：變量通過賦值來定義的
在 Vue 中有兩種類型的變量：響應(yīng)式變量和非響應(yīng)式變量。
從后端獲取的變量通常是響應(yīng)式變量，也就是說它們會被 Vue 監(jiān)測到變化并同步到頁面上，如果你修改了這些響應(yīng)式變量，頁面會隨之改變。
而通過賦值來定義的變量通常是非響應(yīng)式變量，如果你修改了這些非響應(yīng)式變量，Vue 并不會監(jiān)測到它們的變化，所以頁面不會改變。
如果你需要使一個非響應(yīng)式變量變成響應(yīng)式變量，可以使用 Vue.set 方法或者數(shù)組的變異方法（例如 push、splice 等）。
例1：Vue.set(對象,添加的key,屬性值”)
Vue.set //這個是直接用在Vue身上的。例如: Vue.set(對象,添加的key,屬性值”) //常見于: xx.js文件中 //注意: js文件中，需要引入vue，比如: import Vue from vue
例2：this.$set(對象,添加的key',屬性值)
this.$set //這個是用在vm或者vc實例身上的，比如vue文件中，this.$set(對象,添加的key',屬性值) //常見于: xx.vue文件中
強(qiáng)制更新數(shù)據(jù)：this.$forceUpdate();
參考文章鏈接：Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決_vue.js_腳本之家
總結(jié)
到此這篇關(guān)于Vue數(shù)據(jù)更新頁面卻沒有更新的幾種情況以及解決方法的文章就介紹到這了,更多相關(guān)Vue數(shù)據(jù)更新頁面卻沒更新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE3基于vite封裝條形碼和二維碼組件的詳細(xì)過程
基礎(chǔ)組件開發(fā)是項目業(yè)務(wù)開發(fā)的基石, 本文主要介紹了通過vue3的vite腳手架快速搭建項目, 開發(fā)條形碼和二維碼組件的過程,感興趣的朋友跟隨小編一起看看吧2023-08-08
vue3發(fā)送驗證碼倒計時功能的實現(xiàn)(防止連點、封裝復(fù)用)
這篇文章主要介紹了vue3發(fā)送驗證碼倒計時功能的實現(xiàn)(防止連點、封裝復(fù)用),實現(xiàn)思路是點擊發(fā)送驗證碼，驗證碼倒計時，校驗手機(jī)號是否正常等一系列操作，本文通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
Vue表單校驗規(guī)則（rules）是一種用于驗證表單數(shù)據(jù)的對象,它通常用于Vue.js框架中的表單組件中,可以在表單提交前進(jìn)行數(shù)據(jù)驗證,這篇文章主要給大家介紹了關(guān)于Vue.js?rules校驗規(guī)則的相關(guān)資料,需要的朋友可以參考下2024-02-02
今天小編就為大家分享一篇vue cli3 配置proxy代理無效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue 部署上線清除瀏覽器緩存的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
當(dāng)通過AJAX方式取回數(shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁面上的展示數(shù)據(jù)，代碼簡單、優(yōu)美、自然，而且便于與在用的頁面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡單示例2017-03-03
解決vue2使用腳手架配置prettier報錯prettier/prettier:context.getPhysical
這篇文章主要介紹了解決vue2使用腳手架配置prettier報錯prettier/prettier:context.getPhysicalFilename is not a function問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了詳解如何制作并發(fā)布一個vue的組件的npm包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue2?自定義?el-radio-button?的樣式并設(shè)置默認(rèn)值的方法
這篇文章主要介紹了vue2?自定義?el-radio-button?的樣式并設(shè)置默認(rèn)值的操作方法，代碼分為html部分和css修改樣式代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
本篇文章主要介紹了vuelidate 對于vueJs2.0的驗證解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03