Vue.js 的两种 UI 描述方式

前端页面涉及的内容

其实,前端说简单也挺简单, 用户看到的 UI 无非就四个内容

1. DOM 元素
2. 属性
3. 事件
4. 元素的层级结构

Vue.js 为了降低开发者的心智负担,采用了声明式框架来描述上述内容.

Vue.js 的两种 UI 描述方式

1. Javascript 对象描述(虚拟 DOM)
   相对第二种模板声明来说,优势是灵活.
   例如, 可以用

let level = 3
const title = {
    tag:`h${level}`, // h3 标签
}

灵活的描述标题级别,如果用模板声明, 则需要用大量的 v-if 条件语句. 这个 JS 对象,就是虚拟 DOM. 虚拟 DOM 是 JS 对象,操作起来比真实 DOM 要快很多, 因此在 DOM 更新等场景下, 能够依靠高效的 Diff 算法,获得接近原生命令式开发的最佳性能.

自己手写虚拟 DOM, 在嵌套层级较多时,也会非常繁琐. 所以, Vue.js 提供了 h 函数, 辅助创造虚拟 DOM.

2. 模板声明
   就是用类似 HTML 标签的方式来声明 UI 内容, 也是业务开发最常见的方式.
   Vue.js 会在编译时, 将模板声明转化成 js 对象描述, 然后再进行渲染.

可见, 这两种描述方式, 最终都要落到虚拟 DOM, 然后渲染器将其渲染为真实 DOM.