第 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
- 深入了解
- 翻译
- 解释
- 总结
![](https://static001.geekbang.org/resource/image/d0/e4/d0880927e2a522a038be2d04bf19dfe4.png)
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 设计与实现》
立即购买
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论