前端页面涉及的内容
其实,前端说简单也挺简单, 用户看到的 UI 无非就四个内容
- DOM 元素
- 属性
- 事件
- 元素的层级结构
Vue.js 为了降低开发者的心智负担,采用了声明式框架来描述上述内容.
Vue.js 的两种 UI 描述方式
- 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.
- 模板声明
就是用类似 HTML 标签的方式来声明 UI 内容, 也是业务开发最常见的方式.
Vue.js 会在编译时, 将模板声明转化成 js 对象描述, 然后再进行渲染.
可见, 这两种描述方式, 最终都要落到虚拟 DOM, 然后渲染器将其渲染为真实 DOM.
网友评论