快捷導(dǎo)航

Vue數(shù)據(jù)更新頁面卻沒有更新的幾種情況以及解決方法

更新時(shí)間：2023年06月01日 15:02:51 作者：前端Good

我們?cè)陂_發(fā)過程中會(huì)碰到數(shù)據(jù)更新,但是頁面卻沒有更新的情況,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)更新頁面卻沒有更新的幾種情況以及解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

情況一：Vue無法檢測(cè)實(shí)例被創(chuàng)建時(shí)不存在于data中的變量
情況二：vue也不能檢測(cè)到data中對(duì)象的動(dòng)態(tài)添加和刪除
情況三：變量為數(shù)組時(shí)
情況四：異步獲取接口數(shù)據(jù)，DOM數(shù)據(jù)不發(fā)現(xiàn)變化
情況五：循環(huán)嵌套層級(jí)太深，視圖不更新
情況六：路由參數(shù)變化時(shí)，頁面不更新(數(shù)據(jù)不更新)
情況七：變量通過賦值來定義的
總結(jié)

官方：如果，你發(fā)現(xiàn)自己需要在vue中做一次強(qiáng)制更新，99.9%的情況，是你在某個(gè)地方做錯(cuò)了事。

情況一：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)添加和刪除

例如：

 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')

情況三：變量為數(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)

情況四：異步獲取接口數(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(funcation, 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' // 文字顏色變成紅色
})

情況五：循環(huán)嵌套層級(jí)太深，視圖不更新

當(dāng)嵌套太深時(shí)，頁面也可能不更新，此時(shí)可以讓頁面強(qiáng)制刷新

this.$forceUpdate()迫使vue實(shí)例重新（rander）渲染虛擬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 是沒有變化的。

解決方法：

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>

情況七：變量通過賦值來定義的

在 Vue 中有兩種類型的變量：響應(yīng)式變量和非響應(yīng)式變量。

從后端獲取的變量通常是響應(yīng)式變量，也就是說它們會(huì)被 Vue 監(jiān)測(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ì)象,添加的key',屬性值)
//常見于: xx.vue文件中

強(qiáng)制更新數(shù)據(jù)：this.$forceUpdate();

參考文章鏈接：Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決_vue.js_腳本之家

總結(jié)

到此這篇關(guān)于Vue數(shù)據(jù)更新頁面卻沒有更新的幾種情況以及解決方法的文章就介紹到這了,更多相關(guān)Vue數(shù)據(jù)更新頁面卻沒更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: