Learning Notes

# 文档初探(十三): 渲染函数&JSX

# 基础

Vue 提供了template搭配 compiler 的方式来渲染出 HTML, 这也是大多数场景下的应用方式. 但某些情况下, 也可以手写渲染函数(render function), 它是一种更接近 compiler 的写法. 我们要渲染出下面的 HTML:

<h1>
  hello world
</h1>
1
2
3
Vue.component("Title", {
  render(h) {
    return h("h" + this.level, this.$slots.default);
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
});

new Vue({
  el: "#app",
  template: `
    <Title :level="1">hello world</Title>
  `
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 节点, 树, Virtual DOM

我们都知道, 浏览器拿到 HTML 文件会将它解析成 DOM 树的结构. 我们要更新时会使用 DOM 的 API 来进行操作. 但是由于 DOM 的复杂性, 后来衍生出的 jQuery 将 DOM API 封装起来. 降低了使用难度. 可是它仍旧在直接操作 DOM, 我们知道, 调用 DOM API 是要跨线程访问的. 所以 Vue 最大限度地解决了这个问题.那就是 Virtual DOM.

在上面的例子里, 我在render函数里调用了h这个回调, 这个回调不必叫h, 叫createElement都可以. 它的核心在于它的返回值是什么? 它返回的不是一个 DOM 元素, 而是一个描述, 它描述元素该怎样被渲染到页面上. 包括每个节点的描述. Vue 给它起了个名字叫virtual node, 简写为VNode, 由众多VNode组成起来的树结构就叫Virtual DOM. Virtual DOM会追踪数据的变化, 再通过与之前的Virtual DOM进行比对, 只对发生变化的部分进行更新, 然后再开始操作 DOM API 将数据更新反映到实时的页面上. 由于我们不能直接操作 DOM 而改由 Vue 来操作 DOM, 它会给我们带来许多好处. 第一个就是我们不再关心 DOM 的操作, 不用去记住繁琐的 DOM API, 只关心数据的改变. 第二个好处是, 减少 DOM 的操作, 使得跨线程通信的频率减少, 提高了性能.

# h函数的的参数

这里是h函数的参数细节, 这里不表

# JSX

在 Vue 里写渲染函数是对小白的折磨, 只有高级开发者能够应付自如. React 同样要写渲染函数, 但是它的 JSX 语法实在是简洁直观, 所以 Vue 为了支持 JSX, 需要我们去下载一个Babel 插件.这样我们也可以在 Vue 里使用 JSX(那我不如直接用 React). 期待 Vue3 的新语法.

← 数据响应式 →