精简 data 上数据
更新时间：
一般来讲 data 上的数据都是有响应式追踪地，首先一定要保证 data 的数据在视图中使用到了，其次要尽可能的简化 data 上面的数据。
不渲染的数据不定义在 data 上
推荐级别：强烈
不需要数据绑定或页面间传递的数据，不要定义在 data 里
反例
<template>
<text>{{a}}</text>
</template>
<script>
export default {
data: {
a: 'hello',
b: 'world',
},
onInit() {
this.a = this.a + this.b
},
}
</script>复制代码
正例
<template>
<text>{{a}}</text>
</template>
<script>
const b = 'world'
export default {
data: {
a: 'hello',
},
onInit() {
this.a = this.a + b
},
}
</script>复制代码
简化 data 上数据
推荐级别：建议
动态绑定的数据结构应去除冗余信息，尽可能的简单合理
反例
<template>
<list>
<list-item for="{{list}}">
<text>{{ $item.name }}</text>
<image src="{{ $item.icon }}"></image>
</list-item>
</list>
</template>
<script>
const getSportsList = () => {
return [
{
name: 'Football',
description: 'A team sport played with ...',
category: 'Team Sports',
icon: 'football.png',
},
{
name: 'Basketball',
description: 'A team sport in which two teams, ...',
category: 'Team Sports',
icon: 'basketball.png',
},
{
name: 'Tennis',
description: 'A racket sport that can be ...',
category: 'Individual Sports',
icon: 'tennis.png',
},
]
}
export default {
data: {
sports: [],
},
onInit() {
this.sports = getSportsList()
},
}
</script>复制代码
正例
<template>
<list>
<list-item for="{{list}}">
<text>{{ $item.name }}</text>
<image src="{{ $item.icon }}"></image>
</list-item>
</list>
</template>
<script>
const getSportsList = () => {
return [
{
name: 'Football',
description: 'A team sport played with ...',
category: 'Team Sports',
icon: 'football.png',
},
{
name: 'Basketball',
description: 'A team sport in which two teams, ...',
category: 'Team Sports',
icon: 'basketball.png',
},
{
name: 'Tennis',
description: 'A racket sport that can be ...',
category: 'Individual Sports',
icon: 'tennis.png',
},
]
}
export default {
data: {
sports: [],
},
onInit() {
this.sports = getSportsList().map((item) => ({
name: item.name,
icon: item.icon,
}))
},
}
</script>复制代码
不使用动态属性修改 data 上数据
推荐级别：强烈
JavaScript 对象属性可以使用点号和方括号两种方式来访问和修改。然而，为了确保数据可以在编译时有效地捕捉和优化，强烈建议尽量避免使用方括号动态访问和修改对象的值。
反例
<template>
<div>
<text>{{person.name}}</text>
<text>{{person.location}}</text>
</div>
</template>
<script>
export default {
data: {
person: {
name: 'Vance',
location: 'shenzhen',
},
},
onInit() {
const location = 'location'
this.person[location] = 'beijing'
},
}
</script>复制代码
正例
<template>
<div>
<text>{{person.name}}</text>
<text>{{person.location}}</text>
</div>
</template>
<script>
export default {
data: {
person: {
name: 'Vance',
location: 'shenzhen',
},
},
onInit() {
this.person.location = 'beijing'
},
}
</script>复制代码
避免过深的响应式数据层级
推荐级别：鼓励
对于动态绑定的数据，不宜嵌套层级过深。
反例
<template>
<div>
<text>{{obj.a.name}}</text>
<text>{{obj.b.name}}</text>
</div>
</template>
<script>
export default {
data: {
obj: {
a: {
name: 'name a',
},
b: {
name: 'name b',
},
},
},
}
</script>复制代码
正例
<template>
<div>
<text>{{obj.a}}</text>
<text>{{obj.b}}</text>
</div>
</template>
<script>
export default {
data: {
obj: {
a: 'name a',
b: 'name b',
},
},
}
</script>复制代码