Vue性能优化技巧（一）

本文主要参考Vue.js源码核心成员之一：Guillaume Chau在2019年分享的主题9 Performance secrets revealed，分享中提到了九个Vue.js性能优化技巧。在看完了大佬的项目相关源码并实践分析之后感觉收货颇丰，所以写下这边文章与大家分享。这些技巧还是比较实用的不少优化点都在实际工作中取得了不俗的效果。

本文github地址：https://github.com/1252833041/vue-runtime-test

原版github地址：https://github.com/Akryum/vue-9-perf-secrets

原版文档地址：https://slides.com/akryum/vueconfus-2019

1.函数式组件（Functional）

第一个技巧，函数式组件（一种没有管理任何状态,没有生命周期方法的无状态组件）

原组件：

<template>
	<article class="cell1" v-if="value>50">
		{
  {value}}
	</article>
	<article class="cell2" v-else>
		{
  {value}}
	</article>
</template>

<script>
	export default{
		props:['value']
	}
</script>

优化后组件：

<template functional>
	<article class="cell1" v-if="props.value>50">
		{
  {props.value}}
	</article>
	<article class="cell2" v-else>
		{
  {props.value}}
	</article>
</template>

从代码中我们可以看到我们去除了组件中的 script标签里面的内容，并在template中加了functional标识符，这个组件就变成了函数式组件。为了更方便查看执行时间我们分别渲染三千次优化前后组件，打开 Chrom