1、利用v-if和v-show减少初始化渲染和切换渲染的性能开销
2、computed、watch、methods区分使用场景
3、提前处理好数据解决v-if和v-for必须同级的问题
4、给v-for循环项加上key提高diff计算速度
5、利用v-once处理只会渲染一次的元素或组件
6、利用Object.freeze()冻结不需要响应式变化的数据
7、提前过滤掉非必须数据，优化data选项中的数据结构
8、避免在v-for循环中读取data中数组类型的数据
9、防抖和节流
防抖和节流是针对用户操作的优化。首先来了解一下防抖和节流的概念。
防抖：触发事件后规定时间内事件只会执行一次。简单来说就是防止手抖，短时间操作了好多次。
节流：事件在规定时间内只执行一次。
应用场景： 节流不管事件有没有触发还是频繁触发，在规定时间内一定会只执行一次事件，而防抖是在规定时间内事件被触发，且是最后一次被触发才执行一次事件。假如事件需要定时执行，但是其他操作也会让事件执行，这种场景可以用节流。假如事件不需要定时执行，需被触发才执行，且短时间内不能执行多次，这种场景可以用防抖。
在用Vue Cli脚手架搭建的Vue项目中，可以通过引用Lodash工具库里面的debounce防抖函数和throttle节流函数。
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';
export default{
methods:{
a: debounce(function (){
//...
},200,{
'leading': false,
'trailing': true
}),
b: throttle(function (){
//...
},200,{
'leading': false,
'trailing': true
})
}
}
。debounce(func, [wait=0], [options={}])创建一个防抖函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。返回一个防抖函数debounceFn，debounce.cancel取消防抖，debounce.flush立即调用该func。
options.leading为true时，func在延迟开始前调用。
options.trailing为true时，func在延迟开始结束后调用。
options.maxWait设置func 允许被延迟的最大值。
。throttle(func, [wait=0], [options={}])创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。 返回一个节流函 数throttleFn，throttleFn.cancel取消节流，throttleFn.flush立即调用该func。
options.leading为true时，func在节流开始前调用。
options.trailing为true时，func在节流结束后调用。
leading和trailing都为true，func在wait期间多次调用。
10、图片大小优化和懒加载
关于图片大小的优化，可以用image-webpack-loader进行压缩图片，在webpack插件中配置，具体可以看本文中这点。
关于图片懒加载，可以用vue-lazyload插件实现。
执行命令npm install vue-lazyload --save安装vue-lazyload插件。在main.js中引入配置
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
preLoad: 1.3,//预载高度比例
error: 'dist/error.png',//加载失败显示图片
loading: 'dist/loading.gif',//加载过程中显示图片
attempt: 1,//尝试次数
})
在项目中使用
11、利用挂载节点会被替换的特性优化白屏问题
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
也就是说渲染时，会直接用render渲染出来的内容替换
。Vue项目有个缺点，首次渲染会有一段时间的白屏原因是首次渲染时需要加载一堆资源，如js、css、图片。很多优化策略，最终目的是提高这些资源的加载速度。但是如果遇上网络慢的情况，无论优化到极致还是需要一定加载时间，这时就会出现白屏现象。
首先加载是index.html页面，其是没有内容，就会出现白屏。如果
里面有内容，就不会出现白屏。所以我们可以在里添加首屏的静态页面。等真正的首屏加载出来后就会把这块结构都替换掉，给人一种视觉上的误差，就不会产生白屏。
11、组件库的按需引入
作者：红尘炼心
链接：https://juejin.cn/post/6857856269488193549
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。