![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
你做过哪些vue的优化?
Fx_cap
前端
展开
-
CSS实现虚拟列表
使用CSS实现虚拟列表原创 2022-06-23 10:34:47 · 499 阅读 · 0 评论 -
虚拟列表
先更新代码,js注释很详细,后续更新详细的虚拟列表说明 <template> <div class="list-view" @scroll="handleScroll"> <!-- 撑起这个列表,让列表的滚动条出现 --> <div class="list-view-phantom" :style="{ height: contentHeight, }" ></div&.原创 2022-04-14 18:00:12 · 436 阅读 · 0 评论 -
重绘、回流
1、简单说一下页面的重绘和回流 简单理解: 一个房间只是改变软装(更换壁纸)就是重绘、而进行硬装(改变房屋结构)就是回流 回流: 重新构建页面结构 当 render tree 的一部分或者全部的元素改变了自身的宽高、布局、显示或隐藏、或者元素内部的文字结构发生变化、导致需要重新构建页面的时候、回流就产生了 重绘: 改变元素外观 当一个元素自身的宽高、布局、及显示或隐藏没有改变、只是改变了元素的外观风格时、就产生重绘例如改变元素的背景颜色 background-color 结论: 重绘不一原创 2022-04-13 22:13:39 · 306 阅读 · 0 评论 -
渐进增强、优雅降级
渐进增强: 针对低版本浏览器进行页面重构,保证基本的功能的情况下,再针对高版本浏览器进行效果、交互等方面的改进和追加功能,以达到更好的用户体验 优雅降级: 一开始就构建完整的功能,然后再针对低版本的浏览器进行兼容 ...原创 2022-04-13 22:04:44 · 230 阅读 · 0 评论 -
vue3组件批量注册
组件内起名字 <template> <div>M1</div> </template> <script> export default { name: "M1", }; </script> <style></style> component/index.js中 const requireAll = require.context("@/components", true, /\.vue$/原创 2022-03-21 16:52:17 · 955 阅读 · 0 评论 -
面试题:说一个常见的内存泄漏场景
在封装方法时,在js文件中引用了vue组件,即便vue组件在destory时被销毁了,但是在外部js文件内时不会被销毁的,所以这样还是会造成内存泄漏, 通常会在外部js文件内,也要写一个销毁的方法暴露出去,在vue组件的destory生命周期钩子函数内执行 ...原创 2022-03-04 16:18:08 · 290 阅读 · 0 评论 -
Vuex的数据状态持久化工具vuex-persistedstate
vuex的可以进行全局的数据管理,但是一刷新就清空了,这很不友好,当然我们可以把vuex的数据状态存储在本地,但每次操作又很麻烦,所以强烈推荐大家使用插件vuex-persistedstate 安装 npm install vuex-persistedstate --save vuex-persistedstate默认是将数据存储在localStorage的 在store/index.js中 import Vue from 'vue'; import Vuex from 'vuex'; imp原创 2021-12-22 17:55:43 · 407 阅读 · 0 评论 -
vue的优化
尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher v-if和v-for不能连用 如果需要使用v-for给每项元素绑定事件时使用事件委托 SPA 页面采用keep-alive缓存组件 在更多的情况下,使用v-if替代v-show key保证唯一 使用路由懒加载、异步组件 防抖、节流 第三方模块按需导入 长列表滚动到可视区域动态加载(可以使用第三方插 件vueuse 提供的 useIntersectionObserver ) 图片懒加载 (自定义指令和 .原创 2021-08-27 17:48:26 · 60 阅读 · 0 评论