十五、Vue性能优化

一、路由懒加载

const router = new VueRouter({
    routes: [
        {
            path: '/foo',
            component:()=> import('./Foo.vue');
        },
    ]
})

整体打包时候，主包体积大幅度缩减；使用的时候按需加载业务模块。

二、keep-alive 缓存页面

2.1.0 新增

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

include 和 exclude prop 允许组件有条件地缓存。

二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

三、使用v-show复用DOM

<template>
    <div class="all">
        <!--这种情况，使用v-show复用dom 比v-if效果要好-->
        <div v-show="value" class="on">
          <Heavy n = "10000"></Heavy>
        </div>
    </div>
</template>

避免太重的组件重新渲染

四、v-for 避免同时使用v-if

1、使用计算属性处理 list 列表

2、或者在使用模板渲染前对 list数据提前js处理

<ul>
    <li v-for="user in  activeUsers" :key="user.id">
        {{user.name}}
    </li>
</ul>


<script>
    export default{
        computed: {
            activeUsers () => this.users.filter(user=>user.isActive);
        }
    }
</script>

五、长列表性能优化

1、如果列表是纯粹的数据展示，不会有任何变化，就不需要做响应式化。（ 商品列表，订单列表）。

export default{
	data: () =>({
		users:[],	
	})
	async created() {
		const users = await axios.get("/xxx");

		this.users = Object.freeze(users);
	}
}

2、如果是大数据长列表，可以采用虚拟滚动，只渲染少部分区域内的内容

参考：

vue-virtual-scroller

vue-virtual-scroll-list

利用cpu 换内存 策略！！！

六、事件的销毁

Vue 组件销毁时，会自动解绑它的全部指令 以及 事件监听器；但是仅限于组件本身的事件。

befoeDestory 时候，移除定时器

七、图片懒加载

v-lazy

参考： vue-lazyload

八、第三方库的按需加载

element-ui

iview

antd

九、vue 的函数是组件，傻瓜组件

template 加上 functional ; 只有一个 props属性参数

<template functional>
	<div>...</div>
</template>

十、子组件分割

每个组件都有一个Watcher

把经常变、或者执行多的 内容单独拆出去一个成为 一个子组件。 单独一个 Watcher 管理

十一、变量的本地化

使用本地 变量 名称 缓存一下 this.xxx；

const name = this.name;

因为 使用 this.xxx 数据监听 get 会触发！