• 这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

 渲染函数

基础

当我们需要使用JavaScript的编程能力时，可以利用渲染函数。渲染函数比模板更接近于编译器。

例如，我们想要生成一些标题：

<h1>Hello world!</h1>

如果，我们按照之前的方式，那么模板内将会十分冗余。如果此时利用渲染函数，那么代码写起来将会简洁很多。

props: {
  level: {
    type: Number,
    required: true
  }
},
render: function (createElement) {
  return createElement(
    'h' + this.level,    // 标签名称
    this.$slots.default  // 子节点数组
  )
},

节点、树、以及虚拟DOM

在深入渲染函数之前，先来了解一些浏览器的工作原理。例如，下面这段HTML：

<div>
  <h1>My title</h1>
  Some text content
   <!-- TODO: Add tagline --> 
</div>

当浏览器读到这些代码时，它会建立一个DOM节点树 来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。 以上HTML对应的DOM节点树如下图所示： 

​

每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点。

高效地更新所有这些节点是比较困难的，不过幸运的是，我们不需要手动完成这个工作。只需要告诉Vue希望页面上的HTML是什么，例如在模板中：

<h1>{{ blogTitle }}</h1>

或者是在一个渲染函数中：

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

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

虚拟DOM

Vue通过建立一个虚拟DOM来追踪自己要如何改变真实DOM。例如：

return createElement('h1', this.blogTitle);

createElement 会返回什么呢？ 它不会返回一个实际的DOM元素。更准确的名字可能是：createNodeDescription，因为它所包含的信息会告诉Vue页面上需要渲染什么样的节点，包括其子节点的描述信息。我们把这样的节点描述为“虚拟节点（virtual node）”，也常简写它为“VNode”。“虚拟DOM”是我们对由Vue组件树建立起来的整个VNode树的称呼。

最后

如果对您有帮助，希望能给个👍评论/收藏/三连！

博主为人老实，无偿解答问题哦❤