vue性能优化有哪些 vue性能优化总结 _经验知识

Vue 框架通过资料双向绑定和虚拟 DOM 技术。帮我们处理了前端研究中最脏最累的 DOM 操作部分。我们不再需要去思考怎么样操作 DOM 以及怎么样最高效地操作 DOM；但 Vue 项目中依然存在项目首屏优化、Webpack 编译配置优化等问题。所以我们依然需要去关注 Vue 项目性能方面的优化。使项目有着更高效的性能、更加好的客户体验。
本文是作者通过实际项目的优化实践进行总结而来。希望读者读完本文。有一定的启发思考。从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成：
Vue 代码层面的优化；
webpack 配置层面的优化；
基础的 Web 技术层面的优化。
一、代码层面的优化1.1、v-if 和 v-show 区分使用场景
v-if 是真正的条件渲染。因为它会保证在更改过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假。则什么也不做——直到条件第一次变为真时。才会开始渲染条件块。v-show 就无脑得多。不管初始条件是什么。元素总是会被渲染。并且只是无脑地基于 css 的 display 属性进行更改。所以。v-if 适合用来在运行时很少变化条件。不需要频繁更改条件的场景；v-show 则适合用来需要超级频繁更改条件的场景。
1.2、computed 和 watch 区分使用场景computed：是计算属性。依赖其它属性值。并且 computed 的值有缓存。只有它依赖的属性值发生变化。下一次获取 computed 的值时才会从头开始计算 computed 的值；watch：再多的是「研究」的作用。类似于某些资料的监听回调。每次监听的资料变化时都会执行回调进行后面操作；使用场景：
当我们需要进行数值计算。并且依赖于其它资料时。大概使用 computed 。因为应该使用 computed 的缓存特性。避免每次获取值时。都要从头开始计算；
当我们需要在资料变化时执行异步或开销较大的操作时。大概使用 watch 。使用 watch 选项允许我们执行异步操作 ( 访问一个 API ) 。压制我们执行该操作的频率。并在我们获取最终结果前。设置中间状态。这些都是计算属性无法做到的。
1.3、v-for 遍历一定为 item 添加 key 。且避免同一时间使用 v-if（1）v-for 遍历一定为 item 添加 key在列表资料进行遍历渲染时。需要为每一项 item 设置唯一 key 值。方便 Vue.js 内部机制准确寻找该条列表资料。当 state 更新时。新的状态值和旧的状态值对比。较快地定位到 diff。（2）v-for 遍历避免同一时间使用 v-ifv-for 比 v-if 第一时间级高。如果每一次都需要遍历整个数组。将会波及速度。尤其是当之需要渲染很小一部分的时候。必须状态下大概代替成 computed 属性。讲解

文章插图
不讲解：

文章插图
1.4、长列表性能优化Vue 会通过 Object.defineProperty 对资料进行劫持。来实现视图响应资料的变化。然而一些时候我们的组件只是精粹的资料展示。不会有所有变化。我们就不需要 Vue 来劫持我们的资料。在超级多的资料展示的状态下。这能够很显然的减少组件初始化的时间。那怎么样禁止 Vue 劫持我们的资料呢？应该通过 Object.freeze 方法来冻结一个对象。只要被冻结的对象就再也不应该被改写了。

文章插图
1.5、事件的销毁Vue 组件销毁时。会全自动清理它与其它实例的连接。解绑它的全部指令及事件监听器。但是仅限于组件本身的事件。如果在 js 内使用 addEventListene 等方法是不会全自动销毁的。我们需要在组件销毁时手动移除这些事件的监听。以免造成内存泄露。如：

文章插图
1.6、图片资源懒加载对于图片过多的页面。为了加速页面加载速度。所以一大半时候我们需要将页面内未出现在可视地区内的图片先不做加载。等到滚动到可视地区后再去加载。这样对于页面加载性能上会有蛮大的提高。也提高了客户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：（1）安装插件
import VueLazyload from 'vue-lazyload'
（2）在入口文件 man.js 中引入并使用
import VueLazyload from 'vue-lazyload'
之后再 vue 中直接使用
Vue.use(VueLazyload)
或者添加自己定义设置选项
Vue.use(VueLazyload, {preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1})