关于vue.js:vue项目性能优化

在应用 vue 开发的过程中, 咱们会对我的项目做一些性能优化, 上面我来分享一下我的教训和办法。心愿对你有帮忙。

1.v-if 和 v -show 辨别应用场景:
v-if 是真正的条件渲染, 因为它会确保在切换过程中条件块内的事件监听和子组件适当地被销毁和重建; 也是惰性的: 如果在初始渲染时条件为假, 则什么也不做, 直到条件第一次变为真时, 才会开始渲染条件块。

v-show: 就简略多, 不论初始条件是什么, 元素总会是被渲染, 并且只是简略地基于 css 的 display 属性进行切换。

所以,v-if 实用于在运行时很少百变条件, 不须要频繁切换条件的场景;v-show 则实用于须要十分频繁切换条件的场景。

2.v-for 遍历防止同时应用 v -if
v-for 比 v -if 优先级高, 如果每一次都须要遍历整个数组, 将会影响速度, 尤其是当之须要渲染很小一部分的时候, 必要状况下替换成 computed 属性。

// 举荐
<ul>
 <li v-for="item in ChenArr" :key="item.id">
 {{item.name}}
 </li>
</ul>
computed:{ChenArr:function(){return this.items.filter(function(item){return item.isActive})
 }
}

// 不举荐
<ul>
 <li v-for="item in ChenArr" :key="item.id" v-if="item.isActive">
 {{item.name}}
 </li>
</ul>

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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。