vue 2.0 数据绑定原理

vue2.0 中数据响应式原理:
 1： 对象类型: 通过Object.defineProperty() 对对属性的读取, 修改进行拦截(vue2.0 中数据响应式原理就是进行数据拦截)
 2: 数组类型: 通过重写更新数组的一系列方法来实现拦截, 对数组的变更进行包装。
    Object.defineProperty(data, 'count', {
       get() {

       },
       set() {

       }  // 两个方法
    })
  vue2.0 中存在问题: 
   1: 新增属性, 删除属性, 界面不会更新。
   2: 直接通过下标修改数组, 界面不会自动更新。

   对象类型: 做到数据响应化, 解决方法: 
   import vue form 'vue';
   export default({
     data() {
       return {
          persons：{
            name： "李明",
            age: 20
          }
       }
     },
     methods: {
       addSex() {
         this.$set(this.person, 'sex', '女');   // 第一种方法
         Vue.set(this.person, 'sex', '女');     // 第二种写法
       },
       // 删除对象身上某个属性
       deleteName() {      // 具有响应式删除
          this.$delete(this.person, 'name', '女');
          // 第二种方法
          vue.delete(this.person, 'name', '女');   // 在对象中删除某个属性(并且具有响应式的)
       },

       // 修改数组的数据具有响应式变化:
       updateHobby() {
         更新数组中的数据并且具有响应式:
         this.$set(this.person.hobby, 0, '逛街');
         vue.set(this.person.hobby, 0, '逛街');
         另外还可以调用数组身上的splice() 方法
         this.person.splice(0, 1. '逛街');
       }
     }
   })