VUE3 的设计思路

在设计VUE3时，考虑前端页面都涉及哪些内容，具体如下

1. 元素
2. 属性
3. 事件
4. 元素层级

如何描述元素属性以及事件

1. 使用与HTML标签一致的方式描述DOM
2. 使用与HTML一致的方式描述属性，
3. 使用v-bind描述动态绑定的属性,使用 @ 或v-on来描述事件,
4. 使用与HTML一致的方式描述层级结构
5. VUE除了使用模版来描述DOM结构以外还能使用JSON来描述层级结构，在使用JSON描述DOM结构时其使用方式更加灵活多变，在描述DOM结构后需要使用渲染器使DOM结构渲染在浏览器上。

渲染器主工作方式

1. 通过document.createElement创建元素
2. 通过addEventListener 兼听属性中的事值及方法，绑定事件，
3. 通过document.createTextNode创建文本节点
4. 通过循环递归将所有元素及节点属性创建出来，最后挂载到指定容器里，
5. 泻染器的主要目地就是完成数据的展示
6. 主要依赖浏览器的document对象。

组件的本质

1. 就是使用JS对象描述DOM元素
2. 对象中描述了元素，事件，属性，以及层级结构，
3. 通过渲染器能够将组件的描述渲染出来，
4. 通常在一些VUE组件中我们能够看到 install
5. 是VUE的组件挂载方法，
6. 通过此方法我们可以将组件挂塔到VUE对象上。

模版的工作原理

1. 无论是渲染函数还是模版都属于声明式地描述UI
2. 模板主要通过编译器将模板编译为渲染函数
3. 我们通常使用的晌应式DOM内容都是通过渲染函数构建出来的

VUE是各个模块组成的有机整体

1. 组件的展示依赖于渲染器
2. 而模版的编译依赖于编译器
3. 编译还会通过逻辑识别属性与事件是否是动态绑定，如果是动态绑定，则会标记该属性，使其在数据变化时做DIFF算法，使VUE构建性能提升，而静态的内容则不会参与更新与DIFF算法
4. 从而使用户只需要关注数据。