关于前端:vue响应式原理底层超详细的解读手写响应式原理

vue响应式原理

对于vue响应式原理（底层）原理，明天和大家一起探讨钻研，结尾附上手敲代码以及git下载地址，如有有余或不精确请及时留言斧正，期待共同进步～

本文将采纳webpack环境进行编写,我的项目目录如下。
index.js: 入口文件
arrar.js: 数组文件
def.js: 定义一个对象属性
defineReactive.js: 给对象data的属性key定义监听。
Dep.js: Dep类专门帮忙咱们治理依赖，能够收集依赖，删除依赖，向依赖发送告诉等。
Observe.js: 监听 value，试图创立bserver实例，如果value曾经是响应式数据（依据是否具备__ob__属性判断），就不须要再创立Observer实例，间接返回曾经创立的Observer实例即可。
Observer.js: 将一个失常的object转换为每个层级的属性都是响应式（能够被侦测）的object。
Wather.js: Watcher是一个中介的角色，数据发生变化时告诉它，而后它再告诉其余中央.

先从index.js代码编写，环境搭建完后咱们编写代码，输入就会在控制台展现，定义obj,Object.defineProperty进行数据劫持。

// index.js 入口文件

let obj = {
  a: 1,
  b: {
    c: {
      d: 4,
    },
  },
  e: [22, 33, 44, 55],
};
//定义一个函数 defineReactive 
let val;
function defineReactive(data, key, value) {
  Object.defineProperty(obj, key, {
    // 收集依赖 getter
    get() {
      console.log('您试图拜访' + key  + '属性');
      return val
    },
    // 触发依赖 setter
    set (newVal) {
      console.log('你试图拜访 ' + key + '属性', newVal);
      if (val === newVal) {
        return 
      }
      val = newVal
      
    }
  })
}


defineReactive(obj, 'a', 10)
console.log('obj.a', obj.a); // 1
obj.a = 8
console.log('obj.a扭转后', obj.a); // 8

在Vue2.X 响应式中应用到了 Object.defineProperty 进行数据劫持，所以咱们对它必须有肯定的理解,Object.defineProperty中有两个十分重要的函数，getter和setter，getter负责收集依赖，简略来说，getter就是收集以后的obj对象的依赖，setter函数则是当你的数据扭转时进行触发的函数。

接下来咱们思考obj.a是一个简略简略的数据类型，那如果我想要简单的对象obj.b.c.d 的数值呢，打印一下控制台发现尽管Object.defineProperty拜访了getter,然而并未监测到obj.b.c.d,只是说监测到b属性。如图2

那咱们该怎么做能力实现对深层次的对象进行监听呢? 咱们是否能够讲每一层对象都循环调用，增加监听，这时是不是听到循环调用就想到了递归，没错咱们能够应用—递归侦听。

为了代码参差，首先咱们将defineReactive函数提出来，造成一个独立文件，代码和index.js拆散。

// defineReactive.js
/**
 * 给对象data的属性key定义监听
 * @param {*} data 传入的数据
 * @param {*} key 监听的属性
 * @param {*} value 闭包环境提供的周转变量
 */
export default function defineReactive (data, key , val) {
  if (arguments.length === 2) {
    val = data[key]
  }
    Object.defineProperty(data, key, {
      // 可枚举 能够循环
      enumerable: true,
      // 可被配置，比方能够被删除
      configurable: true,
      get() {
        console.log('您试图拜访' + key  + '属性');
        return val
      },
      set (newVal) {
        console.log('你试图拜访 ' + key + '属性', newVal);
        if (val === newVal) {
          return 
        }
        val = newVal
      }
    })
}

在index.js中引入该文件，代码如下

// index.js
import defineReactive from "./defineReactive";
let obj = {
  a: 1,
  b: {
    c: {
      d: 4,
    },
  },
  e: [22, 33, 44, 55],
};
defineReactive(obj, 'a')
defineReactive(obj, 'b')

