减少运行时开销
更新时间：
本节介绍的内容可以使得您的页面更加快速的更新。
不在 css 中使用 id 选择器
推荐级别：强烈
当我们需要使用 js 操作组件时，需要给组件注册 id。 如果只需要在 css 中给组件添加样式，建议使用 class 选择器。
反例 1
<template>
<div id="red"></div>
</template>
<style>
#red {
color: red;
}
</style>复制代码
正例 1
<template>
<div class="red"></div>
</template>
<style>
.red {
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 循环中使用条件判断，建议在 js 中将数据组织好再渲染。
反例
<template>
<div>
<div for="{{foodList}}" if="{{$item.vegetarian}}">
<text>{{$item.name}}</text>
<text>{{$item.category}}</text>
</div>
</div>
</template>
<script>
export default {
data: {
foodList: [
{ name: 'Apple', category: 'Fruit', vegetarian: true },
{ name: 'Chicken', category: 'Meat', vegetarian: false },
{ name: 'Broccoli', category: 'Vegetable', vegetarian: true },
{ name: 'Pizza', category: 'Fast Food', vegetarian: false },
{ name: 'Yogurt', category: 'Dairy', vegetarian: true },
],
},
}
</script>复制代码
正例
<template>
<div>
<div for="{{vegetarianFoods}}">
<text>{{$item.name}}</text>
<text>{{$item.category}}</text>
</div>
</div>
</template>
<script>
export default {
data: {
vegetarianFoods: [],
},
onInit() {
this.vegetarianFoods = [
{ name: 'Apple', category: 'Fruit', vegetarian: true },
{ name: 'Chicken', category: 'Meat', vegetarian: false },
{ name: 'Broccoli', category: 'Vegetable', vegetarian: true },
{ name: 'Pizza', category: 'Fast Food', vegetarian: false },
{ name: 'Yogurt', category: 'Dairy', vegetarian: true },
].filter((food) => food.vegetarian === true)
},
}
</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>复制代码
减少非必要的组件抽象
推荐级别：鼓励
不要过度依赖自定义组件, 一个页面引入的自定义组件控制在 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。
正例
<template>
<text for="{{sportList}}" tid="id">{{$item.id}} {{$item.name}}</text>
</template>
<script>
export default {
data: {
sportList: [
{ id: 'No.1', name: '游泳' },
{ id: 'No.2', name: '跑步' },
{ id: 'No.3', name: '登山' },
],
},
}
</script>复制代码