大家好，我是Mokou，最近始终在做 vue3 相干内容，比方源码解析和mini-vue3的开发。

回顾下前几章的内容，在前几章中次要讲述了以下内容。

  1. 新构建工具 vite 的原理和从零开始实现
  2. vue3 应用新姿态
  3. 新api：reactive 应用和源码解析
  4. 追踪收集 track 实现和源码解析
  5. 追踪触发器 trigger 实现和源码解析
  6. 响应式外围 effect 与 track、trigger 工作原理和源码解析

好的，这章的指标：从零开始实现一个 Vue3 ！

必须要晓得的前置常识 effect 与 track、trigger 工作原理，具体详情请看公众号 -> 前端进阶课，一个有温度且没有广告的前端技术公众号。

在这里还是简略解析下这3个函数的作用吧

  1. track: 收集依赖，存入 targetMap
  2. trigger：触发依赖，应用 targetMap
  3. effect：副作用解决
本章源码请看 uuz 急需 star 维持生计。

手摸手实现 Vue3

首先。咱们2个全局变量，用来寄存和定位追踪的依赖，也就是给 track 和 trigger 应用的仓库。

let targetMap = new WeakMap();let activeEffect;

所以第一个须要设计的办法就是 track，还记得该track在vue3是如何调用的吗？

track(obj, 'get', 'x');

track 会去找 obj.x 是否被追踪，如果没找到就将obj.x放入targetMap（实现追踪工作），将 obj.x 作为 map 的 key 将 activeEffect 作为 map 的 value。

抛开取值异样解决之类的，track 只做了一件事，将activeEffect塞入targetMap;

