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