Vue渲染函数

淡淡的烟草味﹌ 2024-04-17 05:38 51阅读 0赞

### 渲染函数 ###

*  基础
 *  节点、树以及虚拟DOM
 *   *  虚拟DOM
 *  createElement参数
 *   *  深入数据对象
     *  完整示例
     *  约束

# 基础 #

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你确实需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。  
  让我们深入一个简单的例子，这个例子里 `render` 函数很实用。假设我们要生成一些带锚点的标题：

<h1>
      <a name="hello-world" href="#hello-world">
        Hello world!
      </a>
    </h1>

对于上面的 HTML，你决定这样定义组件接口：

<anchored-heading :level="1">Hello world!</anchored-heading>

当开始写一个只能通过 `level prop` 动态生成标题 (`heading`) 的组件时，你可能很快想到这样实现：

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

这里用模板并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了 `<slot></slot>`，在要插入锚点元素时还要再次重复。  
  虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 `render` 函数重写上面的例子：

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

看起来简单多了！这样代码精简很多，但是需要非常熟悉 Vue 的实例属性。在这个例子中，你需要知道，向组件中传递不带 `v-slot` 指令的子节点时，比如 `anchored-heading` 中的 `Hello world!`，这些子节点被存储在组件实例中的 `$slots.default` 中。

# 节点、树以及虚拟DOM #

在深入渲染函数之前，了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例：

<div>
      <h1>My title</h1>
      Some text content
      
    </div>

当浏览器读到这些代码时，它会建立一个“DOM 节点”树来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。  
上述 HTML 对应的 DOM 节点树如下图所示：  
![DOM 树可视化][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 树的称呼。

# createElement参数 #

接下来你需要熟悉的是如何在 `createElement` 函数中使用模板中的那些功能。这里是 `createElement` 接受的参数：

// @returns {VNode}
    createElement(
      // {String | Object | Function}
      // 一个 HTML 标签名、组件选项对象，或者
      // resolve 了上述任何一种的一个 async 函数。必填项。
      'div',
    
      // {Object}
      // 一个与模板中属性对应的数据对象。可选。
      { 
        // (详情见下一节)
      },
    
      // {String | Array}
      // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
      // 也可以使用字符串来生成“文本虚拟节点”。可选。
      [
        '先写一些文字',
        createElement('h1', '一则头条'),
        createElement(MyComponent, { 
          props: { 
            someProp: 'foobar'
          }
        })
      ]
    )

## 深入数据对象 ##

有一点要注意：正如 `v-bind:class` 和 `v-bind:style` 在模板语法中会被特别对待一样，它们在 `VNode` 数据对象中也有对应的顶层字段。该对象也允许你绑定普通的 HTML 特性，也允许绑定如 `innerHTML` 这样的 DOM 属性 (这会覆盖 v-html 指令)。

{ 
      // 与 `v-bind:class` 的 API 相同，
      // 接受一个字符串、对象或字符串和对象组成的数组
      'class': { 
        foo: true,
        bar: false
      },
      // 与 `v-bind:style` 的 API 相同，
      // 接受一个字符串、对象，或对象组成的数组
      style: { 
        color: 'red',
        fontSize: '14px'
      },
      // 普通的 HTML 特性
      attrs: { 
        id: 'foo'
      },
      // 组件 prop
      props: { 
        myProp: 'bar'
      },
      // DOM 属性
      domProps: { 
        innerHTML: 'baz'
      },
      // 事件监听器在 `on` 属性内，
      // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
      // 需要在处理函数中手动检查 keyCode。
      on: { 
        click: this.clickHandler
      },
      // 仅用于组件，用于监听原生事件，而不是组件内部使用
      // `vm.$emit` 触发的事件。
      nativeOn: { 
        click: this.nativeClickHandler
      },
      // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
      // 赋值，因为 Vue 已经自动为你进行了同步。
      directives: [
        { 
          name: 'my-custom-directive',
          value: '2',
          expression: '1 + 1',
          arg: 'foo',
          modifiers: { 
            bar: true
          }
        }
      ],
      // 作用域插槽的格式为
      // { name: props => VNode | Array<VNode> }
      scopedSlots: { 
        default: props => createElement('span', props.text)
      },
      // 如果组件是其它组件的子组件，需为插槽指定名称
      slot: 'name-of-slot',
      // 其它特殊顶层属性
      key: 'myKey',
      ref: 'myRef',
      // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
      // 那么 `$refs.myRef` 会变成一个数组。
      refInFor: true
    }

## 完整示例 ##

有了这些知识，我们现在可以完成我们最开始想实现的组件：

var getChildrenTextContent = function (children) { 
      return children.map(function (node) { 
        return node.children
          ? getChildrenTextContent(node.children)
          : node.text
      }).join('')
    }
    
    Vue.component('anchored-heading', { 
      render: function (createElement) { 
        // 创建 kebab-case 风格的 ID
        var headingId = getChildrenTextContent(this.$slots.default)
          .toLowerCase()
          .replace(/\W+/g, '-')
          .replace(/(^-|-$)/g, '')
    
        return createElement(
          'h' + this.level,
          [
            createElement('a', { 
              attrs: { 
                name: headingId,
                href: '#' + headingId
              }
            }, this.$slots.default)
          ]
        )
      },
      props: { 
        level: { 
          type: Number,
          required: true
        }
      }
    })

## 约束 ##

**VNode 必须唯一**  
  组件树中的所有 `VNode` 必须是唯一的。这意味着，下面的渲染函数是不合法的：

render: function (createElement) { 
      var myParagraphVNode = createElement('p', 'hi')
      return createElement('div', [
        // 错误 - 重复的 VNode
        myParagraphVNode, myParagraphVNode
      ])
    }

如果你真的需要重复很多次的元素/组件，你可以使用工厂函数来实现。例如，下面这渲染函数用完全合法的方式渲染了 20 个相同的段落：

render: function (createElement) { 
      return createElement('div',
        Array.apply(null, {  length: 20 }).map(function () { 
          return createElement('p', 'hi')
        })
      )
    }

[DOM]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/2076e528ed4340668d6e027ac91e1ad2.png