vue使用this.$set()方法监听数组或对象

• 在操作数组给数组重新赋值的某一项时候页面没有更新 可以使用this.$set()方法更新渲染
• 因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化，所以,想要正常是不能通过操作数组来渲染dom的，解决的方法是通过set方法, 在组件中用的是 实例方法
• 在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
• 根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
• 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
• 受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

<template>
   <div id="app2">
       <p v-for="item in items" :key="item.id">{{item.message}}</p>
       <button class="btn" @click="handClick()">更改数据</button>    
   </div>
</template>
vm.$set( target, key, value )
data: { 
　　　　items: [{  
　　　　　　name: 'xiao1'  
      }, {  
　　　　　　name: 'xiao2'  
　　　　}, {  
　　　　　　name: 'xiao3'  
　　　 }]  
　}, 
methods: {
     test() {
　　　　　　 vm.items.$set(2, {name: 'xiao4!'})  
        this.$set(this.items,2,{name: 'xiao4!'})//把数组的第3项改为{name: 'xiao4!'}
     }
}
更新对象
<script>
export default {
   data() {
       return {
           items: [
               { message: "one", id: "1" },
               { message: "two", id: "2" },
               { message: "three", id: "3" }
           ]
       };
   },
   mounted(){
       this.items[0]={message:"测试",id:"4"};  //此时对象的值更改了，但是视图没有更新
       this.$set(this.items,0,{message:"测试",id:"4"})； //$set可以触发更新视图
       console.log(this.items)
   },
   methods: {
       // 调用方法：Vue.set( target, key, value )

       // target：要更改的数据源(可以是对象或者数组)

       // key：要更改的具体数据

       // value ：重新赋的值
       handClick() {
           //Vue methods中的this 指向的是Vue的实例，这里可以直接在this中找到items
           this.$set(this.items, 0, { message: "更改one的值", id: "0" });
       },
   }
};
</script>