谈一下你响应式数据的理解

2022/03/08 JavaScript

理解

  1. 核心点: Object.defineProperty
  2. 默认 Vue 在初始化数据时,会给 data 中的属性使用 Object.defineProperty 重新定义所有属性,当页面取到对应属性时。会进行依赖收集(收集当前组件的watcher) 如果属性发生变化会通知相关依赖进行更新操作。

    过程

  3. initData: 初始化用户传入的data中的数据
  4. new Obsever:将数据进行观测
  5. this.walk(value):进行对象的处理
  6. defineReactive:循环对象属性定义响应式变化
  7. Object.defineProperty:重新定义数据

如何检测数组的变化

  • 使用函数劫持的方式,重写了数组的方法
  • Vue 将 data 中的数组,进行了原型链重写。指向了自己定义的数组原型方法,这样当调用数组api 时,可以通知依赖更新.如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。

    过程

    1. initData: 初始化用户传入的data中的数据
    2. new Obsever:将数据进行观测
    3. protoAugment(value,arrayMethods): 将数组的原型方法指向重写的数据原型(push、unshit、pop等6种)
    4. observeArray:深度观测数据中的每一项(对象类型),非对象不观测

Search

    逃离地球的Sandy

    logo of sandy

    Table of Contents