Vue數(shù)據(jù)變了但頁(yè)面沒(méi)有變的幾種情況及解決方法
情況一：Vue無(wú)法檢測(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)式的，頁(yè)面不會(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í)，不能通過(guò)索引值直接修改或者賦值，也不能修改數(shù)組的長(zhǎng)度
我們?cè)谛薷臄?shù)組數(shù)據(jù)的時(shí)候，應(yīng)該使用push()、pop()、shift()、unshift()、sort()、reverse()等原生的方法去操作數(shù)據(jù)，因?yàn)閂ue可以直接檢測(cè)到這些方法所帶來(lái)的數(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') // 修改長(zhǎng)度 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' // 頁(yè)面沒(méi)有變化
解決辦法：
<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í)，頁(yè)面也可能不更新，此時(shí)可以讓頁(yè)面強(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)容的子組件，而不是所有子組件。
// 官方說(shuō)如果你現(xiàn)在的場(chǎng)景需要用forceUpdate方法，那么99%是你的操作有問(wèn)題 this.$forceUpdate()
情況六： 路由參數(shù)變化時(shí)，頁(yè)面不更新（數(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í)，頁(yè)面只會(huì)渲染第一次路由匹配到的參數(shù)，之后再進(jìn)行路由切換時(shí)，message是沒(méi)有變化的。
解決方法：
- 通過(guò)
watch監(jiān)聽(tīng)$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)心組件更新問(wèn)題的，所以這個(gè)時(shí)候key屬性是多余的。
<div id='app'>
...
<router-view :key='key'></router-view>
</div>
情況七：變量通過(guò)賦值來(lái)定義的
在 Vue 中有兩種類型的變量：響應(yīng)式變量和非響應(yīng)式變量。
在后端獲取的變量通常是響應(yīng)式變量，也就是說(shuō)它們會(huì)被 Vue 檢測(cè)到變化并同步到頁(yè)面上，如果你修改了這些響應(yīng)式變量，頁(yè)面會(huì)隨之改變。
而通過(guò)賦值來(lái)定義的變量，通常是非響應(yīng)式變量，如果你修改了這些非響應(yīng)式變量，Vue并不會(huì)監(jiān)測(cè)到他們的變化，所以頁(yè)面不會(huì)改變。
如果你需要是一個(gè)非響應(yīng)式變量變成響應(yīng)式變量，可以使用Vue.set方法或者數(shù)組的變異方法（例如push、splice等）
例1：Vue.set(對(duì)象，添加的key, 屬性值)
Vue.set
// 這個(gè)是直接用在Vue身上的。例如：Vue.set(對(duì)象, 添加的key, 屬性值)
// 常見(jiàn)于 xx.js文件中
// 注意： js文件中，需要引入vue，比如 import Vue from vue
例2：this.$set(對(duì)象，添加的key, 屬性值)
this.$set
// 這個(gè)是用在vm或vc實(shí)例上的，比如vue文件中，
// this.$set(要添加屬性的對(duì)象，要添加屬性的名稱, 要設(shè)置的新屬性值)
// 常見(jiàn)于 xx.vue文件中
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è)到屬性的添加和刪除。
以上就是Vue數(shù)據(jù)變了但頁(yè)面沒(méi)有變的幾種情況及解決方法的詳細(xì)內(nèi)容，更多關(guān)于Vue數(shù)據(jù)變了頁(yè)面沒(méi)變的解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue組件和插件是Vue生態(tài)系統(tǒng)中的兩種重要概念,它們分別服務(wù)于不同的目的,但都極大地豐富了Vue的功能性和可擴(kuò)展性,下面我們就來(lái)看看二者的用法以及區(qū)別吧2024-03-03
這篇文章主要介紹了Vue中的事件綁定與解綁方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue 應(yīng)用在首屏加載時(shí)速度過(guò)慢,通常與以下問(wèn)題有關(guān)：打包文件過(guò)大、網(wǎng)絡(luò)請(qǐng)求過(guò)多、資源加載過(guò)慢,針對(duì)這些問(wèn)題,本文給大家介紹了Vue首屏加載過(guò)慢的優(yōu)化方法,需要的朋友可以參考下2025-01-01
Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性詳解
這篇文章主要介紹了Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
windows下vue-cli及webpack搭建安裝環(huán)境
這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
以前我們經(jīng)常在react中使用jsx，現(xiàn)在我們?cè)趘ue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于Vue3使用JSX的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue中在echarts里設(shè)置的定時(shí)器清除不掉問(wèn)題及解決
這篇文章主要介紹了vue中在echarts里設(shè)置的定時(shí)器清除不掉問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue router仿天貓底部導(dǎo)航欄功能,需要的朋友可以參考下2017-10-10
Vue中安裝element-ui失敗問(wèn)題原因及解決
Vue中安裝element-ui失敗問(wèn)題原因及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue打包之后配置統(tǒng)一請(qǐng)求地址步驟詳解
這篇文章主要為大家介紹了vue打包之后配置統(tǒng)一請(qǐng)求地址實(shí)現(xiàn)步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07