你了解哪些Vue性能优化方法?

    科技2022-07-10  100

    1、路由懒加载

    2、keep-alive缓存页面

    3、使用v-show复用DOM

    4、v-for遍历避免同事使用v-if // 使用computed属性过滤需要显示的数据项

    5、长列表性能优化 (1)如果列表是纯粹的数据展示,不会有任何改变,就不需要做相应话, 使用object.freeze(data) (2)如果是大数据长列表,可采用虚拟滚动,只渲染少部分区域的内容,参考vue-virtual-scroller、vue-virtual-scroll-list

    6、事件的销毁 vue组件销毁时,会自动解绑它的全部指令及事件监听,但是仅限于组件本身的限制

    7、图片懒加载

    8、第三方插件按需引入 像element-ui这样的第三方组件库可以按需引入避免体积太大。

    9、无状态的组件标记为函数式组件 只是无状态展示性组件。没有组件实例,运行时消耗资源较小

    <template functional> <div class='cell'> <div v-if="props.value" class="on"></div> <section v-else class="off"></section> </div> </template> <script> export defalut { props: ['value'] } </script>

    10、子组件分割 子组件耗时任务,切割为独立子树,独立为自己的渲染,切割为子树 有动态内容,自己管自己的渲染不用管其它地方,多一个watcher自己管自己。

    11、变量本地化

    12、SSR

    Processed: 0.034, SQL: 8