vue响应式对象和数组

当你设置一个响应式数据 vue 或调用object.defineProperty 把数据的property 转化为 setter 和getter方法 当用户修改或者改变数据操作的方法时 在getter 和setter方法里 调用watcher通知dom渲染 由于javascript的局限性（这地我也不懂大神给出理解） 就导致了 当是对象和数组时 无法检测变化 原因 查资料个人理解是 对象在未提前在data里声明的情况下是无法加入setter和getter方法的 至于数组不懂
但vue给出数组修改某个index的方法

<template>
  <div >
    <button @click="func1">测试1</button>
    <button @click="func2">测试2</button>
    <div v-if="arr">
      <p v-for = "item in arr" :key ="item">{{item}}</p>
    </div>
    <div>
      <span>name:{{OBJ.name}}</span> <br/>
      <span v-if="OBJ.age">age:{{OBJ.age}}</span><br/>
      <span v-if="OBJ.height">height:{{OBJ.height}}</span><br/>
    </div>
  </div>
</template>

data:(){
return (){
	arr=[];
	obj = {
	//  我们再对象中定义了一个a 这个a是响应的
		name = '法外狂徒';	
		}
	}
}
// 数组
func1(){

// this.arr[0] = 1; 是不会被dom立即响应的
//方法 数组修改某个值
	this.$set('此处为数组' , '此处为数组下标' , '此处为值');

},
// 对象 没对象？ 怎么找（添加） 响应式对象
 func2(){
 
      //下面 this.OBJ.age = '18' 不会被立即渲染
      // this.OBJ.age = '18'

      // 如果下面其他的响应式数据改变 也就是说其它dom改变了 上面的数据才会显示 没有实际意义
      // setTimeout(()=>{
      //   this.$set(this.arr,2,7);
      // },3000)


      // 下面是官方给出单个OBJ 响应式属性添加
      // this.$set(this.OBJ,'age',18);

      // 下面是官方给出多个个OBJ 响应式属性添加      
      // this.OBJ = Object.assign({},this.OBJ,{age:18});


     //  实际测试ES6的解构赋值也会是响应式数据添加
      this.OBJ = {...{age:'18',height:180},...this.OBJ};
    }

补充
watch 观察也不会观察对象属性的变化 VUE提供了deep用来观察某个对象属性值变化

wacth:{
	‘此处填写要观察的对象’:{
		handler: function(){
			// 要执行的代码片段
		}
		deep:true;
	}
}