[JavaScript知识库]vue常用优化方案

1、路由懒加载

原理：https://blog.csdn.net/weixin_44869002/article/details/106288371
将需要进行懒加载的子模块打包成独立的文件（children chunk）；
借助函数来实现延迟执行子模块的加载代码；

routes: [
  {
     path: '/home',
     component: () => import('./home.vue')
  }
]

2、keep-alive缓存页面

原理：https://www.jianshu.com/p/9523bb439950

根据LRU策略来设置缓存组件新鲜度，将很久未访问的组件从缓存中删除。

<keep-alive>
  <router-view>
</keep-alive>

3、使用v-show复用DOM，比v-if效果更好

4、v-for遍历避免使用v-if(可以将if放在父级别或者将数据过滤出来)

<ul>
  <li
    v-for="(item,index) in userList"
    :key="item.id">
    {{ item.name }}
  </li>
</ul>
computed: {
  userList: function () {
    return this.item.filter(function (item) {
         return item.isActive
    })
  }
}

5、长列表性能优化

5-1、如果列表大量数据，纯粹的展示，不需要响应话，Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

?5-2、采用虚拟滚动，只渲染少部分区域内容

<template>
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>
 
<script>
export default {
  props: {
    list: Array,
  },
}
</script> 
 
<style scoped>
.scroller {
  height: 100%;
}
 
.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
</style> 

参考以下开源项目 vue-virtual-scroll-list?和?vue-virtual-scroller 来优化这种无限列表的场景的。

6、事件销毁

vue组件销毁时，会自动解绑指令和事件监听，但仅限组件本身的事件。如果在 js 内使用 addEventListener/setInterval/setTimeout?等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露。

mounted() {
   this.timer = setInterval(this.get, 1000);
},
beforeDestroy() {
   clearInterval(this.timer);
}

7、图片懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：

<img v-lazy="/static/img/1.png">

8、第三方插件按需加载

像element-ui按需引入，避免体积过大

import vue from 'vue'
import { Button,Select } form 'element-ui'

vue.use(Button)
vue.use(Select)

9、子组件分割

创建一个组件的时候也创建了一个与之对应的watcher实例，
如果这个组件中的数据发生了变化，其实只会调用该组件的渲染函数
如果在应用程序中，合理切割组件的力度，比如说将一个经常发生数据变化的一块内容，切割成一个组件，将来频繁执行的渲染函数和更新函数和打补丁的范围就变得更小了.所以把数据变化频繁的提取为组件，可以有效地提升性能。

10、变量本地化