Vue.js设计与实现（读书笔记）
框架设计概览
第一章 权衡的艺术
第二章 框架设的核心要素
提升用户的开发体验
为了防止出错误时，控制台报出许多JavaScript层面的错误信息，例如
Uncaught TypeError:Cannot read property ‘xxx’ of null
而根据此消息我们很难知道问题在哪儿，所以在设计和开发过程中，提供友好的警告信息至关重要。当然这只是相对开发环境来说。这些警告字符串在生产环境中会变得无意义，并且会增大应用程序的负担。此外，有一些警告检查还会产生些许的运行时开销，在生产模式下可以避免这些开销。模式
模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：
- development 模式用于 vue-cli-service serve
- test 模式用于 vue-cli-service test:unit
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
(摘自与官网)
所以当我们开发完一个项目时，会在main.js中添上Vue.config.productionTip = false，减小代码体积，避免额外开销，
错误处理
举一个简单的例子，开发一个工具模块，代码如下：
//utils.js
export default {
foo(fn) {
fn & fn()
}
}
该模块导出一个对象，其中foo属性是一个对象，接受一个回调函数作为参数，调用foo函数时会执行回调函数，在用户侧使用时：
import utils from 'utils.js'
utils.foo(() => {
//....
})
大家思考一下，如果用户提供的回调函数在执行时出错了，怎么办？第一个方法就是让用户自行处理，需要用户自己执行try…catch:
import utils from 'utils.js'
utils.foo(() => {
try {
//...
}catch(e) {
//...
}
})
这会增加用户使用的负担，所以vue在内部进行了错误的处理，并且将其分装为错误处理接口，当用户在使用的时候，进行注册错误处理程序，然后在错误捕获后，把错误传递给用户注册的错误处理程序，便是vue错误处理的原理。
良好的TypeScript类型支持
TypeScript是由微软开源的编程语言，简称TS，它是JavaScript的超集，能够为JavaScript提供类型支持。本章总结中提到一句话，让我也改变一贯的认知，“使用TS编写框架和框架对TS类型支持有好是两种完全不同的事。”
第三章 VUe.js的设计思路
声明式UI： Vue.js 3是一个声明式UI框架
声明式描述UI的方式有两种
1.模板描述
2.JavaScript对象描述
const vnode = {
tag: 'div',
props: {
onclick: () => alert('gl')
},
children: 'click me'
}
- 使用JavaScript对象来描述UI的方式，便是所谓的 虚拟DOM
- 一个组件要渲染的内容就是通过渲染函数来描述的
初始渲染器
渲染器的作用就是把虚拟DOM渲染为真是DOM
function renderer(vnode, continer) {
// 使用虚拟dom的属性创建节点
const el = document.createElement(vnode.tag);
// 遍历vnode属性，将节点的属性或方法添加到dom元素
for (const key in vnode.props) {
if (/^on/.test(key)) {
el.addEventListener(
key.substring(2).toLowerCase(),
vnode.props[key]
)
}
}
// 处理children
if (typeof vnode.children === 'string') {
el.appendChild(document.createTextNode(vnode.children))
} else if (Array.isArray(vnode.children)) {
vnode.children.array.forEach(child => {
renderer(child, el)
});
}
continer.appendChild(el)
}
渲染器函数接受两个参数：
- vnode：虚拟DOM对象
- container：一个真实的DOM元素
组件的本质
虚拟DOM除了可以描述真实DOM外，还可以描述组件。
组件就是一组DOM元素的封装
const vnode = {
tag:MyConpnent
}
当期描述组件的时候，tag属性所表述的不再是一个标签名称，而是
组件函数。但同时组件就一定时函数吗？当然不是，组件还可以是对象来表达。
模板的工作原理
无论是手写虚拟DOM还是使用模板，都属于声明式地描述UI，并且Vue同时支持这两种UI表示方式。
那么模板是怎么工作的----> 编译器
编译器的作用就是将模板编译为渲染函数
如下模板
<div @click='handler'>
click me
div>
对于编译器来说，模板就是一个字符串，它会分析该字符串并生成一个功能与之相同的渲染函数。
render() {
return h('div',{onClick:handler},'click me')
}
一个.vue文件就是一个组件.
<template>
<div @click='handler'>
click me
</div>
</template>
<script>
export default {
data() {/*···*/},
methods:{/*···*/},
}
</script>
template标签里的内容就是模板内容，编译器会把模板内容编译成渲染函数并添加到script标签块的组件对象上，所以最终在浏览器运行的代码是：
export default {
data() {/*···*/},
methods:{/*···*/},
render() {
return h('div',{onClick:handler},'click me')
}
}
对于一个组件来说，它要渲染的内容最终都是通过渲染函数产生的，然后渲染器再把渲染函数返回的虚拟DOM渲染为真实DOM，这就是模板的工作原理，也就是vue渲染页面的流程。