function track(target, key) {  // 首先找 obj 是否有被追踪  let depsMap = targetMap.get(target);  if (!depsMap) {    // 如果没有被追踪，那么增加一个        targetMap.set(target, (depsMap = new Map()));  }  // 而后寻找 obj.x 是否被追踪  let dep = depsMap.get(key);    if (!dep) {    // 如果没有被追踪，那么增加一个    depsMap.set(key, (dep = new Set()));  }  // 如果没有增加 activeEffect 那么增加一个  if (!dep.has(activeEffect)) {        dep.add(activeEffect);    }}

而后就是写一个 trigger，还记得trigger在vue是如何调用的吗？

trigger(obj, 'set', 'x')

trigger 只会去 targetMap 中寻找obj.x的追踪工作，如果找到了就去重，而后执行工作。

也就是说：抛开取值异样相干，trigger 也只做了一件事：从 targetMap 取值而后调用该函数值。

function trigger(target, key) {  // 寻找追踪项  const depsMap = targetMap.get(target);  // 没找到就什么都不干  if (!depsMap) return;  // 去重  const effects = new Set()  depsMap.get(key).forEach(e => effects.add(e))  // 执行  effects.forEach(e => e())}

最初就是 effect，还记得该打工仔的api在vue3中是如何调用的吗？

effect(() => {  console.log('run cb')})

effect 接管一个回调函数，而后会被送给 track。所以咱们能够这么实现 effect

  1. 定义一个外部函数 _effect，并执行。
  2. 返回一个闭包

而外部 _effect 也做了两件事

  1. 将本身赋值给 activeEffect
  2. 执行 effect 回调函数

优良的代码跃然纸上。

function effect(fn) {  // 定义一个外部 _effect   const _effect = function(...args) {    // 在执行是将本身赋值给 activeEffect    activeEffect = _effect;    // 执行回调    return fn(...args);  };  _effect();  // 返回闭包  return _effect;}

所有的前置项都实现了，当初开始实现一个 reactive，也就是对象式响应式的api。还记得vue3中如何应用 reactive 吗？

<template>  <button @click="appendName">{{author.name}}</button></template>setup() {  const author = reactive({    name: 'mokou',  })  const appendName = () => author.name += '优良';  return { author, appendName };}

通过下面的的优良代码，很轻易的实现了vue3的响应式操作。通过回顾前几章的内容，咱们晓得 reactive 是通过 Proxy 代理数据实现的。

这样咱们就能够通过 Proxy 来调用 track 和 trigger，劫持 getter 和 setter 实现响应式设计

export function reactive(target) {  // 代理数据  return new Proxy(target, {    get(target, prop) {      // 执行追踪      track(target, prop);      return Reflect.get(target, prop);    },    set(target, prop, newVal) {      Reflect.set(target, prop, newVal);      // 触发effect      trigger(target, prop);      return true;    }  })}

好了。所有就绪，那么咱们挂载下咱们的 fake vue3 吧

export function mount(instance, el) {  effect(function() {    instance.$data && update(el, instance);  })  instance.$data = instance.setup();  update(el, instance);}function update(el, instance) {  el.innerHTML = instance.render()}

用 mini-vue3 写一个 demo

测试一下。参照 vue3 的写法。定义个 setup 和 render。

const App = {  $data: null,  setup () {    let count = reactive({ num: 0 })    setInterval(() => {      count.num += 1;    }, 1000);    return {      count    };  },  render() {    return `<button>${this.$data.count.num}</button>`  }}mount(App, document.body)

执行一下，果然是优良的代码。响应式失常执行，每次 setInterval 执行后，页面都重写刷新了 count.num 的数据。

源码请看 uuz，ps：7月23日该源码曾经反对 jsx 了。

以上通过 50+行代码，轻轻松松的实现了 vue3的响应式。但这就完结了吗？

还有以下问题

  1. Proxy 肯定须要传入对象
  2. render 函数 和 h 函数并正确（Vue3的h函数当初是2个不是以前的createElement了）
  3. 虚构 dom 的递归
  4. 别再说了- -!，我不听。

ref

应用 reactive 会有一个毛病，那就是，Proxy 只能代理对象，但不能代理根底类型。

如果你调用这段代码 new Proxy(0, {})，浏览器会反馈你 Uncaught TypeError: Cannot create proxy with a non-object as target or handler

所以，对于根底类型的代理。咱们须要一个新的形式，而在 vue3 中，对于根底类型的新 api 是 ref

<button >{{count}}</button>export default {  setup() {    const count = ref(0);    return { count };  }}

实现 ref 其实非常简单：利用 js 对象自带的 getter 就能够实现

举个栗子：

let v = 0;let ref = {    get value() {        console.log('get')        return v;    },    set value(val) {        console.log('set', val)        v= val;    }}ref.value; // 打印 getref.value = 3; // 打印 set

那么通过后面几章实现的 track 和 trigger 能够轻松实现 ref

间接上实现的代码

function ref(target) {  let value = target  const obj = {    get value() {      track(obj, 'value');      return value;    },    set value(newVal) {      if (newVal !== value) {        value = newVal;        trigger(obj, 'value');      }    }  }  return obj;}

computed

那么该怎么实现 computed？

首先：参考 vue3 的 computed 应用形式

let sum = computed(() => {  return count.num + num.value + '!'})

盲猜能够失去一个想法，通过革新下 effect 能够实现，即在 effect 调用的那一刻不执行 run 办法。所以咱们能够加一个 lazy 参数。

function effect(fn, options = {}) {  const _effect = function(...args) {    activeEffect = _effect;    return fn(...args);  };  // 增加这段代码  if (!options.lazy) {    _effect();  }  return _effect;}

那么 computed 能够这么写

  1. 外部执行 effect(fn, {lazy: true}) 保障 computed 执行的时候不触发回调。
  2. 通过对象的 getter 属性，在 computed 被应用的时候执行回调。
  3. 通过 dirty 防止出现内存溢出。

优良的代码跃然纸上：

function computed(fn) {  let dirty = true;  let value;  let _computed;  const runner = effect(fn, {    lazy: true  });    _computed = {    get value() {      if (dirty) {        value = runner();        dirty = false;      }      return value;    }  }  return _computed;}

那么问题来了 dirty 在第一次执行后就被设置为 false 如何重置？

此时 vue3 的解决办法是，给 effect 增加一个 scheduler 用来解决副作用。

function effect(fn, options = {}) {  const _effect = function(...args) {    activeEffect = _effect;    return fn(...args);  };  if (!options.lazy) {    _effect();  }  // 增加这行  _effect.options = options;  return _effect;}

既然有了 scheduler 那就须要更改 trigger 来解决新的 scheduler。

function trigger(target, key) {  const depsMap = targetMap.get(target);  if (!depsMap) return;  const effects = new Set()  depsMap.get(key).forEach(e => effects.add(e))  // 更改这一行  effects.forEach(e => scheduleRun(e))}// 增加一个办法function scheduleRun(effect) {  if (effect.options.scheduler !== void 0) {    effect.options.scheduler(effect);  } else {    effect();  }}

而后，把下面代码合并一下，computed 就实现了

function computed(fn) {  let dirty = true;  let value;  let _computed;  const runner = effect(fn, {    lazy: true,    scheduler: (e) => {      if (!dirty) {        dirty = true;        trigger(_computed, 'value');      }    }  });    _computed = {    get value() {      if (dirty) {        value = runner();        dirty = false;      }      track(_computed, 'value');      return value;    }  }  return _computed;}

总结

  1. reactive 的外围是 track + trigger + Proxy
  2. ref 是通过对象自有的 getter 和 setter 配合 track + trigger 实现的
  3. computed 其实是一个在 effect 根底上的改良

下章内容：vue3 该怎么联合 jsx？

最初

原创不易，给个三连刺激下弟弟吧。

  1. 源码请看 uuz
  2. 本文内容出自 https://github.com/zhongmeizhi/FED-note
  3. 欢送关注公众号「前端进阶课」认真学前端，一起进阶。回复 全栈 或 Vue 有好礼相送哦