《Vue.js 设计与实现》读书笔记(1-3章)
第 1 章、权衡的艺术
命令式 or 声明式
命令式:关注过程
声明式:关注结果
声明式直接声明想要的结果,框架帮用户封装好命令式的代码,所以在封装的过程中要做一些其他的事情来(生成要做的事情/找出差异)生成命令式的代码,优势是可维护性强,但是性能:命令式 ≥ 声明式。
框架设计要做的就是,保持可维护性,同时让性能损失更少。
虚拟 DOM
性能:innerHTML < 虚拟DOM < 原生JavaScript
心智负担/可维护性:虚拟DOM < innerHTML < 原生JavaScript
运行时和编译时
三种选择:纯运行时、运行时+编译时、纯编译时
手写vdom太麻烦,所以通过模板 or JSX 完成书写,但是这些还需要经历一次编译
Vue:运行时+编译时
Svelte: 纯编译时
第 2 章、设计框架要注意什么?
提升开发体验
用户未按要求使用时的错误提示,console
自定义 formatter
直观显示数据
控制框架代码的体积
开发环境提供良好提示,不增加生产环境体积。(通过 __DEV__
变量判断)
Tree-Shaking
使用 ESM
如果一个函数有副作用,将不会被 Tree-Shaking 删除,通过 /*#__PURE__*/
在打包工作( rollup/webpack )中声明没有副作用。
输出产物
IIFE:rollup format: 'iife'
ESM: format: 'esm'
CommonJS: format: 'cjs'
特性开关
用户关闭的特性,利用 Tree-Shaking 不打包到最终资源里。比如在 Vue3 中,对于 options API
处理错误
执行用户提供的函数时,做统一的错误处理(try...catch
),并提供给用户错误接口来处理。(可以错误上报等。)
TypeScript类型支持
第 3 章、Vue3 的设计思路
声明式的描述 UI
模板描述,或者虚拟DOM描述
渲染器
渲染器:把虚拟DOM变成真实DOM并渲染到浏览器页面。一个简单的渲染器实现:
点击查看代码
const vnode = {
tag: 'div',
props: {
onClick: () => alert('hello'),
},
children: 'click me',
};
function renderer(vnode, container) {
const el = document.createElement(vnode.tag);
for (const key in vnode.props) {
if (/^on/.test(key)) {
// on 开头是事件
el.addEventListener(
key.substr(2).toLowerCase(), // 事件名 onClick -> click
vnode.props[key] // 事件处理函数
);
}
}
// 处理 children
if (typeof vnode.children === 'string') {
el.appendChild(document.createTextNode(vnode.children));
} else if (Array.isArray(vnode.children)) {
vnode.children.forEach((child) => {
renderer(child, el);
});
}
container.appendChild(el);
}
renderer(vnode, document.body);
组件的本质
组件就是一组 DOM 元素的封装。上面的渲染器兼容组件(包括函数写法和对象写法):
点击查看代码
const MyComponent = function() {
return {
tag: 'div',
props: {
onClick: () => alert('hello'),
},
children: 'click me - MyComponent',
}
}
const MyComponent1 = {
render() {
return {
tag: 'div',
props: {
onClick: () => alert('hello'),
},
children: 'click me - MyComponent1',
}
}
}
const vnode = {
tag: MyComponent
};
function renderer(vnode, container) {
if (typeof vnode.tag === 'string') {
// 标签元素
mountElement(vnode, container);
} else if (typeof vnode.tag === 'function') {
// 函数描述组件
mountFunctionComponent(vnode, container);
} else if (typeof vnode.tag === 'object') {
// 对象描述组件
mountObjectComponent(vnode, container)
}
}
function mountElement(vnode, container) {
const el = document.createElement(vnode.tag);
for (const key in vnode.props) {
if (/^on/.test(key)) {
// on 开头是事件
el.addEventListener(
key.substr(2).toLowerCase(), // 事件名 onClick -> click
vnode.props[key] // 事件处理函数
);
}
}
// 处理 children
if (typeof vnode.children === 'string') {
el.appendChild(document.createTextNode(vnode.children));
} else if (Array.isArray(vnode.children)) {
vnode.children.forEach((child) => {
renderer(child, el);
});
}
container.appendChild(el);
}
function mountFunctionComponent(vnode, container) {
// 获取 vnode
const subtree = vnode.tag();
renderer(subtree, container);
}
function mountObjectComponent(vnode, container) {
// 获取 vnode
const subtree = vnode.tag.render();
renderer(subtree, container);
}
renderer(vnode, document.body);
模板的工作原理
编译器:模板编译为渲染函数
<div @click="handler">
click me
</div>
编译为
render() {
return h('div', { onClick: handler }, 'click me')
}
Vue 是各模块组成的有机体
模板 --[编译器]--> 渲染函数 --[渲染器]--> 真实DOM
如果在编译器中增加优化,比如静态节点的判断,就可以在渲染器减少一些工作。