第一章：权衡的艺术

运行时和编译时

运行时：用户直接提供数据对象构造成 DOM ```typescript const obj = { tag: ‘div’, children: [ {tag: ‘span’, children: ‘hello word’} ] }

function Render (obj, root) { const el = document.createElement(obj.tag); if (typeof obj.children === ‘string’) { const text = document.createTextNode(obj.childten); el.appendChild(text); } else if (obj.children) { obj.children.forEach(child => Render(child, el)); }

root.appendChild(el); }

Render(obj, document.body);


- 编译时：用户可以提供 HTML 字符串，将其编译为数组对象后再交给运行时处理
```typescript
<div> 
  <span>hello world</span>
</div>
const obj = {
  tag: 'div',
  children: [
    {tag: 'span', children: 'hello word'}
  ]
}

vue.js3 是一个运行时 + 编译时的架构

// 调用 Compiler 编译得到树型结构的数据对象
const obj = Compiler(html);
// 再调用 Render 进行渲染
Render(obj, document.body);

第二章：框架设计的核心要素

特性开关

可使用预定义变量来控制是否引入相应代码进而控制相应的特性是否生效
rollup.js 配置

{
  __FEATURE_OPTIONS_API__: isBundlerESMBuild ? `__VUE_OPTIONS_API__` : true,
}

webpack.DefinePlugin 插件实现

new webpack.DefinePlugin({
  __VUE_OPTIONS_API__: JSON.stringify(true) // 开启特性
})

错误处理

使用统一的错误处理接口提高程序的简洁性和健壮性

let handlerError = null;
export default {
    foo(fn) {
        callWithErrorHandling(fn);
    },
    // 用户可以调用该函数注册统一的错误处理函数
    registerErrorHandler(fn) {
        handlerError = fn;
    }
}
function callWithErrorHandling(fn) {
    try {
        fn && fn();
    } catch (e) {
        // 将捕获到的错误传递给用户的错误处理程序
        handlerError(e);
    }
}

第三章：Vue.js3 的设计思路

初始渲染器

渲染器就是把虚拟 DOM 渲染为真实 DOM

创建元素
为元素添加属性和事件

处理 children

const vnode = {
tag: 'div',
props: {
  onClick: () => alert('hello')
},
children: 'click me'
}

function renderer(vnode, container) {
  // 使用 vnode.tag 作为标签名称创建 DOM 元素
  const el = document.createElement(vnode.tag);
  // 遍历 vnode.props，将属性、事件添加到 DOM 元素
  for (const key in vnode.props) {
      if (/^on/.test(key)) {
          // 如果 key 以 on 开头，说明是事件
          el.addEventListener(
              key.substr(2).toLowerCase(), // onClick ---> click
              vnode.props[key] // 事件处理函数
          )
      }
  }
  // 处理 children
  if (typeof vnode.children === 'string') {
      // 文本节点
      const text = document.createTextNode(vnode.children);
      el.appendChild(text);
  } else if (Array.isArray(vnode.children)) {
      // 递归遍历子节点
      vnode.children.forEach(child => renderer(child, el));
  }
  // 将元素添加到挂载点下
  container.appendChild(el);
}

第四章：响应系统的作用与实现

副作用函数

函数的执行会直接或间接的影响其他函数的执行，这就是产生了副作用。

设计一个完善的响应系统

