第三章：设计思路 ​

声明式地描述 UI ​

Vue 支持多种方式来写 UI

1. 模版式：使用类 HTML 的结构来描述（更直观）

<div @click="() => alert('ok')"> hello </div>

2. 虚拟 DOM：使用 js 对象来描述（更灵活）

const obj = {
  tag: 'div',
  children: [{ tag: 'span', children: 'hello world' }]
};

3. render 函数（render 函数的返回值就是 虚拟 DOM，其作用是让我们编写虚拟 DOM 更轻松）

export default {
  render() {
    return h('div', { onClick: () => alert('ok') });
  }
};

渲染器 ​

1. 渲染器的作用就是把虚拟 DOM 渲染为真实 DOM
2. 其实现原理就是把虚拟 DOM 对象通过我们熟悉的 DOM 操作 API 来完成渲染工作。

组件的本质 ​

组件就是一组 DOM 元素的封装

编译器 ​

将 .vue 中的 template 转换成 render 函数

模块组成整体 ​

组件的实现依赖于 渲染器，模版的编译依赖于 编译器，并且编译后生成的代码是根据渲染器和虚拟 DOM 的设计决定的，所以各个模块间是相互关联、相互制约的。

比如：渲染器在执行 patch 时需要寻找变更点，会消耗大量的性能。编译器在编译时其实可以明确的知道哪些是静态的哪些是动态变化的。因此 Vue 在设计时将两者结合，在编译阶段把这些信息提取出来，通过标识(patchFlag: xxx)来告诉渲染器，这样就能提升性能，减少不必要的计算。