console.log(obj.b.c.d);

接下来开始写递归侦听，新建一个observe类，这个类的作用就是判断是否须要试创立新的Observer类，检测value身上是否有__ob__属性，如果有能够了解为value为响应式，响应式数据，就不须要再创立Observer实例，间接返回曾经创立的Observer实例即可，防止反复侦测value变动的问题，否则，创立Observer实例。

// observe.js
import Observer from "./Observer";

/**
 * 监听 value
 * 尝试创立Observer实例，如果value曾经是响应式数据，就不须要再创立Observer实例，间接返回曾经创立的Observer实例即可，防止反复侦测value变动的问题
 * @param {*} value 
 * @returns 
 */
export default function observe(value) {
  // 如果value不是对象，就什么都不做
  if (typeof value != "object") return;

  let ob; // Observer的实例
  if (typeof value.__ob__ !== "undefined") {
    ob = value.__ob__;
  } else {
    ob = new Observer(value);
  }
  
  return ob;
}

接下来写observer类。

// observer.js

import observe from "./observe";
export default class Observer {
  constructor (value) {
    console.log('我是observer结构器', value);
    // 给实例增加__ob__属性，值是以后Observer的实例，不可枚举 
    // def被独自拎进去了 次要作用就是为了增加__ob__属性带哦
    // this是以后new的实例
    def(value, "__ob__", this, false);
    this.walk(value);
  }
  // 遍历
  walk(value) {
    for (let k in value) {
      defineReactive(value, k)
    }
  } 
}

// def.js
/**
 * 定义一个对象属性
 * @param {*} obj 
 * @param {*} key 
 * @param {*} value 
 * @param {*} enumerable 
 */
export default function def(obj, key, value, enumerable) {
  Object.defineProperty(obj, key, {
    value,
    enumerable,
    writable: true,
    configurable: true,
  });
}

在observer类中，咱们在结构器内执行def函数，def函数次要作用是为以后实例（obj）增加__ob__属性，后面说过了这个属性是代表实例是否是响应式的标记。而后调用walk办法循环实例，在循环里调用defineReactive函数。至此，外层的属性（obj.a）曾经成为响应式了
在index.js中创立observe 函数 observe(obj)，能够看见控制台打印如下，并发现__ob__属性已存在。

然而咱们会发现在obj.b obj.c的身上没有__ob__属性。

咱们写Observer的目标是为了递归侦听，当初咱们对外层的元素曾经实现了监测，思考下咱们当初只剩下对外部的属性进行侦听了，那么该怎么做呢？

拆解一下，首先要监测外部元素，少不了循环，那如果在循环中对每一层进行监测不就ok了吗？循环咱们写过了，剩下的就是须要在efineReactive函数外部调用observe类，observe子元素，而observe中又会调用observer类，而后循环，最初在setter中监测新的子元素的值即可。看下整体代码。

// index.js
import observe from "./observe";
import defineReactive from "./defineReactive";
let obj = {
  a: 1,
  b: {
    c: {
      d: 4,
    },
  },
  e: [22, 33, 44, 55],
};
// 创立observe 函数 
observe(obj)



// observe.js
import Observer from "./Observer";
/**
 * 监听 value
 * 尝试创立Observer实例，如果value曾经是响应式数据，就不须要再创立Observer实例，间接返回曾经创立的Observer实例即可，防止反复侦测value变动的问题
 * @param {*} value 
 * @returns 
 */
export default function observe(value) {
  // 如果value不是对象，就什么都不做
  if (typeof value != "object") return;

  let ob; // Observer的实例
  if (typeof value.__ob__ !== "undefined") {
    ob = value.__ob__;
  } else {
    ob = new Observer(value);
  }
  
  return ob;
}


// observer.js

