首先,调用 initState()
来初始化 props
、methods
、data
等属性。
当执行到 initData()
时,对 data
进行初始化。首先,会检查 data
中的属性名是否与 props
和 methods
中的名字重复,然后调用 observe()
对数据进行响应式处理。
在 observe()
中,首先检查传入的数据是否为非对象或 VNode 实例,如果是,则不做响应式处理。然后判断 data
是否有 __ob__
属性,如果有,则说明该 data
已被观察过,直接返回 __ob__
属性。
如果没有被观察过,则会创建一个 Observer
对象。首先,会为 data
创建一个 dep
对象(依赖收集器)。然后判断 data
是否为数组:
- 若是数组,则判断该数组是否有
__proto__
属性,如果有,则通过__proto__
操作数组的原型链,覆盖数组默认的七个原型方法,以实现数组的响应式; - 若不是数组,则调用
walk()
,对对象的每一个属性调用defineReactive()
(实现响应式的核心,原理是通过Object.defineProperty()
实现响应式)。如果属性的值仍然是对象,则会再次调用observe()
对其进行递归监听。