人在上海，因为疫情，没有办法拿到这本书，本书没有电子版，那就看代码仓库吧。

书的介绍
s34120804.jpg

本书基于Vue.js 3，从规范出发，以源码为基础，并结合大量直观的配图，循序渐进地讲解Vue.js中各个功能模块的实现，细致剖析框架设计原理。全书共18章，分为六篇，主要内容包括：框架设计概览、响应系统、渲染器、组件化、编译器和服务端渲染等。通过阅读本书，对Vue.js 2/3具有上手经验的开发人员能够进一步理解Vue.js框架的实现细节，没有Vue.js使用经验但对框架设计感兴趣的前端开发人员，能够快速掌握Vue.js的设计原理。

下面开始阅读代码

course1-权衡的艺术

我对源码进行了注释和修改
这部分代码主要是写了一个render函数，递归的将一个固定对象结构渲染到DOM中
固定对象结构形如

  1. interface node {
  2.     tag: string,
  3.     children: string | node[]
  4. }
  1. <body></body>
  3. <script type="module">
  4.   import { Render, obj } from "./render.js";
  5.   // 渲染到 body 下
  6.   Render(obj, document.body);
  7. </script>
  1. export async function Render(obj, root) {
  2.     // 创建DOM标签
  3.     const el = document.createElement(obj.tag)
  4.     if (typeof obj.children === 'string' /* 如果children类型是string */ ) {
  5.         const text = document.createTextNode(obj.children)
  6.         el.appendChild(text)
  7.     } else if (Array.isArray(obj.children)) /* 如果children的类型是Array */ {
  8.         // array，递归调用 Render，使用 el 作为 root 参数
  9.         for (let child of obj.children) {
  10.             Render(child, el)
  11.         }
  12.     }
  15.     // 将元素添加到 root
  16.     root.appendChild(el)
  17. }
  19. export const obj = {
  20.     tag: "div",
  21.     children: [{
  22.             tag: "span",
  23.             children: "hello world",
  24.         },
  25.         {
  26.             tag: "div",
  27.             children: [{
  28.                     tag: "span",
  29.                     children: "this ",
  30.                 },
  31.                 {
  32.                     tag: "span",
  33.                     children: "is ",
  34.                 },
  35.                 {
  36.                     tag: "span",
  37.                     children: "render",
  38.                 },
  39.             ],
  40.         },
  41.     ],
  42. };

没了

course2-框架设计的核心要素

这一部分应该是在介绍框架使用的打包工具配置和演示吧。
没什么可说的。
没了

course3-Vue3 的设计思路

这一部分主要演示vnode绑定事件
此时固定对象结构有了名字，那就是vnode

  1. interface vnode {
  2.     tag: string,
  3.     props: {
  4.         onClick: () => void
  5.     },
  6.     children: string | vnode[]
  7. }

code1.html到code3.html，从开始的vnode对象，到后来的组件对象

  1. <body></body>
  3. <script type="module">
  4.   import { renderer } from "./code3.js";
  5.   const MyComponent = {
  6.     // render函数
  7.     render() {
  8.       return {
  9.         tag: "div",
  10.         props: {},
  11.         children: [
  12.           {
  13.             tag: "span",
  14.             props: {
  15.               onClick: () => alert("hello"),
  16.             },
  17.             children: "click me",
  18.           },
  19.           {
  20.             tag: "div",
  21.             props: {},
  22.             children: "this is span",
  23.           },
  24.         ],
  25.       };
  26.     },
  27.   };
  29.   // vnode
  30.   const vnode = {
  31.     tag: MyComponent,
  32.   };
  34.   renderer(vnode /* vnode */, document.body /* 挂载容器 */);
  35. </script>
  1. export function renderer(vnode /* vnode */ , container /* 挂载容器 */ ) {
  2.   if (typeof vnode.tag === 'string') {
  3.     // 说明 vnode 描述的是标签元素
  4.     mountElement(vnode, container)
  5.   } else if (typeof vnode.tag === 'object') {
  6.     // 说明 vnode 描述的是组件
  7.     mountComponent(vnode, container)
  8.   }
  9. }
  11. function mountElement(vnode, container) {
  12.   // 使用 vnode.tag 作为标签名称创建 DOM 元素
  13.   const el = document.createElement(vnode.tag)
  14.   // 遍历 vnode.props 将属性、事件添加到 DOM 元素
  15.   for (const key in vnode.props) {
  16.     if (/^on/.test(key)) {
  17.       // 如果 key 以 on 开头，那么说明它是事件
  18.       el.addEventListener(
  19.         key.substr(2).toLowerCase(), // 事件名称 onClick ---> click
  20.         vnode.props[key] // 事件处理函数
  21.       )
  22.     }
  23.   }
  25.   // 处理 children
  26.   if (typeof vnode.children === 'string') {
  27.     // 如果 children 是字符串，说明是元素的文本子节点
  28.     el.appendChild(document.createTextNode(vnode.children))
  29.   } else if (Array.isArray(vnode.children)) {
  30.     // 递归地调用 renderer 函数渲染子节点，使用当前元素 el 作为挂载点
  31.     vnode.children.forEach(child => renderer(child, el))
  32.   }
  34.   // 将元素添加到挂载点下
  35.   container.appendChild(el)
  36. }
  38. function mountComponent(vnode, container) {
  39.   // 调用组件函数，获取组件要渲染的内容（虚拟 DOM）
  40.   const subtree = vnode.tag.render()
  41.   // 递归调用 renderer 渲染 subtree
  42.   renderer(subtree, container)
  43. }

没了