def from "./def";
import defineReactive from "./defineReactive";
export default class Observer {
  constructor (value) {
    console.log('我是observer结构器', value);
    // 给实例增加__ob__属性，值是以后Observer的实例，不可枚举 
    def(value, "__ob__", this, false);
    this.walk(value)
  }
  // 遍历
  walk(value) {
    for (let k in value) {
      defineReactive(value, k)
    }
  }
  
}


// def.js
/**
 * 定义一个对象属性
 * @param {*} obj 
 * @param {*} key 
 * @param {*} value 
 * @param {*} enumerable 
 */
export default function def(obj, key, value, enumerable) {
  Object.defineProperty(obj, key, {
    value,
    enumerable,
    writable: true,
    configurable: true,
  });
}


// defineReactive.js
import observe from "./observe";

/**
 * 给对象data的属性key定义监听
 * @param {*} data 传入的数据
 * @param {*} key 监听的属性
 * @param {*} value 闭包环境提供的周转变量
 */
export default function defineReactive (data, key , val) {
  console.log('递归侦听属性',key);
  if (arguments.length === 2) {
    val = data[key]
  }
  // 子元素要进行observe，造成递归
  let childOb = observe(val);
    Object.defineProperty(data, key, {
      // 可枚举 能够循环
      enumerable: true,
      // 可被配置，比方能够被删除
      configurable: true,
      get() {
        console.log('您试图拜访' + key  + '属性');
        return val
      },
      set (newVal) {
        console.log('你试图拜访 ' + key + '属性', newVal);
        if (val === newVal) {
          return 
        }
        // 当设置了新值，新值也要被observe
        childOb = observe(newVal);
        val = newVal
      }
    })
}

在具体解说一下下面这写代码逻辑，将代码串联一下。
首先，在index.js中let一个对象obj,调用obeserve函数（留神不是observer）在observe函数外部，首先查看是否为响应式，如果是，则不须要创立observer实例，防止反复监听，节约资源。显然以后的obj是非响应式的，那么就须要创立一个observer实例,进入observer.js文件，进入observer外部执行defineReactive办法，进defineReactive文件，最要害一步，子元素要进行observe，造成递归（这个递归不是本人调用本人，而是多个函数嵌套调用）—〉这行代码 let childOb = observe(val);实现了递归的重要一步，接下来要在setter函数中，更新值，childOb = observe(newVal);能够看见控制台会输出obj的每个属性，b、c、d

咱们设置obj.b.c.d = 110, 打印控制台看下是否会失效。

以上递归侦听能够演绎为下图

上面，咱们在已有函数的根底上将数组的响应式原理补上去。数组的响应式原理。尤雨溪老师讲数组的七个办法进行了改写(“push”, “pop”, “shift”, “unshift”, “splice”,
“sort”, “reverse”,)，数组的侦听能够简略的了解为如下原理

咱们将数组的隐式原型链__proto__指向arrayMethods，而arrayMethods是以Array.prototype为原型创立的，咱们在arrayMethods上改写办法即可，新建array.js

首先备份一份，而后调用def.js, 增加属性__ob__。小伙伴们是否记得咱们在observer外部应用walk办法循环了实例，而后调用defineReactive办法，就是这里咱们须要补充一下数组的办法，减少代码如下，判断实例是对象还是数组，数组的话，就将这个数组的原型指向arrayMethods，去改写数组办法，而后执行observeArray（数组的遍历办法），简略来说就是去侦测数组中的每一项，一一进行observe。

// arrar.js

import def from "./def";

const arrayPrototype = Array.prototype;

// 以Array.prototype为原型创立arrayMethod
export const arrayMethods = Object.create(arrayPrototype);

// 要被改写的7个数组办法
const methodsNeedChange = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse",
];

