前提:在我负责一个模块中，有一个是日志管理模块，它会输出很多很多的操作的日志，起初与后台对接对接的时候并没有考虑到性能渲染问题，只是简单的用v-for把所有的数据都渲染出来，那么这样导致的后果就是页面卡顿，这个原因是你的模块中渲染出太多的DOM节点导致，为了避免这样的问题我采取了虚拟列表来进行渲染。什么是虚拟列表虚拟列表就是一个按需渲染的过程，简单来说就是渲染你所看到的内容，对于你非可视的内容不进
转载
2024-03-11 15:12:12
228阅读
介绍虚拟列表主要是解决当列表数量较多时（比如上十万条数据、百万万条数据），页面内引入大量的 DOM 元素导致页面卡顿的情况，当然对于列表数量没达到足够的量级（主要根据自己的业务来衡量）但是想提高首屏加载速度时，也可以选择按需加载列表，类似于图片的懒加载，并非一次性渲染全部列表，而在滚动到页面底部的时候，再去加载剩余的数据。但是对于业务需求就是一次性返回所有数据的时候选择用虚拟列表去加载更合适。那么
转载
2023-12-25 08:21:29
709阅读
vue中实现一个虚拟列表应用场景前端的业务开发中会遇到不使用分页方式来加载长列表的需求。如在数据长度大于 1000 条情况，DOM 元素的创建和渲染需要的时间成本很高，完整渲染列表所需要的时间不可接受，同时会存在滚动时卡顿问题；解决该卡顿问题的重点在于如何降低长列表DOM渲染成本问题，文章将介绍通过虚拟列表渲染的方式解决该问题。为什么需要虚拟列表虚拟列表是对长列表的一种优化方案。在前端开发中，会碰
转载
2023-09-25 17:28:45
641阅读
vue虚拟列表-vue-virtual-scroll-list vue虚拟列表-vue-virtual-scroll-listvue虚拟列表-vue-virtual-scroll-list使用场景安装使用 使用场景因为公司做了类似于百度网盘的竞品，所以用户如果上传了很多的文件，就会造成页面DOM元素的过多，然后因为需要操作DOM元素，所以页面会变得很卡。所以用虚拟列表来解决。安装安装的话这个插件有
转载
2024-01-12 06:41:40
1391阅读
Vue 虚拟DOM 和 Diff算法 vue2.0加入了virtual dom，有点向react靠拢的意思。vue的diff位于patch.js文件中，复杂度为O(n)。 了解diff过程，我们先从虚拟dom开始。 虚拟dom 所谓的virtual dom，也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点 dom diff
在经过初始化阶段之后，即将开始组件的挂载，在挂载之前有必要了解下虚拟Dom 的概念。我们知道vue@2.0 开始引入了虚拟dom， 主要解决的问题是， 大部分情况下可以降低使用Javascript 去操作跨线程的庞大dom所需要的昂贵性能，让dom 操作的性能更高效； 以及虚拟Dom可以用于SSR以及跨端使用。 虚拟Dom, 顾明思议并不是真实的Dom, 而是使用javascript 的对象来对真
转载
2023-12-29 19:45:02
118阅读
前言本文主要介绍长列表的一种优化方案：虚拟列表。社区中虚拟列表的实现方案已经有很多了，所以本文主要是对社区中一些技术大佬的实现方案进行更加详尽的刨析，以便我们能够更加深入理解虚拟列表的原理。虚拟列表的作用前言中我们其实已经说明了虚拟列表的主要作用，即他是长列表的一种优化方案。传统的长列表，主要用于处理一些数据展示且不进行分页的业务场景，对于这种长列表来说，如果加载的数据量很庞大的话，浏览器回流和重
转载
2024-06-19 06:19:01
1850阅读
虚拟DOM和diff算法简述diff 算法
以装修房子为例，如果我们仅需要在客厅新添一座沙发或者将卧室的床换个位置。那么将整个房子重新翻修显然是不切实际的，我们通常的做法是在原先装修的基础上做微小的改动即可。对于 DOM 树来讲，也是同样的道理，如果仅仅是新增了一个标签或者修改了某一个标签的属性或内容。那么引起整个 DOM 树的重新渲染显然是对性能和资源的极大浪费，虽然我们的计算机每秒能进行上亿次
前言今年随着Vue3的成为正式版本，我们的Element-plus也有了稳定版，那今天我们主要是讲一个功能。我们先来看一下Element-plus新出现的一个玩意: image.png
虚拟列表选择器？这是啥玩意，还能虚拟？大家都知道Vue的虚拟dom，我用简单的话讲述一下：大概就是一棵以 JavaScript 对象作为基础的树，每一个节点称为 VNode ，用对象属性来描述节点，实际
作者：是蹄蹄吖使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉，它扮演着很重要的角色。由于小编接触Vue比较多，React只是浅学，所以本篇主要针对Vue来展开介绍，带你一步一步搞懂它。虚拟DOM什么是虚拟DOM？虚拟DOM(Virtual Dom)，也就是我们常说的虚拟节点，是用JS对象来模拟真实DOM中的节点，该对象包含了真实DOM的结构及其属性，用
节点内容{{ foo }}实例化vue
const app = new Vue({
el:“#app”,
data:{
foo:“foo”
}
})
vue源码中render函数渲染虚拟DOM
(function anonymous() {
with(this){return _c(‘div’,{attrs:{“id”:“app”}},[_c(‘p’,{staticClass:“p”},
[_v(
# 教你如何实现 Vue3 虚拟化树形控件
在前端开发中，展示大型数据集时常常需要使用虚拟化技术，以提升性能和用户体验。本文将为你详细讲解如何在 Vue3 中实现一个虚拟化树形控件。本教程将从流程的角度，逐步引导你实现这一控件。
## 总体流程
我们将按照以下步骤实现虚拟化树形控件：
| 步骤 | 描述 |
|---|---|
| 1 | 创建 Vue3 项目 |
| 2 | 设计树形控件
原创
2024-09-11 04:01:42
925阅读
初步树形图片html<div class="tree_box " > <div v-for="(item,index) in tree_arr"> <div class="tree_parent row_flex al_flex "> &
//vue的核心就是双向绑定和虚拟dom,双向绑定在之前的文章点击这里查看双向绑定已经介绍过了,所以今天来学习一下虚拟dom一、虚拟dom是什么?//这里将虚拟dom分成两个部分解读真实的dom //上面这个就是真实的dom虚拟dom总结:虚拟dom是js在内存中创建的一个dom树二、为什么要有虚拟dom要了解为什么要有虚拟dom,就要探讨一下浏览器渲染引擎工作流程。实际上,当浏览器生成真实的do
我下列的所有代码都在该 Gitee 仓库中：https://gitee.com/ls1551724864/vue2-3-virtual-scroll-list 文章目录1、概述2、计时3、JavaScript线程4、分片加载5、vue-virtual-scroll-list6、自己实现vue虚拟列表① vue2Ⅰ. 项目搭建Ⅱ. 虚拟列表制作② vue3Ⅰ. 项目搭建Ⅱ. 虚拟列表制作 1、概述一
转载
2024-01-04 15:30:32
1542阅读
以前接触过一个后端管理系统， 叫H+， 偶尔发现它用的是左侧菜单没有滚动条， 于是， 我仔细查看dom， 发现H+ 左侧菜单的旁边有一个小的DIV， 我拖动的， 菜单竟然也能滚动， 我明白了， 这是用的虚拟滚动条， 我感觉这个挺不错的， 后来查看这个虚拟滚动条的源码， 发现是一个款叫做SlimScroll的基于jquery的库。由于我对Vue比较熟悉，所以，我想用Vue做一个类似的。不断踩坑一开始
转载
2024-07-29 09:28:32
482阅读
1. 什么是虚拟dom？虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树2.为什么需要虚拟dom？在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实DOM，由于真实DOM
为什么需要虚拟列表日常开发中，经常需要处理一个大数据量的列表，可能是需要展示、勾选等；如果我们用html原生的标签实现，性能到还好。但是现在大多都是用第三方组件库开发(例如element-ui)，以便提升开发效率；如果我们同时展示、勾选千条数据的时候，页面将会卡主，甚至崩掉；虚拟列表的方案正是为了解决这类前端大数据量展示、操作卡顿的问题；虚拟列表原理虚拟列表只对部分区域进行渲染，对区域外的DOM进
转载
2023-12-28 12:36:12
658阅读
认识Vue插件,插件模式可以有两种编写方式，对象类型和函数类型。对象类型中必须包含一个install的函数......
原创
2024-07-09 10:46:32
30阅读
如果您有疑问，请观看视频教程《Vue3实战教程》插件介绍插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例：jsimport { createApp } from 'vue'
const app = createApp({})
app.use(myPlugin, {
/* 可选的选项 */
})一个插件可以是一个拥有 i
