第 3 章 Vue.js 3 的设计思路
霍春阳（HcySunYang）
在第 1 章中，我们阐述了框架设计是权衡的艺术，这里面存在取舍，例如性能与可维护性之间的取舍、运行时与编译时之间的取舍等。在第 2 章中，我们详细讨论了框架设计的几个核心要素，有些要素是框架设计者必须要考虑的，另一些要素则是从专业和提升开发体验的角度考虑的。框架设计讲究全局视角的把控，一个项目就算再大，也是存在一条核心思路的，并围绕核心展开。本章我们就从全局视角了解 Vue.js 3 的设计思路、工作机制及其重要的组成部分。我们可以把这些组成部分当作独立的功能模块，看看它们之间是如何相互配合的。在后续的章节中，我们会深入各个功能模块了解它们的运作机制。
3.1 声明式地描述 UI
Vue.js 3 是一个声明式的 UI 框架，意思是说用户在使用 Vue.js 3 开发页面时是声明式地描述 UI 的。思考一下，如果让你设计一个声明式的 UI 框架，你会怎么设计呢？为了搞清楚这个问题，我们需要了解编写前端页面都涉及哪些内容，具体如下。
DOM 元素：例如是 div 标签还是 a 标签。
属性：如 a 标签的 href 属性，再如 id、class 等通用属性。
事件：如 click、keydown 等。
元素的层级结构：DOM 树的层级结构，既有子节点，又有父节点。
那么，如何声明式地描述上述内容呢？这是框架设计者需要思考的问题。其实方案有很多。拿 Vue.js 3 来说，相应的解决方案是：
使用与 HTML 标签一致的方式来描述 DOM 元素，例如描述一个 div 标签时可以使用 <div></div>；
使用与 HTML 标签一致的方式来描述属性，例如 <div id="app"></div>；
使用 : 或 v-bind 来描述动态绑定的属性，例如 <div :id="dynamicId"></div>；
使用 @ 或 v-on 来描述事件，例如点击事件 <div @click="handler"></div>；
使用与 HTML 标签一致的方式来描述层级结构，例如一个具有 span 子节点的 div 标签 <div><span></span></div>。
可以看到，在 Vue.js 中，哪怕是事件，都有与之对应的描述方式。用户不需要手写任何命令式代码，这就是所谓的声明式地描述 UI。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Vue.js 3 的设计思路是本文的主要内容。文章首先介绍了声明式地描述 UI 的概念，指出 Vue.js 3 是一个声明式的 UI 框架，用户可以使用模板或 JavaScript 对象来描述 UI。其次，文章介绍了虚拟 DOM 的概念，指出虚拟 DOM 是用 JavaScript 对象来描述真实的 DOM 结构，而 Vue.js 3 除了支持使用模板描述 UI 外，还支持使用虚拟 DOM 描述 UI。最后，文章初步介绍了渲染器的作用，即将虚拟 DOM 渲染为真实 DOM。渲染器是 Vue.js 组件的重要角色，后续文章将会深入讲解渲染器的工作原理。整体而言，本文通过介绍 Vue.js 3 的设计思路、工作机制及其重要的组成部分，帮助读者初步了解了 Vue.js 3 的核心概念和特点。 在文章中，还介绍了渲染器的实现思路，包括创建元素、添加属性和事件以及处理子节点等步骤。此外，文章还讨论了组件的本质，指出组件是一组 DOM 元素的封装，可以使用虚拟 DOM 来描述组件。通过示例代码和解释，读者可以清晰地了解虚拟 DOM 和渲染器是如何渲染组件的。 文章还讨论了编译器的作用，将模板编译为渲染函数，以及编译器和渲染器之间的配合工作，实现性能提升。编译器能够分析动态内容，并在编译阶段提取出这些信息，交给渲染器，从而减少渲染器寻找变更点的工作量，提升性能。 总的来说，本文深入探讨了 Vue.js 3 的设计思路和核心概念，通过清晰的示例和解释，帮助读者快速了解了 Vue.js 3 的工作原理和特点，为进一步深入学习和应用 Vue.js 3 奠定了基础。Vue.js 3 的声明式描述 UI、虚拟 DOM、渲染器和编译器的配合工作等技术特点，为读者提供了全面的技术概览。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Vue.js 设计与实现》
《Vue.js 设计与实现》
立即购买
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论