Vue 源码-数据响应式

从上一篇文章知道数据初始化的 data 的数据发生在src/core/instance/init.js 中的,通过调用initState中的initState函数初始化数据和数据响应,在 initState 中通过调用initData数据来完成响应式

src/core/instance/init.js
src/core/instance/state.js
image.png

• observe 函数介绍

  
  image.png

• 拿到数据的时候首先判断 value 数据是不是响应数据,如果是响应数据的化,得到 ob实例,如果value 不是响应数据,那么调用 Observer 类初始化这个数据.

  
  image.png
• 初始化Observer 的时候,首先给value 值定义一个ob属性,用来表示该对象是一个响应数据.每个对象拥有一个 ob 实例..判断 value 是不是一个数据,数组需要单独处理.数组最后在总结的时候单独讲解.当 value是一个对象的时候,把对象中的属性通过 defineReactive 函数设置为响应式数据.
  image.png
  image.png
  image.png
• defineReactive 函数介绍
  每个对象拥有一个独立 dep 对象,对象中的每个 key 拥有一个 dep 对象,下面的例子拥有 4 的 dep对象.data 对象一个 dep 对象,a对象有一个 dep 对象,b属性有一个 dep 对象,a 作为一个属性也拥有一个 dep 对象.
• 注意: 对象拥有的 dep 对象主要用于对象的delete

data:{
  a:{
      b:"1"
  }
}

defineReactive 函数中同时也需要设置 dep 和 watcher 的相互依赖.

src/core/observer/index.js
src/core/observer/dep.js
src/core/observer/watcher.js

通过 1 标注来判断是否存在当前 dep,如果不存在则加入 dep,watcher 加入 dep时候,dep同时也需要加入 watcher,如标注 3 所示

src/core/observer/dep.js
在设置完成的使用,会调用 dep 的 notify 函数进行组件的更新,如下图所示
image.png

数组的数据响应

src/core/observer/index.js

当数据是一个数组的时候,需要判断数据浏览器是否有圆形,如果有的化,直接把数组的原型克隆一个副本给当前数据当做原型
把数组设置为响应数据的时候,需要把重写数组的 7 个方法(push,pop,shift,unshift,splice,sort,reverse).在这 7 个方法中需要特别注意的是 push unshift,splice方式,因为这三个方法可能会为数组带来新的对象,带入新的对象也需要设置数据响应式

src/core/observer/array.js

• 注意:这里的 ob.dep 是对象的 dep 方法,通过 dep 的 notify 方法来更新组件的