vue优化相关---性能篇

1.组件懒加载(异步加载组件)

在多个tab之间切换的时候，其余tab里面的组件就可以在需要的时候再异步加载~

有多个子路由的页面必用

components: { test: () => import("./Test.vue") },

components: {
    test: () => import(/* webpackChunkName:'test' */ "./Test.vue"),  //给加载js命名
},
选其一

处理加载状态的写法  

异步组件工程函数
const AsyncTest = () => ({
  component: import(/* webpackChunkName:'test' */ "./Test.vue"),
  loading: LoadingComponent, //加载时显示的组件
  error: ErrorComponent, //超时或错误时显示的组件
  delay: 200, //延迟
  timeout: 3000, //超时
});

2.路由懒加载

const Detail = () => import('../views/detail/Detail.vue');

3.组件缓存

include - 字符串或正则表达式。只有名称匹配的组件会被缓存

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max - 数字。最多可以缓存多少组件实例。

<keep-alive exclude="Detail"> 
      <router-view />
 </keep-alive>

4.函数式组件: 

一般适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。

创建函数式组件也很简单，只需要在模板添加 functional 声明即可

子组件

<template functional>

  <div class="list">

    <div

      class="item"

      v-for="item in props.list"

      :key="item.title"

      @click="props.itemClick(item)"

      :class="{ active: props.currentItem == item.title }"

    >

      <p>{{ item.title }}</p>

      <p>{{ item.content }}</p>

    </div>

  </div>

</template>

父组件

<template>

   <div class="tab">

      <list

        :list="list"

        :itemClick="(item) => (currentItem = item.title)"

        :currentItem="currentItem"

      ></list>

    </div>

</template>

import List from '@/components/List.vue'
export default {
    components: {
        List
    },
    data() {
        return {
            list: [{

          　　　　title: "title1",

          　　　　content: "content1",

        　　　　},

        　　　　{

          　　　　title: "title2",

         　　　　 content: "content2",

        　　　　},

        　　　　{

          　　　　title: "title3",

          　　　　content: "content3",

        　　　　}],

            currentItem: ''
        }
    }
}

5.组件复用

减少加载次数和资源, 提升用户体验

6.图片懒加载

1.安装vue-lazyload

yarn add vue-lazyload --save

2.在main.js中 导入

import VueLazyLoad from "vue-lazyload"

3.安装配置懒加载插件

Vue.use(VueLazyLoad, {
  loading: require("./assets/img/common/placeholder.png")
});

4.使用

:src换为 v-lazy

<img v-lazy="goodsItem.goods_small_logo" alt="" />

7.v-if / v-show

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

v-show只是简单的基于css切换;

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留

v-if有更高的切换消耗；

v-show有更高的初始渲染消耗

使用场景

　　频繁切换显示隐藏 , 则使用v-show 更合适些

　　需要同时控制多个元素显示隐藏时 , 使用v-if更合适些

8.v-if和v-for不建议在同一元素上一起用

当 Vue2.x 处理指令时，v-for 比 v-if 具有更高的优先级

在 vue 3.x 中，v-if 总是优先于 v-for 生效

同时用了v-if和v-for，那么，还是会根据整个数组生成所有组件块之后, 才判断v-if让多余的小时，非常耗资源

如果在虚拟dom中去做数据的处理 , 性能消耗较高

推荐在将数据处理好后进行挂载渲染

官方推荐解决方法 显示过滤-排序后的结果

10.扁平化 Store 数据结构

避免嵌套过深 , 频繁遍历获取数据,

11.持久化时写入数据的性能问

尽量减少直接写入 Storage 的频率：

1、多次写入操作合并为一次，比如采用函数节流或者将数据先缓存在内存中，最后在一并写入

2、只有在必要的时候才写入，比如只有关心的模块的数据发生变化的时候才写入

 12.滚动节流

1.在data中添加函数 scrollHandle

2.在 created 回调中将节流函数  执行赋值给 scrollHandle 

  created() {
    this.scrollHandle = this.throttle(this.scrollHandle2, 200);
  },

scrollHandle2 为需要节流执行的函数

 

 

3.滚动监听scrollHandle

@scroll.passive="scrollHandle"

 passive: 是告诉浏览器，监听器不会调用e.preventDefault()函数，不用来检查，可以提前生成手势，从而提高流畅性，通常用在move事件中

例子: 

<template>
  <div class="scroll">
    <div class="containers" @scroll.passive="scrollHandle">
      <div class="content">
        <ul>
          <li v-for="item in 100">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Scroll",
  components: {},
  data() {
    return {
      scrollHandle: () => {},
    };
  },
  created() {
    this.scrollHandle = this.throttle(this.scrollHandle2, 200);
  },
  methods: {
    scrollHandle2(e) {
      console.log(456);
    },
    throttle(func, delay = 800) {
      let lock = false;
      return (...args) => {
        if (lock) {
          return;
        }
        func(...args);
        lock = true;
        setTimeout(() => {
          lock = false;
        }, delay);
      };
    },
  },
};
</script>

<style scoped >
.containers {
  height: 500px;
  border: 1px solid #000;
  overflow: scroll;
}
</style>

 

...