一文读懂web标准的基石：web IDL

一、前言

我们从全局视角了解Vue.js 3 的设计思路、工作机制及其重要的组成部分。我们可以把这些组成部分当作独立的功能模块，看看它们之间是如何相互配合的。

• UI的两种形式：模板字符串和虚拟DOM
• Vue.js框架的两个重要组成部分：编译器和渲染器

二、本章内容

2.1 声明式地描述UI

Vue.js 3 是一个声明式的UI框架。设计一个这样的框架，我们需要了解编写前端页面都涉及哪些内容？具体如下：

• DOM元素：是div标签还是a标签。
• 属性：如a标签的href属性，再如id、class等通用属性
• 事件：如click、keydown等。
• 元素的层级结构：DOM树的层级结构，既有子节点，又有父节点。

那么，如何声明式地描述上述内容呢？ 在Vue.js 3 中的解决方案是：

• 使用与HTML标签一致的方式来描述DOM元素、属性与层级结构等，例如 <div id="app"><span>趋动科技</span></div>;
• 使用:或v-bind来描述动态绑定的属性，使用@或v-on来描述事件例如 <div :name="name" @click="handleClick"></div>; 这样，用户不需要手写任何命令式代码，就可以实现声明式地描述UI。当然除了使用这种模板形式描述UI外，还可以用JS对象来描述：

const title = {tag: 'div',props: { onClick: handleClick},children: [{tag: 'span'}]
} 

对应到Vue.js模板是：

<div @click="handleClick"><span></span></div> 

使用JS对象来描述比模板来说的