vue【常见性能优化篇】

复习记录

一、源码优化

代码模块化:提高组件的复用性
css也可以通过less和sass的自定义css变量来减少重复代码

for循环设置key值:
v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值
为了让Vue内部核心代码能更快地找到该条数据
当旧值和新值去对比的时候，可以更快的定位到diff。

Vue路由设置成懒加载:
加快首屏渲染速度（异步组件技术）

路由懒加载详情

使用keep-alive:
keep-alive是Vue提供的一个比较抽象的组件，可以使被包含的组件保留状态，或避免重新渲染
用来对组件进行缓存，从而节省性能。

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

keep-alive详解

二、打包优化

使用cdn的方式外部加载一些资源：
vue-router、axios等Vue的周边插件
在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。
然后在入门文件index.html里面通过cdn的方式去引入需要的插件。

减少图片使用，因为对于网页来说，图片会占用很大一部分体积
所以，优化图片的操作可以有效的来加快加载速度。
可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。

按需引入，咱们使用的一些第三方库可以通过按需引入的方式加载。
避免引入不需要使用的部分，无端增加项目体积。
比如在使用element-ui库的时候，可以只引入需要用到的组件。

其他

• this.$refs.input1 减少获取dom节点的消耗

<</span>div id="app">
    <</span>input type="text" ref="input1"/>
    <</span>button @click="add">添加</</span>button>
</</span>div>

<</span>script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
        }
    }
})
</</span>script>

• bus总线传值方式

在小项目中使用的非父子组件传值方法，即bus总线机制

//util.js
import Vue from 'vue'
export const Event = new Vue() // 定义一个事件总线
这样一个中央事件总线就定好了

//传递方
import { Event } from '../../utils/bus'  // 引入这个事件总线
export default {
  data() {
    userId: ''
  }
  watch: {
    userId() {  // 监听userId改变时触发事件，当然你可以在所有其他事件去触发$emit
      Event.$emit('changeUser', userId) // $emit接收参数，一个是触发的事件名，一个是携带的参数
    }
}

//接收方
import { Event } from '../../utils/bus' // 依然是把bus总线引进来
export default {
created() {
    Event.$on('changeSonRoute',showIndex => {  // $on接收发送方传给我们的数据
      console.log(showIndex)
    })
  }
}

后续再补充吧~