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