vueでdataデータが変更され、ビューは詳細を更新しません

vueではdataのデータが変わりましたが、更新しようとしません.よくあるのは

は、配列の下付き文字によってデータを直接修正する.arr[2] =‘testStr’

配列の長さを変更すると、thisのようになります.arr.length = 0

オブジェクトの削除と追加は、例えば、ソースオブジェクトの場合obj:{aa:‘aa’}その後、直接obj.testまたはdelete obj.aa原因はVue 2.+中dataデータの対象はObjectである.defineProertyは、データの双方向データバインディングを行い、配列は、配列のpushやpopなどの操作配列を傍受する方法で双方向バインディングを行うため、下付きで修正するとビュー

を更新することができない.

非同期キューがdomを更新したため、デフォルトではvuejsがdom更新操作を非同期で実行しているため、ビューは更新されません.次のtickが来る前にvuejsはデータの変化を収集し、次のtickが来ると、これらの更新を一括して実行し、キューを空にします.ほとんどの場合、この更新domメカニズムに関心を持つ必要はありませんが、次の操作が関連付けられている場合はnextTickを使用して解決するしかありません.すなわち、次のデータのページ更新は、前のデータに依存するページ更新が完了した場合にのみ使用する必要がある.nextTick()は

を解決する
この時私たちはどうすればいいですか?3つの方法1があり、s e t()を通過する方法は、例えば、t h i sである.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>

理解できない場合は、グループ897149839を追加してください.