Vue中检测数据原理和Vue_set()方法

vue监测数据改变的原理

• vue监听数据的流程为：数据修改时vm.data = data.然后调用data里边的set方法。set方法重新进行DOM(页面)重新遍历。新的虚拟DOM和旧的虚拟DOM进行对比，数据才被修改。（下面写这么多，只有这句话最有用）

• 以下是模拟vue监视数据

• vue可以进行多层监视对象，生成get和set方法。

• //data的属性有多少层对象，vue就对应生成多少个set方法。用于监视数据修改。模拟案例无法实现
  let data = {
          name: '安斯卡',
          address: {
              sex: {
              phone: '123'
              }
          }
      }

Vue_set()方法

• 不可以用vm直接添加信息。

• 当data中没有定义属性age，在不动用源码的情况下。在控制台使用如下

• Vue.set(vm._data.age,'sex','男'),或者vm.$set(vm._data.age,'set','男')

• 上边的代码不够严谨，可以直接用vm访问data的属性。

• Vue.set(vm.age,'sex','男'),或者vm.$set(vm.age,'set','男')

• 设置按下按钮后才在data中的对象添加（属性值、属性名）或对象，不能直接在vm和_data添加

• 
  ​
  
  ​
  
  ​

• 在array2: ['开车', '放歌', '开香槟']中，Vue无法给索引值为0、1、2设置get和set的方法，但Vue可以给array2[0].name设置get和set的方法。

• 解决方案。如：this.$set(this.name.array2.push('拉拉'))。用下列的方法，Vue会调用数组的push,之后进行数据代理。改变DOM页面

  1、给数组最后的位置添加一个元素用，push

  2、给数组开头的位置添加一个元素用，unshift

  3、删除数组最后一个元素用，pop

  4、删除数组第一个元素用，shift

  5、替换或修改数组中的某个元素用，splice

  6、对数组从小到大排序用sort

  7、反转数组用，reverse

• 过滤数组用，filter。但filter过滤后生成新的数组不归Vue所管理，也就是Vue不会进行数据代理

• 
  ​
  
  ​
  
  ​