Vue中数组和对象的监视以及响应式的实现

Vue监视数据的原理：

1.vue会监视data中所有层次的数据

2.如何检测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监视的数据
①：对象中后追加的属性，Vue默认不做响应式处理
②：如需给后添加的属性做响应式，使用：
Vue.set()

3.如何监视数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：
①：调用原生对应的方法对数组进行更新
②：重新解析模板，进而更新页面

4.在Vue修改数组中的某个元素一定要用下面这些方法：

①：push()、shift()、pop()、unshift()、splice()、sort()、reverse()
②：Vue.set()或 vm.$set()

模板代码

 <h2>爱好</h2>
    <ul>
      <li v-for="(h,index) in  school.hobby" :key="index">
        {{h}}
      </li>
    </ul>
    <h3>操作数组数据</h3>
    <button @click="addss">末尾添加一个爱好</button>
    <button @click="deletess">删除最后一个爱好</button>
    <button @click="splicess">替换第一个爱好</button>

vue实例中代码

   hobby: ['写代码', '挣钱', '学习'],

 methods: {  
          //添加一条属性
      addss() {
        this.school.hobby.push('打游戏')
      },
      //删除一条属性
      deletess() {
        this.school.hobby.pop()
      },
      //修改一条属性
      splicess() {
        // this.school.hobby.splice(0, 1, "去网吧")
        //方式二，使用Vue.set()
        Vue.set(this.school.hobby, 1, '打台球')
      }
    },

运行代码图

点击添加按钮

点击删除按钮

替换按钮

最终达到一个数组中数据修改，页面响应式改变的一个效果