Vue监视数据的原理

Vue监视数据的原理：

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

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

                通过 setter 实现数据监视，且要在 new Vue时就传入要监测的数据。

              （1）对象中后追加的属性，Vue默认不做响应式处理

              （2）如需给后添加的属性做响应式，请使用如下API：

                        Vue.set(target, propertyName/index, value) 或

                        vm.$set(target, propertyName/index, value) 

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

                通过包裹数组更新元素的方法实现，本质就是做了两件事：

              （1）调用原生对应的方法对数组进行更新

              （2）重新解析模板，进而更新页面。

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

              （1）push(), pop(), shift(), unshift(), splice(), sort(), reverse()

              （2）Vue.set() 或 vm.$set()

        注：Vue.set() 和 vm.$set() 不能给 vm 或 vm的根数据对象添加属性

<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
      el:'#root',
      data:{
        student:{
          name: 'hh',
          age: 30,
          hobby:['唱歌','跳舞','旅游'],
          friends:[
            {name:'xyz', age:29},
            {name:'jerry', age:32}
          ]
        }
      },
      methods: {
        addSex(){ //给 student 添加性别属性
          // Vue.set(this.student,'sex','男');
          this.$set(this.student,'sex','男');
        },
        addHobby(){ //添加一个爱好
          this.student.hobby.push('学习');
        },
        modifyFirstHobby(){  //修改第一个爱好
          // this.student.hobby.splice(0,1,'打太极');
          // Vue.set(this.student.hobby,0,'打太极');
          this.$set(this.student.hobby,0,'打太极');
        },
        addFriend(){ //添加一个朋友
          this.student.friends.push({name:'tom',age: 20});
        },
        modifyFirstFriendName(){ //修改第一个朋友的名字
          this.student.friends[0].name = 'MM';
        }
      },
    })
  </script>