vue2源码-- 响应式数据

Posted 2022-12-14 在厕所喝茶

目录

• 原理分析
• 源码

原理分析

• 首先是调用 observe 函数

1、如果value值不是对象，或者是一个 vnode 对象，那么就退出函数

2、如果value对象上面如果有__ob__属性，说明这个数据已经被监听过了。如果没有，则实例化Observer类，将数据变成响应式数据

3、返回Observer实例对象

• Observer 构造函数初始化

1、首先保存value值到实例上面，并且初始化一个Dep实例，用来收集依赖

2、给value数据添加一个__ob__属性，值为，当前实例。用来标识这个数据已经被转化为响应数据，避免重复操作

3、如果是一个数组数据，如果有__proto__属性，就将__proto__修改为重写数组方法的对象中。如果没有__proto__属性，就会将重写数组方法直接挂载到数组数据中。最后循环数组的数组的每一项，吧数组的每一项也变成响应式数据

4、如果是一个对象，就回通过遍历对象上面的key-val值，调用defineReactive吧数据变成响应式数据

• defineReactive 函数

1、首先初始化一个Dep实例，用来收集依赖

2、获取对象的描述符对象，判断configurable是否为 false，是就退出函数

3、然后根据第五个参数，决定是否需要递归监听数据

4、使用Object.defineProperty，添加getter函数和setter函数，getter 函数中负责收集依赖(watcher)，setter函数中负责通知更新。同时 setter 函数中，新设置的值也会根据第五个参数，决定是否需要递归监听新设置的值。

5、getter 函数收集依赖的过程。在初始化watcher实例的时候，会立刻调用watcher实例上的get函数，get 函数会把自身的实例挂载到全局唯一的位置，也就会Dep.target上，然后在根据传进来的表达式读取一次值，触发数据的getter函数，getter 函数就会把这个全局唯一的 watcher 实例收集到依赖管理器中。最后移除这个全局唯一的实例。

• arrayMethods 对象

1、通过Object.create方法创建一个原型指向数组的prototype的 arrayMethods 对象

2、重写数组的 7 个方法，分别为push，pop，shift，unshift，splice，sort，reverse，并添加到 arrayMethods 对象上

3、以 push 方法为例。首先缓存原生的 push 方法，然后再 arrayMethods 对象中添加 push 方法，方法内部首先是调用原生的 push 方法，然后获取 push 插入的数据，也转化为响应式数据，最后通过this.__ob__获取 observer 实例，通知更新，并返回原生 push 方法执行的结果

当数组调用 push 方法的时候，通过原型链查找，最先找到的是 arrayMethods 对象的 push 方法，对于 findIndex 等方法，不在 arrayMethods 对象上，就会通过原型链继续往上查找

源码

源码位于src/core/observer/index.js

observe 函数：

export function observe(value: any, asRootData: ?boolean): Observer | void 
  if (!isObject(value) || value instanceof VNode) 
    return;
  
  let ob: Observer | void;
  if (hasOwn(value, "__ob__") && value.__ob__ instanceof Observer) 
    ob = value.__ob__;
   else if (
    // ...
  ) 
    ob = new Observer(value);
  
  // ...
  return ob;

Observer类：

// Observer类通过递归把对象上面的所有属性都转化为响应式数据
export class Observer 
  value: any;
  dep: Dep;

  constructor(value: any) 
    this.value = value;
    this.dep = new Dep();
    // 添加一个标记，标识这个数据已经被转化为响应式数据了，避免重复操作
    def(value, "__ob__", this);
    if (Array.isArray(value)) 
      // value是数组时候的逻辑
      if (hasProto) 
        // 修改原型链的指向
        value.__proto__ = arrayMethods;
       else 
        // 对象上面不存在__proto__，就直接挂在到数组上面
        for (let i = 0, l = arrayKeys.length; i < l; i++) 
          const key = arrayKeys[i];
          def(value, key, arrayMethods[key]);
        
      
      this.observeArray(value);
     else 
      this.walk(value);
    
  

  //  把对象转化为响应式
  walk(obj: Object) 
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) 
      defineReactive(obj, keys[i]);
    
  

  //   把数组转化为响应式
  observeArray(items: Array<any>) 
    for (let i = 0, l = items.length; i < l; i++) 
      observe(items[i]);
    
  

defineReactive函数：

// 把数据转化为响应式数据
export function defineReactive(obj: Object, key: string, val: any) 
  // 实例化一个依赖管理器
  const dep = new Dep();
  // 获取描述符对象
  const property = Object.getOwnPropertyDescriptor(obj, key);
  // 不可配置的情况，数据被冻结了
  if (property && property.configurable === false) 
    return;
  
  const getter = property && property.get;
  const setter = property && property.set;
  if ((!getter || setter) && arguments.length === 2) 
    // 参数只给了obj和key的情况
    val = obj[key];
  

  let childOb = observe(val);
  Object.defineProperty(obj, key, 
    // 可遍历
    enumerable: true,
    // 可操作性
    configurable: true,
    get: function reactiveGetter() 
      const value = getter ? getter.call(obj) : val;
      // Dep.target指的是`Watcher`实例
      if (Dep.target) 
        // getter中收集依赖
        dep.depend();
        if (childOb) 
          childOb.dep.depend();
          if (Array.isArray(value)) 
            dependArray(value);
          
        
      
      return value;
    ,
    set: function reactiveSetter(newVal) 
      const value = getter ? getter.call(obj) : val;

      if (newVal === value || (newVal !== newVal && value !== value)) 
        return;
      

      if (getter && !setter) return;
      if (setter) 
        setter.call(obj, newVal);
       else 
        val = newVal;
      
      childOb = observe(newVal);
      // setter中通知更新
      dep.notify();
    ,
  );

src/core/observer/array.js

数组改写

const arrayProto = Array.prototype;

// 创建一个对象作为拦截器
export const arrayMethods = Object.create(arrayProto);

// 需要重写数组的7个方法
const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse",
];

methodsToPatch.forEach(function (method) 
  // 缓存原生方法
  const original = arrayProto[method];
  def(arrayMethods, method, function mutator(...args) 
    const result = original.apply(this, args);
    // 获取数组的__ob__，也就是observer类
    const ob = this.__ob__;
    let inserted;
    // push,unshift,splice会插入新对象
    switch (method) 
      case "push":
      case "unshift":
        inserted = args;
        break;
      case "splice":
        inserted = args.slice(2);
        break;
    
    if (inserted) ob.observeArray(inserted);
    //通知更新
    ob.dep.notify();
    return result;
  );
);