// 批量操作这些办法
methodsNeedChange.forEach((methodName) => {
  // 备份原来的办法
  const original = arrayPrototype[methodName];

  // 定义新的办法
  def(
    arrayMethods,
    methodName,
    function () {
      console.log("array数据曾经被劫持");

      // 复原原来的性能(数组办法)
      const result = original.apply(this, arguments);
      // 把类数组对象变成数组
      const args = [...arguments];

      // 把这个数组身上的__ob__取出来
      // 在拦截器中获取Observer的实例
      const ob = this.__ob__;

      // 有三种办法 push、unshift、splice能插入新项，要劫持（侦测）这些数据（插入新项）
      let inserted = [];
      switch (methodName) {
        case "push":
        case "unshift":
          inserted = args;
          break;
        case "splice":
          inserted = args.slice(2);
          break;
      }

      // 查看有没有新插入的项inserted，有的话就劫持
      // ob.observeArray实例外部办法
      if (inserted) {
        ob.observeArray(inserted);
      }

      return result;
    },
    false
  );
});


// observer.js
// 在observer 外部判断是否为数组

import def from "./def";
import defineReactive from "./defineReactive";
import { arrayMethods } from "./array";
export default class Observer {
  constructor (value) {
    console.log('我是observer结构器', value);
    // 给实例增加__ob__属性，值是以后Observer的实例，不可枚举 
    def(value, "__ob__", this, false);
    // 判断是数组还是对象
    if (Array.isArray(value)) {
      // 是数组，就将这个数组的原型指向arrayMethods
      Object.setPrototypeOf(value, arrayMethods);
      // 晚期实现是这样
      // value.__proto__ = arrayMethods;
      
      // observe数组
      this.observeArray(value);
    } else {
      this.walk(value);
    }
  }
  // 遍历
  walk(value) {
    for (let k in value) {
      defineReactive(value, k)
    }
  }
  // 数组的遍历形式，侦测数组中的每一项
  observeArray(arr) {
    for (let i = 0, l = arr.length; i < l; i++) {
      // 逐项进行observe
      observe(arr[i]);
    }
  }
  
}

自此数组的侦测曾经实现。

上面进行收集依赖和watcher的解说。
新建一个Dep类，Dep类专门帮忙咱们治理依赖，能够收集依赖，删除依赖，向依赖发送告诉等,新建文件Dep.js，Dep类中蕴含addSub，depend，notify办法。watcher则是中转站，依赖的变动须要告诉watcher。

新建dep类

let uid = 0;
/**
 * Dep类专门帮忙咱们治理依赖，能够收集依赖，删除依赖，向依赖发送告诉等
 */
export default class Dep {
  constructor() {
    console.log("Dep结构器", this);
    this.id = uid++;
    // 用数组存储本人的订阅者，放的是Watcher的实例
    this.subs = [];
  }

  // 增加订阅
  addSub(sub) {
    this.subs.push(sub);
  }

  // 删除订阅
  removeSub(sub) {
    remove(this.subs, sub);
  }

  // 增加依赖
  depend() {
    // Dep.target 是一个咱们指定的全局的地位，用window.target也行，只有是全局惟一，没有歧义就行
    if (Dep.target) {
      this.addSub(Dep.target);
    }
  }

  // 告诉更新
  notify() {
    console.log("告诉更新notify");
    // 浅拷贝一份
    const subs = this.subs.slice();
    // 遍历
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update();
    }
  }
}

/**
 * 从arr数组中删除元素item
 * @param {*} arr
 * @param {*} item
 * @returns
 */
function remove(arr, item) {
  if (arr.length) {
    const index = arr.indexOf(item);
    if (index > -1) {
      return arr.splice(index, 1);
    }
  }
}

那么收集依赖应该在哪里收集呢，答案很显然是在Object.defineProperty中，因为Object.defineProperty天生能够进行数据劫持，故咱们在Object.defineProperty中创立Dep数组。在getter中判断以后是否处于依赖收集阶段（Dep.target为true），还须要对子元素进行判断。

// defineReactive.js

// 能够了解为所有的依赖收集工作都有Dep实现，而后在告诉watcher

import Dep from "./Dep";
import observe from "./observe";

