Vue项目性能优化—实践指南.pdfVIP

Vue项⽬性能优化—实践指南 Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最⾼效地操作 DOM；但 Vue 项⽬中仍然存在项⽬⾸屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项⽬性能⽅⾯的优化，使项⽬具有更⾼效的性能、更好的⽤户体验。本⽂是作者通过实际项⽬的优化实践进⾏总结⽽来，希望读者读完 本⽂，有⼀定的启发思考，从⽽对⾃⼰的项⽬进⾏优化起到帮助。本⽂内容分为以下三部分组成： Vue 代码层⾯的优化； webpack 配置层⾯的优化； 基础的 Web 技术层⾯的优化。 ⾟苦整理良久，还望⼿动点赞⿎励~ github地址为：，汇总了作者的所有博客，也欢迎关注及 star ~ ⼀、代码层⾯的优化 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-if v-for ⽐ v-if 优先级⾼，如果每⼀次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很⼩⼀部分的时候，必要情况下应该替换成 computed 属性。 推荐： {{ }} computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) }}复制代码 不推荐： {{ }} 复制代码 1.4、长列表性能优化 Vue 会通过 Object.defineProperty 对数据进⾏劫持，来实现视图响应数据的变化，然⽽有些时候我们的组件就是纯粹的数据展⽰，不会 有任何改变，我们就不需要 Vue 来劫持我们的数据，在⼤量数据展⽰的情况下，这能够很明显的减少组件初始化的时间，那如何禁⽌ Vue 劫持我们的数据呢？可以通过 Object.freeze ⽅法来冻结⼀个对象，⼀旦被冻结的对象就再也不能被修改了。 exportdefault{data:()=({users: {} }),asynccreated() {constusers =awaitaxios.get(/api/users);this.users =Object.freeze(users); }};复制代码 1.5、事件的销毁 Vue 组件销毁时，会⾃动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本⾝的事件。 如果在 js 内使⽤ addEventListene 等⽅式是不会⾃动销毁的，我们需要在组件销毁时⼿动移除这些事件的监听，以免造成内存泄露，如：