vue中data數據改變了，視圖不更新詳解

在vue中，data裏面的數據改變了，試圖卻沒有更新，常見的情況是

1. 直接通過數組下標來修改數據，如:this.arr[2] =‘testStr’
2. 當你修改數組的長度時，如 this.arr.length = 0
3. 對象的刪除和添加如：源對象時obj:{aa:‘aa’} 然後直接 obj.test 或者 delete obj.aa
   原因是Vue2.+ 中data數據對象是通過Object.defineProerty來進行數據的雙向數據綁定，而數組則是監聽數組的push和pop等操作數組的方法進行雙向綁定的，因此當是通過下標來修改時便不能更新視圖
4. 異步隊列更新dom導致的視圖不更新，因爲默認情況下，vuejs 是異步執行 dom 更新操作的。在下一個 tick 來臨之前，vuejs 會收集數據變化，置於一個隊列之中，下個 tick 來臨之時，批量執行這些更新，並清空隊列。雖然大部分情況下我們不需要關心這個更新 dom 機制，但是當下一步操作與之有關聯時，我們就只能使用 nextTick 來解決了。即下一個數據的頁面更新，依賴與上一個數據的頁面更新完成時，才需要使用this.nextTick()來解決

此時我們該怎麼辦呢？有三種辦法
1、 通過$set()方法 如：this.$set(this.arr,‘2’,’‘testStr’’) 即this.$set(obj,key,val)

2、通過forceUpdate 如：在修改完數據後，直接 this.$forceUpdate()

3、修改另一個data裏面的值主動更新觸發渲染

代碼例子

<template>
  <div class="demo" ref="refDemo">
  	方法一:{{arr[2]}}
	
	<button @click="Add">+</button>
		方法二：obj：{{obj.test[0].testStr}}
		方法三:
		<div  >{{test}}</div>
		<div v-if="test"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
	  return{
		  arr:[1,2,3,4,5,6],
		  obj:{
			  test:[{testStr:3}]
		  },
		  test:false
	  }
  },
  mounted() {
  	 
	
  },
  methods:{
	  Add(){
		  // 第一種方法  this.$forceUpdate()
		 
		  // this.arr[2]+=this.arr[2]
	 
		  // console.log('this.arr[2]:'+this.arr[2])
		  // this.$forceUpdate()
		   //=============================================
		  //第二種方法 $set()
		  
		  // this.$set(this.obj.test[0],'testStr',this.obj.test[0].testStr+3)
		  
		   //=============================================
		    // 方法三修改另一個data裏面的值主動更新觸發渲染
		  
		  //this.arr[2]+=this.arr[2]
		  // this.test =!this.test
		   //=============================================
		  //方法三優化版
		  this.arr[2]+=this.arr[2]
		  this.test=true
		  
		 this.$nextTick(() => {
		   this.test = false
		 })
		  
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

如有不解，請加羣897149839