vue中data数据改变了，视图不更新详解

在vue中，data里面的数据改变了，试图却没有更新，常见的情况是

直接通过数组下标来修改数据，如:this.arr[2] =‘testStr’
当你修改数组的长度时，如 this.arr.length = 0
对象的删除和添加如：源对象时obj:{aa:‘aa’} 然后直接 obj.test 或者 delete obj.aa
原因是Vue2.+ 中data数据对象是通过Object.defineProerty来进行数据的双向数据绑定，而数组则是监听数组的push和pop等操作数组的方法进行双向绑定的，因此当是通过下标来修改时便不能更新视图
异步队列更新dom导致的视图不更新，因为默认情况下，vuejs 是异步执行 dom 更新操作的。在下一个 tick 来临之前，vuejs 会收集数据变化，置于一个队列之中，下个 tick 来临之时，批量执行这些更新，并清空队列。虽然大部分情况下我们不需要关心这个更新 dom 机制，但是当下一步操作与之有关联时，我们就只能使用 nextTick 来解决了。即下一个数据的页面更新，依赖与上一个数据的页面更新完成时，才需要使用this.nextTick()来解决
此时我们该怎么办呢？有三种办法
1、 通过set()方法如：this. set()方法 如：this.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>