vue.js设计与实现(待续)

第一篇 框架设计概览

第 1 章 权衡的艺术

1.1.什么是声明式，什么是命令式

命令式：
$('#app').text('hello world').on('click', () => { alert('ok') })

1.2 性能与可维护性的权衡

注意：

1. 声明式代码的性能不优于命令式代码的性能
2. 命令式更加关注过程，而声明式更加关注结果
3. vue之所以用声明式，因为声明式代码的可维护性更强

1.3 虚拟 DOM 的性能到底如何

• 虚拟 DOM是为了最小化找出差异这一步的性能消耗而出现的

1.4 运行时和编译时

1. 框架：纯运行时的(不直观)、运行时 +编译时的、纯编译时
2. Vue.js 3 保持了运行时 + 编译时的架构

第 2 章 框架设计的核心要素

模块打包工具：rollup.js 和 webpack

2.1 提升用户的开发体验

2.2 控制框架代码的体积

• 开发环境 https://unpkg.com/vue@3.5.23/dist/vue.global.js
• 生产环境 https://unpkg.com/vue@3.5.23/dist/vue.global.prod.js

2.3 框架要做到良好的 Tree-Shaking

• Tree-Shaking 指的就是消除那些永远不会被执行的代码，也就是排除 dead code，现在无论是 rollup.js 还是 webpack，都支持Tree-Shaking
• 想要实现 Tree-Shaking，必须满足一个条件，即模块必须是ESM（ES Module）
• 注意注释代码 /#PURE/，其作用就是告诉 rollup.js，对于函数的调用不会产生副作用，你可以放心地对其进行TreeShaking（该注释也不是只有 rollup.js 才能识别，webpack 以及压缩工具（如 terser）都能识别它）

2.4 框架应该输出怎样的构建产物

• 如何用Rollup.js安装打包

1. 初始化项目（一路回车即可，默认配置）

npm init -y

2. 安装到 devDependencies（开发依赖）

npm install rollup --save-dev

3. 编写测试代码

//src/utils.js（工具模块，被入口文件依赖）
export const add = (a, b) => a + b;
export const minus = (a, b) => a - b; // 未被使用，会被 Tree-Shaking 剔除// src/main.js（入口文件，Rollup 从这里开始打包）
import { add } from './utils.js';
console.log('2+3=', add(2, 3));

4. 打包成 IIFE 格式（浏览器全局使用）

npx rollup src/main.js -o dist/bundle.iife.js -f iife --name “MyUtils”

5. 输出文件 dist/bundle.iife.js 可直接用 <script> 引入浏览器
6. 在 Node.js 环境中运行时需打包成cjs格式文件

2.5 特性开关

• 示例：为了兼容 Vue.js 2，在 Vue.js 3 中仍然可以使用选项 API 的方式编写代码。但是如果明确知道自己不会使用选项 API，用户就可以使用 VUE_OPTIONS_API 开关来关闭该特性，这样在打包的时候Vue.js 的这部分代码就不会包含在最终的资源中，从而减小资源体积

2.6 错误处理

• 统一方法进行错误处理

2.7 良好的 TypeScript 类型支持

使用 TS 编写框架和框架对 TS 类型支持友好是两件完全不同的事

第 3 章 Vue.js 3 的设计思路

3.1 声明式地描述 UI

一个组件要渲染的内容是通过渲染函数来描述的，render 函数，Vue.js 会根据组件的 render 函数的返回值拿到虚拟 DOM，然后就可以把组件的内容渲染出来

3.2 初识渲染器

虚拟DOM 其实:用来描述真实 DOM 的普通 JavaScript 对象
render函数

3.3 组件的本质

1. 组件是什么？
2. 组件和虚拟 DOM 有什么关系？
3. 渲染器如何渲染组件

3.4 模板的工作原理

编译器：将模板编译为渲染函数

3.5 Vue.js 是各个模块组成的有机整体

第二篇 响应系统

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

第 5 章 非原始值的响应式方案

第 6 章 原始值的响应式方