3.1 声明式地描述 UI

Vue.js 3 是声明式的 UI 框架：开发者只描述「UI 长什么样」，而不关心「怎么把它渲染出来」。

一、编写前端页面都涉及哪些内容

内容说明
DOM 元素用哪个标签，如 div、a
属性标签自身的属性（href）与通用属性（id、class）
事件click、keydown 等
层级结构DOM 树的父子、兄弟关系

二、Vue.js 3 如何声明式地描述 UI

Vue.js 3 用与 HTML 标签一致的方式描述上述四类内容：

要描述的内容声明方式示例
DOM 元素HTML 标签<div></div>
属性HTML 属性<div id="app"></div>
动态属性: 或 v-bind<div :id="dynamicId"></div>
事件@ 或 v-on<div @click="handler"></div>
层级结构标签嵌套<div><span></span></div>

三、模板与虚拟 DOM

除了模板，还可以用 JavaScript 对象来描述 UI，这种方式比模板更灵活，它就是所谓的虚拟 DOM。

// 用 JavaScript 对象描述 UI
const title = {
  tag: 'h1',            // 标签名称
  props: {              // 标签属性
    onClick: handler
  },
  children: [           // 子节点
    { tag: 'span' }
  ]
}

它等价于下面这段模板：

<h1 @click="handler"><span></span></h1>

用模板描述 UI 时，模板是「字符串」，受限于 HTML 语法；用对象描述时是「普通数据」，可以自由组合、判断，因此更灵活。

四、渲染函数与 h 函数

一个组件要渲染的内容，最终都由渲染函数（render）来描述：render() 的返回值就是虚拟 DOM，Vue.js 拿到它才能把组件内容渲染出来。

手写渲染函数时用 h 函数生成虚拟 DOM：

import { h } from 'vue'

export default {
  render() {
    return h('h1', { onClick: handler }) // 虚拟 DOM
  }
}

h 函数的第一个参数是标签名，第二个参数是属性 / 事件，第三个参数是子节点。

相关

最近更新:
Contributors: liujw