Vue數據更新但頁面沒有更新的多種情況問題及解決
數據更新但頁面沒有更新的多種情況
1.Vue無法檢測實例被創建時不存在於data中的變量
原因：由於 Vue 會在初始化實例時對 data中的數據執行 getter/setter 轉化，所以 變量必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的。
例如：
new Vue({
data:{},
template: '<div>{{message}}</div>'
})
this.message = 'Hello world !' // `message` 不是響應式的頁面不會發生變化
解決方法：
new Vue({
data: {
message: '',
},
template: '<div>{{ message }}</div>'
})
this.message = 'Hello world!'
2.vue也不能檢測到data中對象的動態添加和刪除
例如：
new Vue({
data:{
obj: {
id: 1
}
},
template: '<div>{{ obj.message }}</div>'
})
this.obj.message = 'hello' // 不是響應式的
delete this.obj.id // 不是響應式的
解決：
// 動態添加 - Vue.set
Vue.set(this.obj, 'id', 002)
// 動態添加 - this.$set
this.$set(this.obj, 'id', 002)
// 動態添加多個
// 代替 Object.assign(this.obj, { a: 1, b: 2 })
this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })
// 動態移除 - Vue.delete
Vue.delete(this.obj, 'name')
// 動態移除 - this.$delete
this.$delete(this.obj, 'name')
3.數組的時候
不能通過索引直接修改或者賦值，也不能修改數組的長度
例如：
new Vue({
data: {
items: ['a', 'b', 'c']
}
})
this.items[1] = 'x' // 不是響應性的
this.items[3] = 'd' // 不是響應性的
this.items.length = 2 // 不是響應性的
解決：
// 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)
4.異步獲取接口數據，DOM數據不發現變化
原因：Vue 在更新 DOM 時是異步執行的。隻要偵聽到數據變化，Vue 將開啟一個隊列，並緩沖在同一事件循環中發生的所有數據變更。如果同一個 watcher 被多次觸發，隻會被推入到隊列中一次。這種在緩沖時去除重復數據對於避免不必要的計算和 DOM 操作是非常重要的。然後，在下一個的事件循環“tick”中，Vue 刷新隊列並執行實際 (已去重的) 工作。Vue 在內部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執行環境不支持，則會采用 setTimeout(fn, 0) 代替。
例如：
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改數據
vm.$el.textContent === 'new message' // false
vm.$el.style.color = 'red' // 頁面沒有變化
解決辦法：
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改數據
//使用 Vue.nextTick(callback) callback 將在 DOM 更新完成後被調用
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
vm.$el.style.color = 'red' // 文字顏色變成紅色
})
也可以等數據獲取完成後再觸發dom更新 可點擊 鏈接 查看
5.循環嵌套層級太深，視圖不更新
當嵌套太深時，頁面也可以不更新，此時可以讓頁面強制刷新
this.$forceUpdate() (不建議用)
6.路由參數變化時，頁面不更新(數據不更新)
拓展一個因為路由參數變化，而導致頁面不更新的問題，頁面不更新本質上就是數據沒有更新。
原因：路由視圖組件引用瞭相同組件時，當路由參會變化時，會導致該組件無法更新，也就是我們常說中的頁面無法更新的問題。
場景：
<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
})
上段代碼中，我們在路由構建選項 routes 中配置瞭一個動態路由 '/home/:name'，它們共用一個路由組件 Home，這代表他們復用 RouterView 。
當進行路由切換時，頁面隻會渲染第一次路由匹配到的參數，之後再進行路由切換時，message 是沒有變化的。
解決辦法：
解決的辦法有很多種，這裡隻列舉我常用到幾種方法。
1.通過 watch 監聽 $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 就會認為這是不同的 <router-view>。
弊端：如果從 /home 跳轉到 /user 等其他路由下，我們是不用擔心組件更新問題的，所以這個時候 key 屬性是多餘的。
<div id="app"><router-view :key="key"></router-view> </div>
強制更新數據 this.$forceUpdate()
使用Vue開發時，在函數中改變瞭頁面中的某個值，在函數中查看是修改成功瞭，但在頁面中沒有及時刷新改變後的值；
賦值玩以後，執行下面這個方法 強制刷新數據。
this.$forceUpdate()
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。