减少运行时开销

更新时间：2024-09-01 11:23:13

本节介绍的内容可以使得您的页面更加快速的更新。

非必要不使用 id

推荐级别：强烈

在没用到$element 的情况下，避免在 template 节点上写 id="xxx"。这样子可以让您的组件更快速的渲染。

反例 1

<template>
  <div id="root"></div>
</template>
<style>
  #root {
    color: red;
  }
</style>

复制代码

正例 1

<template>
  <div class="root"></div>
</template>
<style>
  .root {
    color: red;
  }
</style>

复制代码

反例 2

// 定义了id="root"但未使用
<template>
  <div id="root"></div>
</template>

复制代码

正例 2

<template>
  <div id="root"></div>
</template>
<script>
  export default {
    onInit() {
      this.$element('root').animate()
    },
  }
</script>

复制代码

减少 for 和 if 嵌套

推荐级别：建议

for 本身即为一个耗时操作，如果再有 if 嵌套，会使得性能消耗严重。

反例

<template>
  <div>
    <div for="{{list}}">
      <image if="{{$item.type == 'img'}}" src="{{$item.value}}"></image>
      <text elif="{{$item.type == 'img'}}">{{$item.value}}</text>
    </div>
  </div>
</template>
<script>
  export default {
    data: {
      list: [
        { type: 'img', value: 'a.png' },
        { type: 'text', value: 'item1' },
        { type: 'text', value: 'item2' },
      ],
    },
  }
</script>

复制代码

正例

<template>
  <div>
    <image src="a.png"></image>
    <text for="{{list}}">{{$item}}</text>
  </div>
</template>
<script>
  export default {
    data: {
      list: ['item1', 'item2'],
    },
  }
</script>

复制代码

区分 show 指令和 if 指令

推荐级别：建议

当使用条件渲染将元素隐藏时，if 指令会将组件从 DOM 中移除，而 show 仅仅是渲染是不可见。

所以 if 指令会有更高的切换开销，而 show 指令会有更高的初始化开销。

在实践，如果需要频繁切换显示/隐藏的元素使用 show 指令，反之用 if 指令。

反例 1

// 下面示例中使用 show 元素依旧会被首屏渲染，分段加载失去意义
<template>
  <div>
    <div>分段加载的上半部分</div>
    <div show="{{display}}">分段加载的下半部分</div>
  </div>
</template>
<script>
  export default {
    data: {
      display: false,
    },
    onShow() {
      this.display = true
    },
  }
</script>

复制代码

正例 1

<template>
  <div>
    <div>分段加载的上半部分</div>
    <div if="{{display}}">分段加载的下半部分</div>
  </div>
</template>
<script>
  export default {
    data: {
      display: false,
    },
    onShow() {
      this.display = true
    },
  }
</script>

复制代码

反例 2

// 下面示例中用户会频繁切换A和B两个区域，使用 if 将不是一个好的选择。
<template>
  <div>
    <text @click="changeShow('A')">showA</text>
    <text @click="changeShow('B')">showB</text>
    <div if="{{status == 'A'}}">part A</div>
    <div elif="{{status == 'B'}}">part B</div>
  </div>
</template>
<script>
  export default {
    data: {
      status: 'A',
    },
    changeShow(status) {
      this.status = status
    },
  }
</script>

复制代码

正例 2

<template>
  <div>
    <text @click="changeShow('A')">showA</text>
    <text @click="changeShow('B')">showB</text>
    <div show="{{status == 'A'}}">part A</div>
    <div show="{{status == 'B'}}">part B</div>
  </div>
</template>
<script>
  export default {
    data: {
      status: 'A',
    },
    changeShow(status) {
      this.status = status
    },
  }
</script>

复制代码

减少无效的组件嵌套

推荐级别：建议

在页面布局中，尽量减少组件的嵌套，比如 list-item 本身可以作为容器，不需在其内部要额外的 div 嵌套。

反例

<template>
  <list>
    <list-item>
      <div>
        <text>hello</text>
        <image src="a.png"></image>
      </div>
    </list-item>
  </list>
</template>

复制代码

正例

<template>
  <list>
    <list-item>
      <text>hello</text>
      <image src="a.png"></image>
    </list-item>
  </list>
</template>

复制代码

直接使用父组件传参

推荐级别：鼓励

自定义组件应尽量使用原始的传参数据进行页面渲染，减少运行时处理。

反例

<template>
  <text>{{_name}}</text>
</template>

<script>
  export default {
    data: {
      _name: '',
    },
    props: {
      name: String,
    },
    onInit() {
      this._name = this.name
    },
  }
</script>

复制代码

正例

<template>
  <text>{{name}}</text>
</template>

<script>
  export default {
    props: {
      name: String,
    },
  }
</script>

复制代码

减少非必要的组件抽象

推荐级别：鼓励

不要过度依赖自定义组件, 一个页面引入的自定义组件控制在 1~2 个是比较合理的。需要注意的是，自定义组件不管内容多少，相比于普通组件有经过 js 多走一层创建 vm 的开销，所以对过于简单的组合，也不建议为了通用性而多封装一个自定义组件。与此同时也要避免自定义组件的多层次且套。

反例 1

<import src="./components/heartRateBlock.ux" name="heartRate"></import>
<import src="./components/calorieBlock.ux" name="calorie"></import>

<template>
  <div>
    <heartRate></heartRate>
    <calorie></calorie>
  </div>
</template>

复制代码

反例 2

<import src="./components/heartRate.ux" name="heartRate"></import>

<template>
  <heartRate></heartRate>
</template>

复制代码

减少页面复用

推荐级别：鼓励

设计应用的时候，尽可能拆成多个页面去实现。不要使用 if 的方式，将页面的多个状态全写进一个页面文件里通过参数传递控制。

反例

<template>
  <div if="{{status === 1}}">
    <div>A功能的展示区域</div>
    ...
  </div>
  <div if="{{status === 2}}">
    <div>B功能的展示区域</div>
    ...
  </div>
  <div if="{{status === 3}}">
    <div>C功能的展示区域</div>
    ...
  </div>
</template>

<script>
  export default {
    data: {
      status: 1,
    },
  }
</script>

复制代码

正例

//创建A页面 pageA.ux
<template>
  <div>A功能的展示区域</div>
</template>

//创建B页面 pageB.ux
<template>
  <div>B功能的展示区域</div>
</template>

//创建C页面 pageC.ux
<template>
  <div>C功能的展示区域</div>
</template>

复制代码

for 指令中指定 tid

推荐级别：鼓励

使用 for 指令的列表，存在删除 item 或者改变 item 顺序的情况，可以选择指定唯一的 tid。

正例

<text for="{{list}}" tid="id">{{$item.id}} {{$item.name}}</text>

<script>
  export default {
    data: {
      list: [
        {
          id: 'No.1',
          name: '游泳',
        },
        {
          id: 'No.2',
          name: '跑步',
        },
        {
          id: 'No.3',
          name: '登山',
        },
      ],
    },
  }
</script>