背景

在vue項(xiàng)目中，有些我們會(huì)遇到修改完數(shù)據(jù)，但是視圖卻沒(méi)有更新的情況。具體的場(chǎng)景不一樣，解決問(wèn)題的方法也不一樣。在網(wǎng)上看了很多文章，在此總結(jié)匯總一下。針對(duì)，數(shù)據(jù)更新視圖沒(méi)有更新的情況，建議深入了解一下，vue的響應(yīng)式原理。

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

一、vue數(shù)據(jù)更新但頁(yè)面沒(méi)有更新的7種情況匯總

1.vue無(wú)法檢測(cè)實(shí)例被創(chuàng)建時(shí)，不存在于data中的property

原因：由于vue會(huì)在初始化實(shí)例時(shí)，對(duì)property執(zhí)行g(shù)etter/setter轉(zhuǎn)化，所以，property必須在data對(duì)象上存在才能讓vue將它轉(zhuǎn)化為響應(yīng)式的。

①場(chǎng)景：

var vm = new Vue({
  data:{},
  // 頁(yè)面不會(huì)變化
  template: '<div>{{message}}</div>'
})
vm.message = 'Hello!' // `vm.message` 不是響應(yīng)式的

②解決辦法：

var vm = new Vue({
  data: {
    // 聲明 a、b 為一個(gè)空值字符串
    message: '',
  },
  template: '<div>{{ message }}</div>'
})
vm.message = 'Hello!'

2.vue無(wú)法檢測(cè)對(duì)象property的添加或移除

原因：官方–由于JavaScript(ES5)的限制，Vue.js不能檢測(cè)到對(duì)象屬性的添加或刪除。因?yàn)関ue.js在初始化實(shí)例時(shí)將屬性轉(zhuǎn)為getter/setter，所以屬性必須在data對(duì)象上才能讓vue.js轉(zhuǎn)換它，才能讓它使響應(yīng)的。

①場(chǎng)景：

var vm = new Vue({
  data:{
    obj: {
      id: 001
    }
  },
  // 頁(yè)面不會(huì)變化
  template: '<div>{{ obj.message }}</div>'
})
vm.obj.message = 'hello' // 不是響應(yīng)式的
delete vm.obj.id       // 不是響應(yīng)式的

②解決辦法：

//動(dòng)態(tài)添加 -- vue.set
Vue.set(vm.obj,propertyName,newValue);
//動(dòng)態(tài)添加 -- vm.$set
vm.$set(vm.obj,propertyName,newValue);
//動(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)移除--vm.$delect
Vue.delete(vm.obj,propertyName);
//動(dòng)態(tài)移除 --vm.$delete
vm.$delete(vm.obj,propertyName);

3.vue不能檢測(cè)通過(guò)數(shù)組索引值，直接修改一個(gè)數(shù)組項(xiàng)

原因：官方–由于JavaScript的限制，Vue不能檢測(cè)數(shù)組和對(duì)象的變化；性能代價(jià)和獲得用戶體驗(yàn)不成正比。

①場(chǎng)景：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是響應(yīng)性的

②解決辦法：

//Vue.set
Vue.set(vm.items,indexOfItem,newValue);
//vm.$set
vm.$set(vm.items,indexOfItem,newValue);
//Array.prototype.splice
vm.items.splice(indexOfItem,1,newValue);

擴(kuò)展：Object.defineProperty()可以監(jiān)測(cè)數(shù)組的變化

Object.defineProperty()可以監(jiān)測(cè)到數(shù)組的變化。但對(duì)數(shù)組新增一個(gè)屬性(index)不會(huì)監(jiān)測(cè)到數(shù)據(jù)變化，因?yàn)闊o(wú)法監(jiān)測(cè)到新增數(shù)組的小標(biāo)(index)，刪除一個(gè)屬性(index)也是。

①場(chǎng)景：

var arr = [1, 2, 3, 4]
arr.forEach(function(item, index) {
    Object.defineProperty(arr, index, {
    set: function(value) {
      console.log('觸發(fā) setter')
      item = value
    },
    get: function() {
      console.log('觸發(fā) getter')
      return item
    }
  })
})
arr[1] = '123'  // 觸發(fā) setter
arr[1]          // 觸發(fā) getter 返回值為 "123"
arr[5] = 5      // 不會(huì)觸發(fā) setter 和 getter

4.vue不能監(jiān)測(cè)直接修改數(shù)組長(zhǎng)度的變化

原因：官方–由于JavaScript的限制，vue不能檢測(cè)數(shù)組和對(duì)象的變化；（性能代價(jià)和獲得用戶體驗(yàn)不成正比）。

①場(chǎng)景：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items.length = 2 // 不是響應(yīng)性的

②解決辦法：

vm.items.splice(newLength)

5.在異步更新執(zhí)行之前操作DOM數(shù)據(jù)不會(huì)變化

原因：Vue在更新DOM時(shí)是異步執(zhí)行的。只要偵聽(tīng)到數(shù)據(jù)變化，vue將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一個(gè)事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個(gè)watcher被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)，去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和DOM操作是非常重要的。然后，在下一個(gè)的時(shí)間循環(huán)"tick"中，vue刷新隊(duì)列并執(zhí)行實(shí)際（已去重的）工作。vue在內(nèi)部對(duì)異步隊(duì)列嘗試使用原生的Promise.then、MutationObserver和setImmediate，如果執(zhí)行環(huán)境不支持，則會(huì)采用setTimeout(fn,0)代替。

