渲染过程控制

渲染过程控制

append

append 特性定义了当前组件的子组件：

1. 以一整棵树的方式一次性添加到视图中 (append="tree")，还是
2. 每个子组件都产生一次单独的添加到视图的指令 (append="node")

<template>
  <div>
    <div>
      <text>Hello</text>
      <text>Weex</text>
    </div>
    <div append="node">
      <text>Hello</text>
      <text>Weex</text>
    </div>
    <div append="tree">
      <text>Hello</text>
      <text>Weex</text>
    </div>
  </div>
</template>

体验一下

在上面的代码中，第一组和第二组 <div> 的渲染过程相同，即先添加空的父级 <div>，然后插入第一个 <text> Hello，然后插入第二个 <text> Weex；第三组 <div> 则是连带两个 <text> 子组件一齐传给渲染层进行渲染的。

渲染结果显而易见，前两组渲染方式会使首次绘制的响应速度比后者快些，但是总渲染时间可能比第三组 append="tree" 更长。开发者可以根据实际界面的情况自行选择合理的渲染过程。

默认情况下，除了 <cell> 组件的默认渲染过程是 tree 模式，其它组件都默认按照 node 模式进行渲染。