/**
 * 给对象data的属性key定义监听
 * @param {*} data 传入的数据
 * @param {*} key 监听的属性
 * @param {*} value 闭包环境提供的周转变量
 */
export default function defineReactive(data, key, value) {
  console.log('执行defineReactive()', key)
  
  // 每个数据都要保护一个属于本人的数组，用来寄存依赖本人的watcher
  const dep = new Dep();

  if (arguments.length === 2) {
    value = data[key];
  }

  // 子元素要进行observe，造成递归
  let childOb = observe(value);

  Object.defineProperty(data, key, {

    // 可枚举 能够for-in
    enumerable: true,
    // 可被配置，比方能够被delete
    configurable: true,

    // getter  收集依赖
    get() {
      console.log(`getter试图拜访${key}属性 侦测中 `);

      // 收集依赖 Dep.target就是以后的wather实例
      if (Dep.target) {
        dep.depend();

        // 判断有没有子元素
        if (childOb) {
          // 数组收集依赖
          childOb.dep.depend();
        }
      }

      return value;
    },

    // setter 触发依赖
    set(newValue) {
      console.log(`setter试图扭转${key}属性 侦测中`, newValue);

      if (value === newValue) return;
      value = newValue;

      // 当设置了新值，新值也要被observe
      childOb = observe(newValue);

      // 触发依赖
      // 公布订阅模式，告诉dep
      dep.notify();
    },
  });
}

最初咱们还差一个watcher类，用来承受dep的音讯，并更新。

// watcher.js

import Dep from "./Dep";

let uid = 0;
/**
 * Watcher是一个中介的角色，数据发生变化时告诉它，而后它再告诉其余中央
 */
export default class Watcher {
  constructor(target, expression, callback) {
    console.log("Watcher结构器");
    this.id = uid++;
    this.target = target;
    // 按点拆分  执行this.getter()就能够读取data.a.b.c的内容
    this.getter = parsePath(expression);
    this.callback = callback;
    this.value = this.get();
  }

  get() {
    // 进入依赖收集阶段。
    // 让全局的Dep.target设置为Watcher自身
    Dep.target = this;
    const obj = this.target;
    var value;
    // 只有能找就始终找
    try {
      value = this.getter(obj);
    } finally {
      Dep.target = null;
    }
    return value;
  }

  update() {
    this.run();
  } 

  run() {
    this.getAndInvoke(this.callback);
  }
  getAndInvoke(callback) {
    const value = this.get();
    if (value !== this.value || typeof value === "object") {
      const oldValue = this.value;
      this.value = value;
      callback.call(this.target, value, oldValue);
    }
  }
}

/**
 * 将str用.宰割成数组segments，而后循环数组，一层一层去读取数据，最初拿到的obj就是str中想要读的数据
 * @param {*} str
 * @returns
 */
function parsePath(str) {
  let segments = str.split(".");
  return function (obj) {
    for (let key of segments) {
      if (!obj) return;
      obj = obj[key];
    }
    return obj;
  };
}

Watcher类中须要留神的是结构器中的getter，getter接管parsePath函数的返回值，parsePath函数的次要作用是用.宰割成数组segments，而后循环数组，一层一层去读取数据，最初拿到的obj就是str中想要读的数据，对于以后例子来说就是当咱们对obj在data中定义时，内层obj.b.c.d : 4(初始值)，这里的拿到的就是obj.b.c.d的初始值4。

到此响应式原理根本实现。如图

结尾处画了一张便于了解的图。

心愿能够帮忙到大家，也心愿大家踊跃留言点赞，欢送交换，前端小白，请各位大佬多点容纳～～一起提高

关于前端:vue响应式原理底层超详细的解读手写响应式原理

vue响应式原理

参考文件：https://www.bilibili.com/vide…

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:vue响应式原理底层超详细的解读手写响应式原理

vue响应式原理

参考文件：https://www.bilibili.com/vide…

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复