Vue數(shù)據(jù)變了但頁面沒有變的幾種情況及解決方法
情況一：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)添加屬性和刪除屬性
動態(tài)給對對象新增屬性或刪除屬性是不會觸發(fā)視圖更新的，Vue識別不到
例如：
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', 001)
// 動態(tài)添加 - this.$set
this.$set(thsi.obj, 'id', 002)
// 動態(tài)添加多個 - Object.assign
// 代替 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ù)組的長度
我們在修改數(shù)組數(shù)據(jù)的時候，應(yīng)該使用push()、pop()、shift()、unshift()、sort()、reverse()等原生的方法去操作數(shù)據(jù)，因為Vue可以直接檢測到這些方法所帶來的數(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(你要添加到那個元素的后面就寫到那個元素的索引+1, 0, 要添加的值) // 刪除操作： splice(你要刪除的元素的索引, 1) this.items.splice(indexOfItem, 4, 'd') // 修改長度 this.items.splice(3)
情況四： 異步獲取接口數(shù)據(jù)，DOM數(shù)據(jù)不發(fā)生變化
原因：Vue在更新 DOM 時是異步執(zhí)行的。當(dāng)數(shù)據(jù)變化時，Vue不會立即更新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，因為在此階段，DOM還未渲染
created(){
this.$nextTick(() => { // 不使用this.$nextTick()會報錯
that.$refs.btn.innerHTML = 'created中更改了按鈕內(nèi)容'
})
}
情況五： 循環(huán)嵌套層級太深，視圖不更新
當(dāng)嵌套太深時，頁面也可能不更新，此時可以讓頁面強制刷新
因為Vue修改數(shù)據(jù)是異步執(zhí)行的，所以是不不會立即更新，會等到下一次DOM更新循環(huán)結(jié)束后，統(tǒng)一更新發(fā)生在這一次循環(huán)中修改的數(shù)據(jù)，然后同步視圖更新，所以我們可以修改后自己手動強制更新視圖。
this.$forceUpdate()迫使Vue實例重新（render）渲染虛擬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)進行路由切換時，頁面只會渲染第一次路由匹配到的參數(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就會認(rèn)為這是不同的弊端：如果從 /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 檢測到變化并同步到頁面上，如果你修改了這些響應(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(要添加屬性的對象，要添加屬性的名稱, 要設(shè)置的新屬性值)
// 常見于 xx.vue文件中
this.$set 是 Vue.js 中的一個方法，用于解決Vue不能檢測到對象屬性的添加或刪除的問題。當(dāng)需要動態(tài)地向響應(yīng)式對象添加一個屬性，并確保這個新屬性同樣是響應(yīng)式的（即當(dāng)期值改變時，視圖也會更新），可以使用this.$set
在Vue3中，this.$set已被移除，因為Vue3使用了proxy來實現(xiàn)響應(yīng)式，這樣在數(shù)據(jù)變化后能夠更精確的檢測到屬性的添加和刪除。
以上就是Vue數(shù)據(jù)變了但頁面沒有變的幾種情況及解決方法的詳細(xì)內(nèi)容，更多關(guān)于Vue數(shù)據(jù)變了頁面沒變的解決的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue組件和插件是Vue生態(tài)系統(tǒng)中的兩種重要概念,它們分別服務(wù)于不同的目的,但都極大地豐富了Vue的功能性和可擴展性,下面我們就來看看二者的用法以及區(qū)別吧2024-03-03
這篇文章主要介紹了Vue中的事件綁定與解綁方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue 應(yīng)用在首屏加載時速度過慢,通常與以下問題有關(guān)：打包文件過大、網(wǎng)絡(luò)請求過多、資源加載過慢,針對這些問題,本文給大家介紹了Vue首屏加載過慢的優(yōu)化方法,需要的朋友可以參考下2025-01-01
Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性詳解
這篇文章主要介紹了Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
windows下vue-cli及webpack搭建安裝環(huán)境
這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
以前我們經(jīng)常在react中使用jsx，現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于Vue3使用JSX的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue中在echarts里設(shè)置的定時器清除不掉問題及解決
這篇文章主要介紹了vue中在echarts里設(shè)置的定時器清除不掉問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue router仿天貓底部導(dǎo)航欄功能,需要的朋友可以參考下2017-10-10
Vue中安裝element-ui失敗問題原因及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家介紹了vue打包之后配置統(tǒng)一請求地址實現(xiàn)步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07