Vue數(shù)據(jù)變了但頁面沒有變的幾種情況及解決方法
情況一：Vue無法檢測(cè)實(shí)例被創(chuàng)建時(shí)不存在于data中的變量
原因：由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)data中的數(shù)據(jù)執(zhí)行getter/setter轉(zhuǎn)化，所以變量必須在data對(duì)象上存在才能讓Vue將它轉(zhuǎn)化成響應(yīng)式的
例如：
new Vue({
data: {},
template: '<div>{{message}}</div>'
})
this.message = 'Hello World' // 由于'message'不是響應(yīng)式的，頁面不會(huì)發(fā)生變化
解決方法：
new Vue({
data: {
message: ''
},
template: '<div>{{message}}</div>'
})
this.message = 'Hello World'
情況二：Vue不能檢測(cè)到data中對(duì)象的動(dòng)態(tài)添加屬性和刪除屬性
動(dòng)態(tài)給對(duì)對(duì)象新增屬性或刪除屬性是不會(huì)觸發(fā)視圖更新的，Vue識(shí)別不到
例如：
new Vue({
data: {
obj:{
id: 1
}
},
template: '<div>{{ obj.message }}</div>'
})
this.obj.message = 'hello' // 不是響應(yīng)式的
delete this.obj.id //不是響應(yīng)式的
解決辦法：
// 動(dòng)態(tài)添加 - Vue.set
Vue.set(this.obj, 'id', 001)
// 動(dòng)態(tài)添加 - this.$set
this.$set(thsi.obj, 'id', 002)
// 動(dòng)態(tài)添加多個(gè) - Object.assign
// 代替 Object.assign(this.obj, { a:1, b:2})
this.obj = Object.assign({}, this.obj, { a:1, b:2})
// 動(dòng)態(tài)移除 - Vue.delete
Vue.delete(this.obj, 'name')
// 動(dòng)態(tài)移除 - this.$delete
this.$delete(this.obj, 'name')
情況三：變量為數(shù)組時(shí)，不能通過索引值直接修改或者賦值，也不能修改數(shù)組的長度
我們?cè)谛薷臄?shù)組數(shù)據(jù)的時(shí)候，應(yīng)該使用push()、pop()、shift()、unshift()、sort()、reverse()等原生的方法去操作數(shù)據(jù)，因?yàn)閂ue可以直接檢測(cè)到這些方法所帶來的數(shù)組數(shù)據(jù)變化。
例如：
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 // 修改操作： splice(你要修改的元素索引位置, 1, 修改后的值) // 添加操作： splice(你要添加到那個(gè)元素的后面就寫到那個(gè)元素的索引+1, 0, 要添加的值) // 刪除操作： splice(你要?jiǎng)h除的元素的索引, 1) this.items.splice(indexOfItem, 4, 'd') // 修改長度 this.items.splice(3)
情況四： 異步獲取接口數(shù)據(jù)，DOM數(shù)據(jù)不發(fā)生變化
原因：Vue在更新 DOM 時(shí)是異步執(zhí)行的。當(dāng)數(shù)據(jù)變化時(shí)，Vue不會(huì)立即更新DOM，而是等到下一次事件循環(huán)再執(zhí)行更新。如果需要立即更新視圖，可以使用Vue.nextTick(callback)方法
例如1：
修改完數(shù)據(jù)之后想立刻操作 DOM 元素，就需要使用nextTick
<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' // 頁面沒有變化
解決辦法：
<div id='example'>{{message}}</div>
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' // 文字顏色變成紅色
})
例如2： 如果想要在created()中操作DOM，也需要使用nextTick，因?yàn)樵诖穗A段，DOM還未渲染
created(){
this.$nextTick(() => { // 不使用this.$nextTick()會(huì)報(bào)錯(cuò)
that.$refs.btn.innerHTML = 'created中更改了按鈕內(nèi)容'
})
}
情況五： 循環(huán)嵌套層級(jí)太深，視圖不更新
當(dāng)嵌套太深時(shí)，頁面也可能不更新，此時(shí)可以讓頁面強(qiáng)制刷新
因?yàn)閂ue修改數(shù)據(jù)是異步執(zhí)行的，所以是不不會(huì)立即更新，會(huì)等到下一次DOM更新循環(huán)結(jié)束后，統(tǒng)一更新發(fā)生在這一次循環(huán)中修改的數(shù)據(jù)，然后同步視圖更新，所以我們可以修改后自己手動(dòng)強(qiáng)制更新視圖。
this.$forceUpdate()迫使Vue實(shí)例重新（render）渲染虛擬DOM，注意并不是重新加載組件。
結(jié)合 Vue 的生命周期，調(diào)用 $forceUpdate 后只會(huì)觸發(fā) beforeUpdate 和 updated 兩個(gè)鉤子函數(shù)，不會(huì)觸發(fā)其他的鉤子函數(shù)。
它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
// 官方說如果你現(xiàn)在的場(chǎng)景需要用forceUpdate方法，那么99%是你的操作有問題 this.$forceUpdate()
情況六： 路由參數(shù)變化時(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
})
上段代碼中，我們?cè)诼酚蓸?gòu)建選項(xiàng)routes中配置了一個(gè)動(dòng)態(tài)路由'home/:name'，他們共用了一個(gè)路由組件Home，這代表他們復(fù)用 RouterView
當(dāng)進(jìn)行路由切換時(shí)，頁面只會(huì)渲染第一次路由匹配到的參數(shù)，之后再進(jìn)行路由切換時(shí)，message是沒有變化的。
解決方法：
- 通過
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
}
}
},
const router = new VueRouter({
mode: 'history',
routes: [
{path: '/home', component: Home},
{path: '/home/:name, component: Home}
]
})
new Vue({
el: '#app',
router
})
給
<router-view>綁定key屬性，這樣Vue就會(huì)認(rèn)為這是不同的弊端：如果從 /home 跳轉(zhuǎn)到 /user 等其他路由下，我們是不用擔(dān)心組件更新問題的，所以這個(gè)時(shí)候key屬性是多余的。
<div id='app'>
...
<router-view :key='key'></router-view>
</div>
情況七：變量通過賦值來定義的
在 Vue 中有兩種類型的變量：響應(yīng)式變量和非響應(yīng)式變量。
在后端獲取的變量通常是響應(yīng)式變量，也就是說它們會(huì)被 Vue 檢測(cè)到變化并同步到頁面上，如果你修改了這些響應(yīng)式變量，頁面會(huì)隨之改變。
而通過賦值來定義的變量，通常是非響應(yīng)式變量，如果你修改了這些非響應(yīng)式變量，Vue并不會(huì)監(jiān)測(cè)到他們的變化，所以頁面不會(huì)改變。
如果你需要是一個(gè)非響應(yīng)式變量變成響應(yīng)式變量，可以使用Vue.set方法或者數(shù)組的變異方法（例如push、splice等）
例1：Vue.set(對(duì)象，添加的key, 屬性值)
Vue.set
// 這個(gè)是直接用在Vue身上的。例如：Vue.set(對(duì)象, 添加的key, 屬性值)
// 常見于 xx.js文件中
// 注意： js文件中，需要引入vue，比如 import Vue from vue
例2：this.$set(對(duì)象，添加的key, 屬性值)
this.$set
// 這個(gè)是用在vm或vc實(shí)例上的，比如vue文件中，
// this.$set(要添加屬性的對(duì)象，要添加屬性的名稱, 要設(shè)置的新屬性值)
// 常見于 xx.vue文件中
this.$set 是 Vue.js 中的一個(gè)方法，用于解決Vue不能檢測(cè)到對(duì)象屬性的添加或刪除的問題。當(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來實(shí)現(xiàn)響應(yīng)式，這樣在數(shù)據(jù)變化后能夠更精確的檢測(cè)到屬性的添加和刪除。
以上就是Vue數(shù)據(jù)變了但頁面沒有變的幾種情況及解決方法的詳細(xì)內(nèi)容，更多關(guān)于Vue數(shù)據(jù)變了頁面沒變的解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue開發(fā)實(shí)現(xiàn)滑動(dòng)驗(yàn)證組件
這篇文章主要為大家詳細(xì)介紹了如何利用Vue開發(fā)實(shí)現(xiàn)簡單的滑動(dòng)驗(yàn)證組件，并且適配移動(dòng)和PC，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-07-07
Vue中子組件調(diào)用父組件的3種方法實(shí)例
vue子組件調(diào)用父組件的方法其實(shí)不難,最近整理了一下,下面這篇文章主要給大家介紹了關(guān)于Vue中子組件調(diào)用父組件的3種方法,需要的朋友可以參考下2022-05-05
Vue.js中的計(jì)算屬性、監(jiān)視屬性與生命周期詳解
最近在學(xué)習(xí)vue,學(xué)習(xí)中遇到了一些感覺挺重要的知識(shí)點(diǎn),感覺有必要整理下來,這篇文章主要給大家介紹了關(guān)于Vue.js中計(jì)算屬性、監(jiān)視屬性與生命周期的相關(guān)資料,需要的朋友可以參考下2021-06-06
vue 解決mintui彈窗彈起來,底部頁面滾動(dòng)bug問題
這篇文章主要介紹了vue 解決mintui彈窗彈起來,底部頁面滾動(dòng)bug問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue3中使用sse最佳實(shí)踐,封裝工具,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue?狀態(tài)存儲(chǔ)和會(huì)話存儲(chǔ)同步清空問題解決方案(最新推薦)
文章介紹了在使用Pinia定義的useHeaderTabStore中,tab狀態(tài)通過會(huì)話存儲(chǔ)初始化但未在退出登錄時(shí)同步清空的問題,通過在PiniaStore中定義清空tab的函數(shù),并在退出登錄時(shí)調(diào)用該函數(shù),可以確保狀態(tài)和會(huì)話存儲(chǔ)同步清空,避免內(nèi)存中殘留舊數(shù)據(jù),感興趣的朋友一起看看吧2024-12-12
vue省市區(qū)三聯(lián)動(dòng)下拉選擇組件的實(shí)現(xiàn)
本篇文章主要介紹了vue省市區(qū)三聯(lián)動(dòng)下拉選擇組件的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要為大家介紹了Vue編程三部曲之模型樹優(yōu)化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
在Vue里渲染一塊內(nèi)容，會(huì)有四個(gè)流程步驟，那么該怎么理解這個(gè)流程呢，所以本文就給大家詳細(xì)講解一下Vue 渲染流程，文中有纖細(xì)的代碼示例供大家參考,需要的朋友可以參考下2023-07-07