设计思路

声明式UI（推荐使用）: 即 template 形式（模板，模板的编译依赖于编译器），会被编译器的程序编译为渲染函数，再由渲染器渲染为真实 DOM

编译器：将模板编译为渲染函数，在编译的过程中编译器有能力分析动态内容，并在编译阶段把这些信息提取出来，把附带静动态属性的内容交给渲染器（patchFlags），在更新的阶段，渲染器只需对动态属性进行查找和更新，性能自然就提升了。（后面diff算法实现了各种优化，靶向更新，预字符串化，静态提升….

渲染器：把虚拟 DOM 对象渲染为真实 DOM 元素。它的工作原理是，递归地遍历虚拟 DOM 对象，并调用原生 DOM API 来完成真实 DOM 的创建。渲染器的精髓在于后续的更新，它会通过 Diff 算法找出变更点，并且只会更新需要更新的内容虚拟 DOM 是变成真实 DOM 并渲染到浏览器页面中（依托强大的编译器）

无论是使用模板还是直接手写渲染函数，对于一个组件来说，它要渲染的内容最终都是通过渲染函数产生的，然后渲染器再把渲染函数返回的虚拟 DOM 渲染为真实 DOM，这就是模板的工作原理，也是 Vue.js 渲染页面的流程。

响应式系统

利用响应系统的能力，我们可以做到，当响应式数据变化时自动完成页面更新（或重新渲染,执行副作用函数）

Vue.js 3 的响应式数据是基于 Proxy 实现的

原理：拦截一个对象的读取和设置操作,读取的时候把副作用函数存储到一个“桶”里(t