共计 1110 个字符，预计需要花费 3 分钟才能阅读完成。
Vue 的根底优化个别从两点登程，运行时性能优化、加载时性能优化，倡议应用工具：Chrome Devtool 里的“Performance 工具（CPU 占用、内存占用、FPS 等问题）”、“Network（加载性能问题）”
一、运行时性能优化
1、开发环境下 Vue 会提供很多正告来帮你凑合常见的谬误与陷阱。而在生产环境下这些是没有用的，反而减少运行时开销。所以打包的时候尽量应用开发模式。
2、预编译模板最简略的形式就是应用单文件组件——相干的构建设置会主动把预编译解决好，所以构建好的代码曾经蕴含了编译进去的渲染函数而不是原始的模板字符串。
3、当应用单文件组件时，组件内的 CSS 会以 <style> 标签的形式通过 JavaScript 动静注入。这有一些小小的运行时开销，将所有组件的 CSS 提取到同一个文件能够防止这个问题，也会让 CSS 更好地进行压缩和缓存。
4、利用 Object.freeze() 晋升性能，Vue 在遇到像 Object.freeze() 这样被设置为不可配置之后的对象属性时，不会为对象加上 setter getter 等数据劫持的办法。
5、尽量扁平化接口返回数据，这样可防止一层层去遍历寻找咱们想要的数据。
6、咱们应该尽量减少间接写入 Storage 的频率（屡次写入操作合并为一次、只有在必要的时候才写入），防止长久化存储的容量持续增长。
7、如果你的利用存在十分长或者有限滚动的列表，那么采纳窗口化的技术来优化性能，只须要渲染少部分区域的内容，缩小从新渲染组件和创立 dom 节点的工夫。
8、应用懒加载在不可见时只须要渲染一个骨架屏，不须要真正渲染组件。
9、能够应用 keep-alive，keep-alive 是 Vue 提供的一个比拟形象的组件，用来对组件进行缓存，从而节俭性能。
<keep-alive>
<loading></loading>
</keep-laive>10、for 循环设置 key 值，在用 v -for 进行数据遍历渲染的时候，为每一项都设置惟一的 key 值，为了让 Vue 外部外围代码能更快地找到该条数据，当旧值和新值去比照的时候，能够更快的定位到 diff。
11、按需引入，咱们应用的一些第三方库能够通过按需引入的形式加载。防止引入不须要应用的局部。
import {useStore} from 'vuex'二、Vue 利用加载性能优化倡议
1、利用服务端渲染（SSR）和预渲染（Prerender）来优化加载性能，还有单页利用比拟大的问题是首屏可见工夫过长，根本分为服务端渲染、预渲染。
2、通过组件懒加载优化超长利用内容加载性能, 应用组件懒加载计划对于超长内容的利用初始化渲染很有帮忙，能够缩小大量必要的资源申请，缩短渲染要害门路。