①場(chǎng)景：

<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)有變化

②解決辦法：

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' //文字顏色變成紅色
})

擴(kuò)展：異步更新帶來(lái)的數(shù)據(jù)響應(yīng)的誤解

<!-- 頁(yè)面顯示：我更新啦！ -->
<div id="example">{{message.text}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: {},
  }
})
vm.$nextTick(function () {
  this.message = {}
  this.message.text = '我更新啦！'
})

上段代碼中，我們?cè)赿ata對(duì)象中聲明了一個(gè)message空對(duì)象，然后，在下次DOM更新循環(huán)結(jié)束之后，觸發(fā)的異步回調(diào)中，執(zhí)行了如下兩段代碼：

this.message = {};
this.message.text = '我更新啦！'

到這里，模板更新了，頁(yè)面最后會(huì)顯示我更新啦！。

模板更新了，應(yīng)該具有響應(yīng)式特性，如果這么想那么你就已經(jīng)走入誤區(qū)。

一開(kāi)始，我們?cè)赿ata對(duì)象中，只是聲明了一個(gè)message空對(duì)象，并不具有text屬性，所以該text屬性是不具有響應(yīng)式特性的。

但模板切切實(shí)實(shí)已經(jīng)更新了，這又是怎么回事呢？

那是因?yàn)閂ue.js的DOM更新是異步的，即當(dāng)setter操作發(fā)生后，指令并不會(huì)立馬更新，指令的更新操作會(huì)有一個(gè)延遲，當(dāng)指令更新執(zhí)行的時(shí)候，此時(shí)text屬性已經(jīng)賦值，所以指令更新模板時(shí)，得到的是新值。

模板中每一個(gè)指令/數(shù)據(jù)綁定都有一個(gè)對(duì)應(yīng)的watcher對(duì)象，在計(jì)算過(guò)程中，它把屬性記錄為依賴。之后當(dāng)依賴的setter被調(diào)用時(shí)，會(huì)觸發(fā)watcher重新計(jì)算，也就會(huì)導(dǎo)致它的關(guān)聯(lián)指令更新DOM。

具體流程如下所示：

• 執(zhí)行this.message = { };時(shí)，setter被調(diào)用；
• Vue.js追蹤到message依賴的setter被調(diào)用后，會(huì)觸發(fā)watcher重新計(jì)算；
• this.message.text = ‘我更新啦！’；對(duì)text屬性進(jìn)行賦值；
• 異步回調(diào)邏輯執(zhí)行結(jié)束之后，就會(huì)導(dǎo)致它的關(guān)聯(lián)指令更新DOM，指令更新開(kāi)始執(zhí)行。
• 所以，真正的觸發(fā)模板更新的操作是this.message = { };這一句引起的，因?yàn)橛|發(fā)了setter，所以單看上述例子，具有響應(yīng)式特性的數(shù)據(jù)只有message這一層，它的動(dòng)態(tài)添加的屬性是不具備的。 

對(duì)應(yīng)上述第二點(diǎn)–vue無(wú)法檢測(cè)對(duì)象property的添加或移除

6.循環(huán)嵌套層級(jí)太深，視圖不更新？

看到網(wǎng)上有些人說(shuō)，數(shù)據(jù)更新的層級(jí)太深，導(dǎo)致數(shù)據(jù)不更新或者更新緩慢從而導(dǎo)致視圖不更新？PS:我遇到的就是這種情況，暫時(shí)也沒(méi)發(fā)現(xiàn)哪里有問(wèn)題（尷尬.jpg），就使用了強(qiáng)制更新的方法。針對(duì)上述情況，有人給出解決方法是使用強(qiáng)制更新：

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

vm.$forceUpdate()

7.擴(kuò)展：路由參數(shù)變化時(shí)，頁(yè)面不更新（數(shù)據(jù)不更新）

擴(kuò)展一個(gè)因?yàn)槁酚蓞?shù)變化，而導(dǎo)致頁(yè)面不更新的問(wèn)題，頁(yè)面不更新本質(zhì)上就是數(shù)據(jù)沒(méi)有更新。

原因：路由視圖組件引用了相同組件時(shí)，當(dāng)路由參數(shù)變化時(shí)，會(huì)導(dǎo)致該組件無(wú)法更新，也就是我們常說(shuō)的頁(yè)面無(wú)法更新的問(wèn)題。

①場(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í)，頁(yè)面只會(huì)渲染第一次路由匹配到的參數(shù)，之后再進(jìn)行路由切換時(shí)，message是沒(méi)有變化的。

②場(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í)，頁(yè)面只會(huì)渲染第一次路由匹配到的參數(shù)，之后再進(jìn)行路由切換時(shí)，message是沒(méi)有變化的。

③解決辦法：

解決辦法有很多種，這里只列舉我常用到的幾種方法。

1.通過(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
	 }
  }
}
...
new Vue({
  el: '#app',
  router
})

2.給綁定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>

二、本人常用的方法：

給dom綁定key值，然后數(shù)據(jù)更新，再更改key值，這樣可以解決強(qiáng)制刷新set，delete，Object.assign()等方法

this.$nextTick(() => {  })

this.$forceUpdate()

以上就是解決Vue數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的問(wèn)題的詳細(xì)內(nèi)容，更多關(guān)于Vue數(shù)據(jù)更新但頁(yè)面沒(méi)更新的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論