vue 常见优化手段
使用 key
对于通过循环生成的列表，应给每个列表项一个稳定且唯一的 key，这有利于在列表变动时，尽量少的删除、新增、改动元素
使用冻结的对象
冻结的对象不会被响应化
<template>
<div id="app">
<button @click="loadNormalDatas">load normal datas</button>
<button @click="loadFrozenDatas">load frozen datas</button>
<h1>normal datas count: {{ normalDatas.length }}</h1>
<h1>freeze datas count: {{ freezeDatas.length }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
normalDatas: [],
freezeDatas: [],
};
},
methods: {
loadNormalDatas() {
this.normalDatas = this.getDatas();
console.log("normalDatas", this.normalDatas);
},
loadFrozenDatas() {
this.freezeDatas = Object.freeze(this.getDatas());
console.log("freezeDatas", this.freezeDatas);
},
getDatas() {
const result = [];
for (var i = 0; i < 1000000; i++) {
result.push({
id: i,
name: `name${i}`,
address: {
city: `city${i}`,
province: `province${i}`,
},
});
}
return result;
},
},
};
</script>
<style>
#app {
text-align: center;
}
</style>使用函数式组件
参见函数式组件
<template>
<div id="app">
<button @click="normalCount = 10000">生成10000个普通组件</button>
<button @click="functionalCount = 10000">生成10000个函数组件</button>
<div class="container">
<div class="item">
<NormalComp v-for="n in normalCount" :key="n" :count="n"></NormalComp>
</div>
<div class="item">
<FunctionalComp
v-for="n in functionalCount"
:key="n"
:count="n"
></FunctionalComp>
</div>
</div>
</div>
</template>
<script>
import NormalComp from "./components/NormalComp";
import FunctionalComp from "./components/FunctionalComp";
export default {
components: {
NormalComp,
FunctionalComp,
},
data() {
return {
functionalCount: 0,
normalCount: 0,
};
},
mounted() {
window.vm = this;
},
};
</script>
<style>
#app {
text-align: center;
}
.container {
width: 90%;
display: flex;
margin: 0 auto;
}
.item {
padding: 30px;
border: 1px solid #ccc;
margin: 1em;
flex: 1 1 auto;
}
</style><template>
<h1>NormalComp: {{ count }}</h1>
</template>
<script>
export default {
props: {
count: Number,
},
};
</script><template functional>
<h1>FunctionalComp: {{ props.count }}</h1>
</template>
<script>
export default {
functional: true,
props: {
count: Number,
},
};
</script>
<style></style>使用计算属性
如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们
非实时绑定的表单项
当使用v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染（rerender），这会带来一些性能的开销。
我们可以通过使用lazy或不使用v-model的方式解决该问题，但要注意，这样可能会导致在某一个时间段内数据和表单项的值是不一致的。
保持对象引用稳定
在绝大部分情况下，vue触发rerender的时机是其依赖的数据发生变化
若数据没有发生变化，哪怕给数据重新赋值了，vue也是不会做出任何处理的
下面是vue判断数据没有变化的源码
function hasChanged(x, y) {
if (x === y) {
return x === 0 && 1 / x !== 1 / y;
} else {
return x === x || y === y;
}
}因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染。
对于原始数据类型，保持其值不变即可
对于对象类型，保持其引用不变即可
从另一方面来说，由于可以通过保持属性引用稳定来避免子组件的重渲染，那么我们应该细分组件来尽量避免多余的渲染
使用 v-show 替代 v-if
对于频繁切换显示状态的元素，使用 v-show 可以保证虚拟 dom 树的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量 dom 元素的节点，这一点极其重要
关键字：频繁切换显示状态、内部包含大量 dom 元素
使用延迟装载（defer）
JS 传输完成后，浏览器开始执行 JS 构造页面。
但可能一开始要渲染的组件太多，不仅 JS 执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏
一个可行的办法就是延迟装载组件，让组件按照指定的先后顺序依次一个一个渲染出来
延迟装载是一个思路，本质上就是利用
requestAnimationFrame事件分批渲染内容，它的具体实现多种多样