Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決
數(shù)據(jù)更新但頁面沒有更新的多種情況
1.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!'2.vue也不能檢測(cè)到data中對(duì)象的動(dòng)態(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)式的解決：
// 動(dòng)態(tài)添加 - Vue.set
Vue.set(this.obj, 'id', 002)
?
// 動(dòng)態(tài)添加 - this.$set
this.$set(this.obj, 'id', 002)
?
// 動(dòng)態(tài)添加多個(gè)
// 代替 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')3.數(shù)組的時(shí)候
不能通過索引直接修改或者賦值，也不能修改數(shù)組的長(zhǎng)度
例如：
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') //修改長(zhǎng)度 this.items.splice(3)
4.異步獲取接口數(shù)據(jù)，DOM數(shù)據(jù)不發(fā)現(xiàn)變化
原因：Vue 在更新 DOM 時(shí)是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作是非常重要的。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。Vue 在內(nèi)部對(duì)異步隊(duì)列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執(zhí)行環(huán)境不支持，則會(huì)采用 setTimeout(fn, 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' // 文字顏色變成紅色
})也可以等數(shù)據(jù)獲取完成后再觸發(fā)dom更新 可點(diǎn)擊 鏈接 查看
5.循環(huán)嵌套層級(jí)太深，視圖不更新
當(dāng)嵌套太深時(shí)，頁面也可以不更新，此時(shí)可以讓頁面強(qiáng)制刷新
this.$forceUpdate() ? (不建議用)
6.路由參數(shù)變化時(shí)，頁面不更新(數(shù)據(jù)不更新)
拓展一個(gè)因?yàn)槁酚蓞?shù)變化，而導(dǎo)致頁面不更新的問題，頁面不更新本質(zhì)上就是數(shù)據(jù)沒有更新。
原因：路由視圖組件引用了相同組件時(shí)，當(dāng)路由參會(huì)變化時(shí)，會(huì)導(dǎo)致該組件無法更新，也就是我們常說中的頁面無法更新的問題。
場(chǎng)景：
<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 是沒有變化的。
解決辦法：
解決的辦法有很多種，這里只列舉我常用到幾種方法。
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 就會(huì)認(rèn)為這是不同的 <router-view>。
弊端：如果從 /home 跳轉(zhuǎn)到 /user 等其他路由下，我們是不用擔(dān)心組件更新問題的，所以這個(gè)時(shí)候 key 屬性是多余的。
?<div id="app"><router-view :key="key"></router-view> ? ? </div>
強(qiáng)制更新數(shù)據(jù) this.$forceUpdate()
使用Vue開發(fā)時(shí)，在函數(shù)中改變了頁面中的某個(gè)值，在函數(shù)中查看是修改成功了，但在頁面中沒有及時(shí)刷新改變后的值；
賦值玩以后，執(zhí)行下面這個(gè)方法 強(qiáng)制刷新數(shù)據(jù)。
this.$forceUpdate()
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項(xiàng)目中使用scss的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了elementPlus修改主題色以及皮膚設(shè)置思路，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
v-show和v-if的區(qū)別?及應(yīng)用場(chǎng)景
這篇文章主要介紹了v-show和v-if的區(qū)別及應(yīng)用場(chǎng)景，vue中v-show與?v-if的作用效果是相同的，都能控制元素在頁面是否顯示，但是也有一定的區(qū)別，下面文章梳理總結(jié)v-show和v-if的區(qū)別，需要的小伙伴可以參考一下2022-06-06
Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)
這篇文章主要介紹了Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了7個(gè)實(shí)用的Vue開發(fā)技巧文。中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，下面我們來一起學(xué)習(xí)一下吧2019-05-05
unplugin-vue-components解決命名沖突問題
這篇文章主要介紹了unplugin-vue-components解決命名沖突問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)
這篇文章主要介紹了vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue實(shí)現(xiàn)手機(jī)掃描二維碼預(yù)覽頁面效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)手機(jī)掃描二維碼預(yù)覽頁面效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
Vue點(diǎn)擊在彈窗外部實(shí)現(xiàn)一鍵關(guān)閉的示例代碼
在Vue應(yīng)用中,彈窗是一個(gè)常見的交互元素,有時(shí)我們可能希望用戶點(diǎn)擊彈窗外部時(shí),彈窗能夠自動(dòng)關(guān)閉,本文主要介紹了Vue點(diǎn)擊在彈窗外部實(shí)現(xiàn)一鍵關(guān)閉的示例代碼,感興趣的可以了解一下2024-06-06
vue實(shí)現(xiàn)在線預(yù)覽office文件的示例代碼
本文主要介紹了vue實(shí)現(xiàn)在線預(yù)覽office文件，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10