Vue性能优化技巧（一）

最新推荐文章于 2024-08-22 14:13:51 发布

droo_king

最新推荐文章于 2024-08-22 14:13:51 发布

阅读量682

点赞数

分类专栏：技术技术，js 文章标签： vue.js javascript html5 前端

本文链接：https://blog.csdn.net/qq_34482428/article/details/115449370

版权

本文分享了Vue性能优化的四个关键技巧，包括：1) 使用函数式组件减少执行时间，提高页面流畅性；2) 通过组件拆分减少不必要的渲染；3) 利用局部变量代替响应式变量降低依赖收集开销；4) 智能选择v-show或v-if以优化DOM操作。这些技巧已在实际项目中得到验证，能显著提升应用性能。

摘要由CSDN通过智能技术生成

本文主要参考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中加了function