当读取操作发生时，将副作用函数收集到“桶”中
当设置操作发生时，从桶中取出副作用函数并执行 ```typescript // 存储副作用函数的桶 const bucket = new WeakMap();

// 用一个全局变量存储被注册的副作用函数 let activeEffect; // effect 栈 const effectStack = [];

function effect(fn) { const effectFn = () => { // 调用 cleanup 函数完成清除工作 cleanup(effectFn); // 当调用 effect 注册副作用函数时，将副作用函数复制给 activeEffect activeEffect = effectFn; // 在调用副作用函数之前将当前副作用函数压入栈中 effectStack.push(effectFn); fn(); // 在当前副作用函数执行完毕后，将当前副作用函数弹出栈，并将 activeEffect 还原为之前的值 effectStack.pop(); activeEffect = effectStack[effectStack.length - 1]; }

// 用来存储所有与该副作用函数相关联的依赖集合
effectFn.deps = [];
// 执行副作用函数
effectFn();

}

function cleanup(effectFn) { // 遍历 effectFn.deps 数组 for (let i = 0; i < effectFn.deps.length; i++) { // deps 是依赖集合 const deps = effectFn.deps[i]; // 将 effectFn 从依赖集合中移除 deps.delete(effectFn); } // 最后需要重置 effectFn.deps 数组 effectFn.deps.length = 0; }

// 在 get 拦截函数内调用 track 函数追踪变化 function track(target, key) { // 没有 activeEffect，直接 return if (!activeEffect) return;

let depsMap = bucket.get(target);
if (!depsMap) {
    bucket.set(target, (depsMap = new Map()))
}
let deps = depsMap.get(key);
if (!deps) {
    depsMap.set(key, (deps = new Set()));
}
// 把当前激活的副作用函数添加到依赖集合 deps 中
deps.add(activeEffect);
// deps 就是一个与当前副作用函数存在联系的依赖集合
// 将其添加到 activeEffect.deps 数组中
activeEffect.deps.push(deps);

}

// 在 set 拦截函数内调用 trigger 函数触发变化 function trigger(target, key) { const depsMap = bucket.get(target); if (!depsMap) return;

const effects = depsMap.get(key);
const effectsToRun = new Set(effects);
effects && effects.forEach(effectFn => {
    // 如果 trigger 触发执行的副作用函数与当前正在执行的副作用函数相同，则不触发执行
    if (effectFn !== activeEffect) {
        effectsToRun.add(effectFn);
    }
})
effectsToRun.forEach(fn => fn()); // 避免无限执行

}

Map 和 WeakMap 的区别
```typescript
const map = new Map();
const weakMap = new weakMap();
(function() {
    const foo = { foo: 1 };
    const bar = { bar: 2 };
    map.set(foo, 1);
    weakMap.set(bar, 2);
})();

WeakMap 的 key 是弱引用，不会影响垃圾回收器的工作，所以当 bar 给清除后无法中 weakMap 中获取到对象 bar。
所以 WeakMap 经常用于存储那些只有当 key 所引用的对象存在时（没有被回收）才有价值的信息。

调度执行

可调度，就是当触发副作用函数重新执行时，能够控制副作用函数执行时机、次数以及方式

function effect(fn, options = {}) {
    const effectFn = () => {
        // ...
    }
    // 将 options 挂载到 effectFn 上
    effectFn.options = options;
    // ...
}
function trigger(target, key) {
    // ...
    effectsToRun.forEach(effectFn => {
        // 如果一个副作用函数存在调度器，则调用该调度器，并将副作用函数作为参数传递
        if (effectFn.options.scheduler) {
            effectFn.options.scheduler(effectFn);
        } else {
            // 否则直接执行副作用函数
            effectFn();
        }
    }); 
}

不包含过渡状态的调度器

// 定义一个任务队列
const jobQueue = new Set();
// 使用 Promise.resolve() 创建一个 promise 实例，用他将一个任务添加到微任务队列中
const p = Promise.resolve();
// 一个标志代表是否正在刷新队列
let isFlushing = false;
function flushJob () {
    // 如果队列正在刷新，则什么都不做
    if (isFlushing) return;
    // 设置为 true，代表正在刷新
    isFlushing = true;
    //在微任务队列中刷新 jobQueue 队列
    p.then(() => {
        jobQueue.forEach(job => job());
    }).finally(() => {
        // 结束后重置 isFlushing
        isFlushing = false;
    })
}

winter is coming

【2022.04】《Vue.js设计与实现》