Vue常用性能优化

避免响应所有数据

<template>
    <view>

    </view>
</template>

<script>
    export default {
        components: {},data: () => ({
            
        }),beforeCreate: function(){
            this.timer = null;
        }
    }
</script>

<style scoped>
</style>

函数式组件

• 一个简单的展示组件，也就是所谓的dumb组件。例如buttons、pills、tags、cards等，甚至整个页面都是静态文本，比如About页面。
• 高阶组件，即用于接收一个组件作为参数，返回一个被包装过的组件。
• v-for循环中的每项通常都是很好的候选项。

区分computed和watch使用场景

v-for添加key且避免同时使用v-if

• v-for遍历必须为item添加key，且尽量不要使用index而要使用唯一id去标识item，在列表数据进行遍历渲染时，设置唯一key值方便Vue.js内部机制精准找到该条列表数据，当state更新时，新的状态值和旧的状态值对比，较快地定位到diff。
• v-for遍历避免同时使用v-if，v-for比v-if优先级高，如果每一次都需要遍历整个数组，将会影响速度。

区分v-if与v-show使用场景

• 实现方式: v-if是动态的向DOM树内添加或者删除DOM元素，v-show是通过设置DOM元素的display样式属性控制显隐。
• 编译过程: v-if切换有一个局部编译卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件，v-show只是简单的基于CSS切换。
• 编译条件: v-if是惰性的，如果初始条件为假，则什么也不做，只有在条件第一次变为真时才开始局部编译， v-show是在任何条件下都被编译，然后被缓存，而且DOM元素保留。
• 性能消耗: v-if有更高的切换消耗，v-show有更高的初始渲染消耗。
• 使用场景: v-if适合条件不太可能改变的情况，v-show适合条件频繁切换的情况。

长列表性能优化

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

路由懒加载

{
  path: "/example",name: "example",//打包后，每个组件单独生成一个chunk文件
  component: () => import("@/views/example.vue")
}

服务端渲染SSR

优点

• 更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，如果SEO对站点至关重要，而页面又是异步获取内容，则可能需要服务器端渲染SSR解决此问题。
• 更快的内容到达时间time-to-content，特别是对于缓慢的网络情况或运行缓慢的设备，无需等待所有的JavaScript都完成下载并执行，用户将会更快速地看到完整渲染的页面，通常可以产生更好的用户体验，并且对于那些内容到达时间time-to-content与转化率直接相关的应用程序而言，服务器端渲染SSR至关重要。

缺点

• 开发条件所限，浏览器特定的代码，只能在某些生命周期钩子函数lifecycle hook中使用，一些外部扩展库external library可能需要特殊处理，才能在服务器渲染应用程序中运行。
• 涉及构建设置和部署的更多要求，与可以部署在任何静态文件服务器上的完全静态单页面应用程序SPA不同，服务器渲染应用程序，通常需要处于Node.js server运行环境。
• 更大的服务器端负载，在Node.js中渲染完整的应用程序，显然会比仅仅提供静态文件的server更加大量占用CPU资源CPU-intensive-CPU密集型，因此如果预料在高流量环境high traffic下使用，需要准备相应的服务器负载，并明智地采用缓存策略。

使用keep-alive组件

<keep-alive>
    <component v-bind:is="currentComponent" class="tab"></component>
</keep-alive>

模板预编译

SourceMap

配置splitChunksPlugins

使用treeShaking

第三方插件的按需引入

{
  "presets": [["es2015",{ "modules": false }]],"plugins": [
    [
      "component",{
        "libraryName": "element-ui","styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

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

Vue.use(Button)
Vue.use(Select)

https://github.com/WindrunnerMax/EveryDay

https://zhuanlan.zhihu.com/p/121000054
https://www.jianshu.com/p/f372d0e3de80
https://juejin.im/post/6844903887787278349
https://juejin.im/post/6844904189999448071
https://www.lagou.com/lgeduarticle/22278.html
https://www.cnblogs.com/mmzuo-798/p/11778044.html
https://blog.csdn.net/gtlbtnq9mr3/article/details/104889927