VUE复习笔记21（渲染函数 jsx）

Vue绝大多数情况下推荐使用 template 来创建你的HTML，然而在一些特性的情况下， 你真的还是需要 js 完全的编程能力。就是 render 函数，他比template 更加接近编译器。

  
    Hello world!
  

在html层，我们决定这样定义组件的接口：

Hello world!

当我们开始写一个通过 level prop 动态生成 heading 标签的组件，你可能很快想到这样实现(也就是根据level的值的不同动态生成不同的组件)：

Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

在这种情况下 使用 template并不是最好的选择，首先代码冗长，为了在不同的情况下插入内容，我们使用了很多的 slot

虽然模版在大多数的组件中都非常好用，但是在这种情况下就不是很简洁了，那么我们现在尝试使用 render 函数来重写上面例子。

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

简单清晰很多！简单来说，这样代码精简很多，但是需要非常熟悉 Vue 的实例属性。在这个例子中，你需要知道当你不使用 slot 属性向组件中传递内容时，比如 anchored-heading 中的 Hello world!，这些子元素被存储在组件实例中的 $slots.default中。如果你还不了解，** 在深入 render 函数之前推荐阅读 实例属性 API。**

节点、树、以及虚拟DOM

在深入渲染函数之前。了解浏览器的一些工作原理是非常重要的。

  
My title
  Some text content
  

当浏览器读到这些代码时，它会建立一个“DOM 节点”树来保持追踪，如同你会画一张家谱树来追踪家庭成员的发展一样。
html和dom的节点树如下：

image.png

顺序是从外到内的。
每个元素都是一个节点，每片元素也是一个节点，甚至注释也是我们的节点，一个节点就是页面的一部分。就像家谱树一样，节点中可能还会包含子节点。

但是高效的更新所有这些节点 是比较困难的。不过所幸的是我们不需要在手动完成这些工作了。只需要告诉vue我们所希望的html是什么。这可以在一个模版中：

{{ blogTitle }}

也可以在一个函数中：

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

在这两种情况下，Vue 都会自动保持页面的更新，即便 blogTitle 发生了改变。