在使用vue开发的过程中,我们会对项目做一些性能优化,下面我来分享一下我的经验和方法。希望对你有帮助。1.v-if和v-show区分使用场景:
v-if是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听和子组件适当地被销毁和重建;
也是惰性的:如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。【vue项目性能优化】
v-show:就简单多,不管初始条件是什么,元素总会是被渲染,并且只是简单地基于css的display属性进行切换。所以,v-if适用于在运行时很少百变条件,不需要频繁切换条件的场景;
v-show则适用于需要非常频繁切换条件的场景。2.v-for遍历避免同时使用v-if
v-for比v-if优先级高,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候,必要情况下替换成 computed 属性。//推荐
-
{{item.name}}
computed:{
ChenArr:function(){
return this.items.filter(function(item){
return item.isActive
})
}
}//不推荐
-
{{item.name}}
2.事件的销毁
vue组件销毁时,会自动清理它与其它实例的连接,解绑它的全部指令及事件监听器,但是仅限于组件本身的事件。如果在js内使用 addEventListene 等方式是不会自动销毁的,我们需要在组件销毁时手动溢出这些事件的监听,这样做的好处是便面造成内存泄漏,如:mounted(){
addEventListene("click",this.click,false);
},
beforeDestroy() {
removeEventListener('click', this.click, false)
}3.第三方插件的按需导入
我们在项目中经常会需要引入第三方插件,如果我们直接引入整个插件,会导致项目的体积太大,我们可以借助 babel-plugin-component ,然后可以只引入需要的组件,以达到减小项目体积的目的。以下为项目中引入 element组件库为例://1.安装
npm i babel-plugin-component -D//2.修改 .babelrc
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}//3.在main.js中添加如下代码:
import Vue from 'vue';
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)4.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。
推荐阅读
- vue社交软件分享
- vue|vue+xlsx实现表格的导入导出
- js|jsonp跨域
- vue|vue打包后dist的使用
- electron|electron修改vue项目打包后的exe图标
- vue|vuex的使用
- vue|vue中代理解决跨域
- vue.js|vue开发搜索框防抖的优化和日常报错,
- vue.js|vue中搜索实现防抖