模拟 vue 监测数据,简单记录

只模拟一层数据。当数据发生改变时,vue 是怎样监测变化,然后使页面数据发生变化的,部分逻辑代码。

# Vue 监视数据的原理
  1. vue 会监视 data 中所有层次的数据

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

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

    • 对象中后追加的属性,Vue 默认不做响应式处理

    • 如需给后添加的属性做响应式,可以使用如下 API

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

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

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

    通过包裹数组更新元素的方法实现,本质做了两件事:

    • 调用原生对应的方法对数组进行更新
    • 重新解析模板,进而更新页面。
  4. 在 Vue 修改数组中的某个元素要用如下方法

    • push(),pop(),shift(),unshift(),splice(),sort(),reverse(),
    • Vue.set () 或 vm.$set ()

注意

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

比如 this.$set (this,'leader',' 校长 ')