文章目录
-
- 1 v-if 和 v-show 的使用
- 2 computed 和 watch 区分使用
- 3 v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
- 4 纯显示长列表性能优化
- 5 事件的销毁
- 6 图片资源懒加载
- 7 路由懒加载
- 8 第三方插件按需引入
- 9 优化无限列表性能
- 10 服务端渲染 SSR or 预渲染
众所周知，Vue项目采用了数据双向绑定和虚拟DOM基础，在数据驱动代替DOM频繁渲染已经算是非常高效了，对开发者而言已经非常优化了，那为什么还会有Vue性能优化这一说呢？
因为目前Vue 2.x使用了webpack等第三方打包构建工具，并且支持其他第三方的插件，我们在项目中使用这些工具时可能不同的操作在运行或打包效率上会有不同的效果，下面就来详细说明优化的方向。
1 v-if 和 v-show 的使用
v-if为false的时候不会渲染DOM到视图，为true的时候才会渲染到视图；v-show不管初始条件是什么，元素总是会渲染到视图，只是简单地基于 CSS 的 display 属性进行切换。
最佳实践：频繁切换显示隐藏的元素采用2 computed 和 watch 区分使用v-show，很少改变使用v-if
computed： 是计算属性，依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值；watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
最佳实践：当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。3 v-for 遍历必须为 item 添加 key，且避免同时使用 v-if 现在不加
key一般会报错的，添加key可以方便 Vue内部机制精准找到该条列表数据。当更新时，新的状态值和旧的状态值对比，较快地定位到 diffv-for比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed属性。
-
{{ user.name }}
>
export default {
data () {
return { users: [] }
},
computed: {
adminUsers: function(){
return this.users.filter(()=>user.isAdmin)
}
}
}
4 纯显示长列表性能优化 对于只用来展示用的数据，不需要做vue做数据劫持，只需要冻结这个对象即可：
export default {
data () {
return {
users: []
}
},
created () {
axios.get('/api/users').then((res)=>{
this.users = Object.freeze(res.data.users)
})
}
}
5 事件的销毁 Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 如果在 js 内使用
addEventListene 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如：created() {
addEventListener('click', this.click, false)
},
beforeDestroy() {
removeEventListener('click', this.click, false)
}
6 图片资源懒加载 使用
vue-lazyload插件：安装
npm install vue-lazyload --save-dev
man.js 引用
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 或自定义
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
修改img标签
文章图片
【Vue|Vue2.x 项目性能优化之代码优化】PS：优化只是建议，需要考虑是否适合自己的项目，包括优化难度、影响范围、适用场景、是否影响别的模块、优化效果是否明显等等。适合自己的才是最好的！
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 百度手机助手存储资源优化实践
- 笔记|JavaScript JSON
- JavaScript 之 Proxy
- Bootstrap和AngularJS之间有什么区别（）
- JavaScript 数组常见操作
- JavaScript|JavaScript笔记（全）
- vue的学习之路|Vue学习之路（基础篇）
- 如何从PHP运行JavaScript（）
- javascript|js 摇骰子特效