最近前后端分离大行其道，苦了后端人员，需要学习的东西还不少。于是到网上看了看前端的教程。没想到前端发展到今天变得如此复杂。前端也包括权限和路由的东西。不过整体看上去似曾相识，只是需要熟悉些新的语法。昨天晚上试用了一下element ui。感觉这个框架还是不错的。学了vue，再也不想用jQuery了。不再直接操作dom，而是跟数据打交道。今后打算好好学习下vue，网上做出来的后端框架还是不少的。下面
概念：虚拟dom相当于在js和真实的dom中间加了一个缓存，利用dom 的diff算法避免了没有必要的dom操作，从而提高了性能。为什么一定要用虚拟dom？ 你用传统的原生api或jquery去操作dom时，浏览器会从构建dom树开始，从头到尾执行一遍流程。真实dom的执行流程：用js对象表示真实的dom结构，当状态发生变化的时候，会重新创建一
转载
2024-09-24 14:38:24
45阅读
目录一、Vue+Element ui1、Vue+Element ui1、show-overflow-tooltip属性设置宽度2、this.$refs使用方法3、vue前端debug4、vue前后端环境交互一、Vue+Element ui1、Vue+Element ui1、show-overflow-tooltip属性设置宽度:show-overflow-tooltip="true"，该属性可以让
转载
2024-09-23 20:54:07
86阅读
模板转换成视图的过程在底层实现中Vue会将模板编译成渲染函数，当然我们也可以不写模板，直接写渲染函数，以获得更好的控制。 渲染函数：渲染函数是用来生成Virtual DOM的；VNode虚拟节点：vnode可以理解成dom节点的描述对象，它描述了应该怎样去创建真实的DOM节点；patch(patching算法)：虚拟DOM最核心的部分，它可以将vnode渲染成真实的DOM。这
转载
2024-06-21 13:46:01
24阅读
后台开发离不开权限，不同的用户登录，根据不同的权限，可以访问不同的管理目录。但在使用 vue-element-template 里内置的权限模块功能后，发现作者提供的权限模块扩展性不是很好，所以这篇文章就是记录我是如何基于作者原有的权限模块进行的一次重构。为什么要重构开篇的时候说了，因为扩展性不是很好，那具体是什么扩展性不好呢？我们先来看下作者原有的权限模块实现思路是怎么样的。
转载
2024-07-02 07:15:25
214阅读
面试的时候面试官会问我这个问题，这个问题也是会被经常问到的所以更新在博客以备不时之需：虚拟列表的使用场景如果我想要在网页中放大量的列表项，纯渲染的话，对于浏览器性能将会是个极大的挑战，会造成滚动卡顿，整体体验非常不好，主要有以下问题：页面等待时间极长，用户体验差CPU计算能力不够，滑动会卡顿GPU渲染能力不够，页面会跳屏RAM内存容量不够，浏览器崩溃1. 传统做法对于长列表渲染，传统的方法是使用懒
转载
2024-03-27 13:56:20
152阅读
首先你要有两个路由表 一个是不管什么角色都能访问的路由表，还有一个是需要控制判断权限才能访问的路由表公共路由表：export const routes = [{
path: '/',
name: '',
redirect: '/login',
component: Login
},
{
path: '/login',
name:
转载
2024-06-05 05:27:57
54阅读
前言今年随着Vue3的成为正式版本，我们的Element-plus也有了稳定版，那今天我们主要是讲一个功能。我们先来看一下Element-plus新出现的一个玩意: image.png
虚拟列表选择器？这是啥玩意，还能虚拟？大家都知道Vue的虚拟dom，我用简单的话讲述一下：大概就是一棵以 JavaScript 对象作为基础的树，每一个节点称为 VNode ，用对象属性来描述节点，实际
引言相信大家经常会遇到展示一堆数据的需求，几十条数据还好，要是几百上千条，甚至带上了图片。那就会卡得不行。这时候就需要按需加载。按需加载有懒加载和虚拟列表。懒加载：通过JS滚动或触底触发事件来加载更多的数据，类似分页。虚拟列表：只加载可视区域的数据，通过计算长度区间反推需要加载的数据来实现假滑动。二者异同很明显，懒加载虽然也有优化，可是当用户疯狂下拉刷新时候最后还是会卡，虽然很难有那种场景。懒加载
转载
2024-03-27 08:35:42
432阅读
当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10w dom节点,是极其耗费时间的,那我的Macbook air举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的 我们可以用虚拟列表解决这个问题 一步步来 首先看一下效果这是data中的数据data() {
retur
转载
2023-08-24 13:30:44
511阅读
Vue 虚拟列表是一种用于优化大型列表的渲染性能的技术。它通过只渲染可见部分的列表项，以及通过动态添加和删除DOM元素的方式来减少DOM操作，从而提高应用程序的响应速度和性能。Vue 虚拟列表的实现依赖于一些关键技术，包括虚拟滚动、缓存池和动态渲染。虚拟滚动是 Vue 虚拟列表的核心技术之一。它通过仅在屏幕上显示可见部分的列表项，而不是整个列表来减少渲染所需的时间和资源。虚拟滚动的实现涉及到计算列
虚拟列表什么是虚拟列表?为什么要使用虚拟列表虚拟列表如何实现 什么是虚拟列表?首先给出定义，什么是虚拟列表。 虚拟列表在开发者眼中并不能是一个真正的列表，它可以看作是可视区域中的几条数据，并且可以监听到用户的滚动事件来动态渲染可视区域的显示数据。 但是这个可滚动的可视区域在用户眼中，就是一个列表。为什么要使用虚拟列表如果有一个长达20w的数据需要渲染。可能由于业务需求或者是被万恶的产品经理压迫导
转载
2024-03-27 23:23:49
77阅读
vue中异步函数async和await的用法一，异步函数async1.1，async作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数。就是在函数前面加上async 关键字，来表示它是异步的，那怎么调用呢？async 函数也是函数，平时我们怎么使用函数就怎么使用。
转载
2024-04-09 11:53:13
193阅读
为什么需要使用
虚拟列表?参考：https://github.com/chenqf/
vue-virtual-listview 假设我们的长列表需要展示10000条记录，我们同时将10000条记录渲染到页面中，先来看看需要花费多长时间：<button id="button">button</button><br>
<ul id="container">&
转载
2024-04-10 13:26:51
57阅读
当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10w dom节点,是极其耗费时间的,那我的Macbook air举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的我们可以用虚拟列表解决这个问题一步步来首先看一下效果这是data中的数据data() {
return {
lis
转载
2024-04-22 23:42:47
520阅读
场景因为项目中数据量有时候过于庞大，使用elementui的select组件时，会导致下拉框加载数据蛮并且卡顿甚至于卡死，为解决这个问题，发现vue-virtual-scroll-list这个插件，地址 https://www.npmjs.com/package/vue-virtual-scroll-list ，用来模拟虚拟滚动，从而解决问题。安装npm install vue-virtual-s
转载
2024-04-03 14:35:32
2445阅读
网上实现虚拟dom的文章也很多了，本项目代码结构、函数等完全按照vue@2.5.17源码思路实现，主要也是为了总结一下自己的学习。从图中可以看到，这个dom树改变了许多地方，但是只新建了一个div元素，这说明其余的元素只是做了移动和文本内容的修改，这比重新渲染整棵dom树要节省很多资源。不多解释了，下面直接看代码吧。因为vue是通过模版解析之后生成的虚拟dom，我主要为了学习虚拟dom，没有做模版
转载
2024-08-13 15:10:52
110阅读
vue虚拟DOM原理了解一、什么是虚拟DOM？二、为什么要使用虚拟 DOM？三、虚拟DOM的作用四、虚拟DOM的实现原理1、snabbdom2、snabbdom模块3、snabbdom源码概述4、Snabbdom 源码实现 一、什么是虚拟DOM？虚拟 DOM(Virtual DOM) 是由普通的 JavaScript 对象来描述 DOM对象状态的变化首先作用于虚拟 DOM，最终映射到真实的DOM
转载
2024-06-29 20:44:26
193阅读
key的原理一、虚拟DOM中key的作用二、对比的规则1.旧虚拟DOM中找到了与新虚拟DOM相同的key:2.旧虚拟DOM中没有找到了与新虚拟DOM相同的key:三、用index作为key1.实例讲解2.总结（用index作为key可能会引发的问题）四、用id作为key1.实例讲解2.总结（开发中如何选择key？） 一、虚拟DOM中key的作用key是虚拟对象的标识,当数据发生变化时，Vue会根
转载
2024-07-17 10:10:59
105阅读
一、前言前端的性能瓶颈那就是页面的卡顿，当然这种页面的卡顿包含了多种原因。 例如HTTP请求过多导致数据加载变慢，下载的静态文件非常大导致页面加载时间很长，js中一些算法响应的时间过长等。很多前端工程师都花费很多的精力在dom渲染上来优化页面加载。二、浏览器渲染瓶颈首先大家要明重绘和回流(重排)的概念：重绘(repaint)：当Render Tree 中的一些元素需要更新元素本身的属性，只影响外观
转载
2024-06-03 14:58:18
656阅读
