皮皮网

1.vue3编程如何实现简单表格组件?码数
2.Vue3源码系列 (四) ref
3.keep-alive的vue2和vue3的源码以及LRU算法
4.Vue3响应式数组使用ref还是reactive？
5.vue3 数组、对象响应式数据 之reactive 函数用法
6.vue3框架代码怎么实现表格数据动态增加?组操作

vue3编程如何实现简单表格组件?

       创建一个简单表格组件使用 Vue3，首当其冲的码数步骤是定义组件的结构。此步骤包括定义组件的组操作属性以及在模板中呈现数据。为了实现这一功能，码数我们需设计一个可复用的组操作直播平台源码骗局表格组件。在Vue3中，码数组件设计可借由接收属性实现动态渲染。组操作

       组件属性包括 headers 和 rows。码数headers属性设定为字符串数组，组操作用于配置列标题；rows属性设定为对象数组，码数每项代表一行，组操作包含id和cells属性。码数cells属性又是组操作个对象数组，每个对象对应一个单元格，码数拥有id和value属性，分别代表单元格的标识和值。

       在HTML模板中，我们通过v-for指令实现数据遍历。首先遍历headers属性，呈现列标题；其次，针对rows中的每一行，再次使用v-for遍历cells属性，展示单元格内容。同时，为了确保每一项元素的唯一性，应用了:key绑定。

       总结而言，使用Vue3构建简单表格组件的步骤涉及定义组件属性、在模板中使用v-for指令迭代数据，并通过:key绑定确保元素唯一。通过这种结构化的方法，我们能创建一个灵活且可复用的表格组件，满足多种应用场景需求。

Vue3源码系列 (四) ref

       一般而言，reactive用于定义响应式对象，而ref则用于定义响应式原始值。前文已介绍reactive，了解到通过Proxy对目标对象进行代理实现响应式，非对象原始值的响应式问题则由ref解决。

       ref和shallowRef各有三种重载，win10源码模块参数不同，都返回Ref/ShallowRef类型的值。createRef函数用于创建响应式值，类似reactive，createRef也是通过createReactiveObject创建响应式对象。而createRef返回RefImpl实例。

       RefImpl是ref的核心内容，构造函数接收两个参数，value是传入的原始值，__v_isShallow用于区分深层/浅层响应式，isShallow()函数利用这个属性做判断。在Ref中，_value属性存储实际值，dep属性存储依赖，在class的getter中通过trackRefValue(this)收集依赖，在setter中调用triggerRefValue(this, newVal)。

       trackRefValue用于收集Ref依赖，接收RefBase类型值，在ref函数中接收RefImpl实例。shouldTrack用于暂停和恢复捕获依赖的标志，activeEffect标记当前活跃的effect。内部调用trackEffects函数收集依赖，该函数来自effect模块。

       triggerRefValue函数用于触发Ref的响应式更新，triggerEffects函数来自effect模块。

       Vue3还提供了自定义的Ref，可以传入getter和setter，自由选择track和trigger时机。

       在setup函数中返回参数时，使用toRef创建ObjectRefImpl实例对响应式对象的某个属性进行解构。

       ObjectRefImpl通过_object属性引用原始响应式对象，在getter中通过_object访问值，依赖收集由_object完成；在setter中，通过引用_object达到赋值操作，从而在_object中触发更新。toRef判断入参是否是Ref，是则直接返回，否则返回ObjectRefImpl。toRefs对传入的对象/数组进行遍历并执行toRef解构。

keep-alive的代刷多级分销源码vue2和vue3的源码以及LRU算法

       0.LRU算法

       LRU（leastrecentlyused）根据数据的历史记录来淘汰数据，重点在于保护最近被访问/使用过的数据，淘汰现阶段最久未被访问的数据

       LRU的主体思想在于：如果数据最近被访问过,那么将来被访问的几率也更高

       经典的LRU实现一般采用双向链表+Hash表。借助Hash表来通过key快速映射到对应的链表节点，然后进行插入和删除操作。这样既解决了hash表无固定顺序的缺点，又解决了链表查找慢的缺点。

       但实际上在js中无需这样实现，可以参考文章第三部分。先看vue的keep-alive实现。

1.keep-alive

       keep-alive是vue中的内置组件，使用KeepAlive后，被包裹的组件在经过第一次渲染后的vnode会被缓存起来，然后再下一次再次渲染该组件的时候，直接从缓存中拿到对应的vnode进行渲染，并不需要再走一次组件初始化，render和patch等一系列流程，减少了script的执行时间，性能更好。

       使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

       当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

       从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

       在路由中设置keepAlive属性判断是否需要缓存。

2.vue2的实现

       实现原理：通过keep-alive组件插槽，获取第一个子节点。根据include、exclude判断是否需要缓存，通过组件的key，判断是否命中缓存。利用LRU算法，更新缓存以及对应的keys数组。根据max控制缓存的最大组件数量。

       先看vue2的实现：

exportdefault{ name:'keep-alive',abstract:true,props:{ include:patternTypes,exclude:patternTypes,max:[String,Number]},created(){ this.cache=Object.create(null)this.keys=[]},destroyed(){ for(constkeyinthis.cache){ pruneCacheEntry(this.cache,key,this.keys)}},mounted(){ this.$watch('include',val=>{ pruneCache(this,name=>matches(val,name))})this.$watch('exclude',val=>{ pruneCache(this,name=>!matches(val,name))})},render(){ constslot=this.$slots.defaultconstvnode:VNode=getFirstComponentChild(slot)constcomponentOptions:?VNodeComponentOptions=vnode&&vnode.componentOptionsif(componentOptions){ //checkpatternconstname:?string=getComponentName(componentOptions)const{ include,exclude}=thisif(//notincluded(include&&(!name||!matches(include,name)))||//excluded(exclude&&name&&matches(exclude,name))){ returnvnode}const{ cache,keys}=thisconstkey:?string=vnode.key==null?componentOptions.Ctor.cid+(componentOptions.tag?`::${ componentOptions.tag}`:''):vnode.keyif(cache[key]){ vnode.componentInstance=cache[key].componentInstance//makecurrentkeyfreshestremove(keys,key)keys.push(key)}else{ cache[key]=vnodekeys.push(key)//pruneoldestentryif(this.max&&keys.length>parseInt(this.max)){ pruneCacheEntry(cache,keys[0],keys,this._vnode)}}vnode.data.keepAlive=true}returnvnode||(slot&&slot[0])}}

       可以看到<keep-alive>组件的实现也是一个对象，注意它有一个属性abstract为true，是一个抽象组件，它在组件实例建立父子关系的时候会被忽略，发生在initLifecycle的过程中：

//忽略抽象组件letparent=options.parentif(parent&&!options.abstract){ while(parent.$options.abstract&&parent.$parent){ parent=parent.$parent}parent.$children.push(vm)}vm.$parent=parent

       然后在?created?钩子里定义了?this.cache?和?this.keys，用来缓存已经创建过的?vnode。

       <keep-alive>直接实现了render函数，执行<keep-alive>组件渲染的时候，就会执行到这个render函数，接下来我们分析一下它的大型同花顺软件公式源码实现。

       首先通过插槽获取第一个子元素的vnode：

constslot=this.$slots.defaultconstvnode:VNode=getFirstComponentChild(slot)

       <keep-alive>只处理第一个子元素，所以一般和它搭配使用的有component动态组件或者是router-view。

       然后又判断了当前组件的名称和include、exclude（白名单、黑名单）的关系：

//checkpatternconstname:?string=getComponentName(componentOptions)const{ include,exclude}=thisif(//notincluded(include&&(!name||!matches(include,name)))||//excluded(exclude&&name&&matches(exclude,name))){ returnvnode}functionmatches(pattern:string|RegExp|Array<string>,name:string):boolean{ if(Array.isArray(pattern)){ returnpattern.indexOf(name)>-1}elseif(typeofpattern==='string'){ returnpattern.split(',').indexOf(name)>-1}elseif(isRegExp(pattern)){ returnpattern.test(name)}returnfalse}

       组件名如果不满足条件，那么就直接返回这个组件的vnode，否则的话走下一步缓存：

const{ cache,keys}=thisconstkey:?string=vnode.key==null?componentOptions.Ctor.cid+(componentOptions.tag?`::${ componentOptions.tag}`:''):vnode.keyif(cache[key]){ vnode.componentInstance=cache[key].componentInstance//makecurrentkeyfreshestremove(keys,key)keys.push(key)}else{ cache[key]=vnodekeys.push(key)//pruneoldestentryif(this.max&&keys.length>parseInt(this.max)){ pruneCacheEntry(cache,keys[0],keys,this._vnode)}}

       如果命中缓存，则直接从缓存中拿vnode的组件实例，并且重新调整了key的顺序放在了最后一个；否则把vnode设置进缓存，如果配置了max并且缓存的长度超过了this.max，还要从缓存中删除第一个。

       这里的实现有一个问题：判断是否超过最大容量应该放在put操作前。为什么呢？我们设置一个缓存队列，都已经满了你还塞进来？最好先删一个才能塞进来新的。

       继续看删除缓存的实现：

functionpruneCacheEntry(cache:VNodeCache,key:string,keys:Array<string>,current?:VNode){ constcached=cache[key]if(cached&&(!current||cached.tag!==current.tag)){ cached.componentInstance.$destroy()}cache[key]=nullremove(keys,key)}

       除了从缓存中删除外，还要判断如果要删除的缓存的组件tag不是当前渲染组件tag，则执行删除缓存的组件实例的$destroy方法。

       ————————————

       可以发现，vue实现LRU算法是通过Array+Object，数组用来记录缓存顺序，Object用来模仿Map的功能进行vnode的缓存（created钩子里定义的this.cache和this.keys）

2.vue3的实现

       vue3实现思路基本和vue2类似，这里不再赘述。主要看LRU算法的实现。

       vue3通过set+map实现LRU算法：

constcache:Cache=newMap()constkeys:Keys=newSet()

       并且在判断是否超过缓存容量时的实现比较巧妙：

if(max&&keys.size>parseInt(maxasstring,)){ pruneCacheEntry(keys.values().next().value)}

       这里巧妙的利用Set是可迭代对象的特点，通过keys.value()获得包含keys中所有key的可迭代对象，并通过next().value获得第一个元素，然后进行删除。

3.借助vue3的思路实现LRU算法

       Leetcode题目——LRU缓存

varLRUCache=function(capacity){ this.map=newMap();this.capacity=capacity;};LRUCache.prototype.get=function(key){ if(this.map.has(key)){ letvalue=this.map.get(key);//删除后，再set，相当于更新到map最后一位this.map.delete(key);this.map.set(key,value);returnvalue;}return-1;};LRUCache.prototype.put=function(key,value){ //如果已经存在，那就要更新，即先删了再进行后面的setif(this.map.has(key)){ this.map.delete(key);}else{ //如果map中不存在，要先判断是否超过最大容量if(this.map.size===this.capacity){ this.map.delete(this.map.keys().next().value);}}this.map.set(key,value);};

       这里我们直接通过Map来就可以直接实现了。

       而keep-alive的实现因为缓存的内容是vnode，直接操作Map中缓存的位置代价较大，而采用Set/Array来记录缓存的key来模拟缓存顺序。

       参考：

       LRU缓存-keep-alive实现原理

       带你手撸LRU算法

       Vue.js技术揭秘

原文;/post/

Vue3响应式数组使用ref还是reactive？

       Vue3的新响应式系统以Proxy为核心，使得数组操作更为直观。本文着重讲解Vue3响应式数组的运用，以及ref与reactive的bbl买卖点指标源码选择策略。

       Vue3的数组响应式基于Proxy，当你对数组元素进行修改，回调函数会自动触发，实现动态更新，无需深入理解底层。这种设计极大地便利了数组操作，仅需直接操作数组即可。

       响应式数组在多个场景中都能派上用场，例如数据绑定、视图更新等。要理解ref和reactive的区别，它们都是Vue3创建响应式对象的方式。ref主要用于创建原始类型的可变数据，如数组，而reactive则适用于更复杂的对象，其内部会自动追踪和响应。

       看下面的示例代码，展示了如何通过ref创建响应式数组items，以及reactive创建响应式对象user。watch函数会追踪user的变化，并在值更新时执行回调，显示改动信息。

       总结来说，Vue3的响应式系统极大地简化了开发，熟练掌握ref和reactive的使用，能让你在处理数组和对象时得心应手，提高开发效率。因此，理解并掌握这些工具是每个Vue3开发者必备的技能。

vue3 数组、对象响应式数据 之reactive 函数用法

       Vue3 中，数组和对象的响应式数据管理主要通过 reactive 函数来实现。官方强调，这个过程是深度级别的，意味着它会自动追踪并处理所有嵌套的属性变化。得益于 ES Proxy 技术，reactive 函数返回的是一个代理对象，而非原始对象的直接引用。因此，官方建议在使用时，应专注于响应式代理，尽量避免直接操作原始数据，以确保数据的实时性和一致性。

       具体用法如下：首先，通过 reactive 函数对需要观察的数据进行包装，如

vue3框架代码怎么实现表格数据动态增加?

       Vue3框架中实现表格数据动态增加的步骤主要包括定义响应式数组和使用`push()`方法动态添加数据。在组件中，首先定义一个响应式数组`items`，利用`reactive()`函数将数组转化为响应式状态，便于Vue检测数组的变化并自动更新UI。在模板中，通过`v-for`指令遍历`items`数组，根据数组中的数据动态生成表格行，实现表格数据的动态展示。

       在`setup()`函数内，定义一个`addItem()`方法，此方法接受新的数据对象作为参数，并使用`push()`方法将其添加到`items`数组中。添加数据后，为了确保DOM的正确更新，使用`$nextTick()`方法进行异步更新。最后，将`items`数组和`addItem`方法暴露给模板，使得模板能够调用`addItem`方法添加新数据，实现表格数据的动态增加功能。

       通过上述步骤，在Vue3框架中可以轻松实现表格数据的动态增加，使得页面能够根据需求实时更新数据展示，提供更流畅的用户体验。关键在于利用响应式数组和Vue的更新机制，结合`push()`和`$nextTick()`方法进行数据添加和DOM刷新，确保数据的实时同步。

「Vue3系列」Vue3 模板语法

       Vue 3 的模板语法提供了一种声明式地将数据绑定到 DOM 的方式，允许开发者更轻松地控制数据在 HTML 元素中的显示和更新。在下文中，将详细阐述 Vue 3 模板语法的几个关键点。

       首先，了解如何使用插值表达式 { { }}。通过在模板中使用双大括号，可以将 Vue 实例的数据属性直接绑定到 HTML 元素上，实现数据的动态显示。

       其次，指令在 Vue 3 中扮演了重要角色，它们以 v- 开头，并通常由一个 JavaScript 表达式作为值。下面列举了几个常用的指令：

v-bind：用于属性绑定，实现数据与 HTML 属性之间的双向绑定。

v-on：用于监听 DOM 事件，实现事件处理。

v-model：在表单元素上创建双向数据绑定，实现实时数据同步。

v-if, v-else-if, v-else：用于条件渲染，实现基于条件的元素渲染。

v-for：用于列表渲染，实现数组数据的循环渲染。

v-html：用于插入原始 HTML 内容，但需确保安全，避免跨站脚本攻击（XSS）。

       此外，计算属性和侦听器是 Vue 3 提供的高级特性，用于更复杂的数据操作和响应式机制。计算属性基于依赖进行缓存，只有在相关依赖变化时才会重新计算。而侦听器则用于观察和响应数据变化，实现动态更新。

       在 Vue 3 中，修饰符是与指令结合使用的特殊标记，用于修改指令的行为。常见的修饰符包括.lazy、.number、.trim、.stop、.prevent、.capture、.self、.once、.passive 和 .exact，它们能帮助开发者更精确地控制指令的执行。

       表达式在 Vue 3 的模板语法中同样重要，允许开发者在模板中嵌入 JavaScript 代码，实现动态内容渲染、计算值和方法调用。表达式使用双大括号 { { }} 包裹，Vue 会自动处理依赖关系并更新结果。

       通过掌握这些核心概念和语法，开发者能够更高效地利用 Vue 3 的模板语法，实现数据驱动的动态 Web 应用开发。

源码视角，Vue3为什么推荐使用ref而不是reactive

       ref和reactive是Vue3中实现响应式数据的核心API。ref用于封装基本数据类型，而reactive用于处理对象和数组。尽管reactive似乎更适合处理对象，但Vue3官方文档更推荐使用ref。

       官方文档指出，ref比reactive更适用。下面我们从源码的角度详细讨论这两个API，以及Vue3为什么推荐使用ref而不是reactive。

       ref的内部工作原理是，它是一个函数，接受一个内部值并返回一个响应式且可变的引用对象。这个引用对象有一个.value属性，指向内部值。

       在上述代码中，ref函数通过new RefImpl(value)创建了一个新的RefImpl实例。这个实例包含getter和setter，分别用于追踪依赖和触发更新。使用ref可以声明任何数据类型的响应式状态，包括对象和数组。

       ref的核心是返回响应式且可变的引用对象，而reactive的核心是返回响应式代理，这是两者本质上的核心区别，也就导致了ref优于reactive。

       reactive的内部工作原理是，它是一个函数，接受一个对象并返回该对象的响应式代理，也就是Proxy。

       reactive的源码相对简单，通过new Proxy(target, baseHandlers)创建了一个代理。这个代理会拦截对目标对象的操作，从而实现响应式。

       ref和reactive在声明数据的响应式状态上，底层原理不同。ref采用RefImpl对象实例，reactive采用Proxy代理对象。

       当你使用new RefImpl(value)创建一个RefImpl实例时，这个实例大致上会包含以下几部分：Dep类负责管理一个依赖列表，并提供依赖收集和通知更新的功能。RefImpl类包含一个内部值_value和一个Dep实例。当value被访问时，通过get方法进行依赖收集；当value被赋予新值时，通过set方法触发更新。

       尽管两者在内部实现上有所不同，但它们都能满足我们对于声明响应式变量的要求，但是reactive存在一定的局限性。

       reactive的局限性包括仅对引用数据类型有效，使用不当会失去响应。reactive主要适用于对象，包括数组和一些集合类型（如Map和Set）。对于基础数据类型（如string、number和boolean），reactive是无效的。这意味着如果你尝试使用reactive来处理这些基础数据类型，将会得到一个非响应式的对象。

       ref()为响应式编程提供了一种统一的解决方案，适用于所有类型的数据，包括基本数据类型和复杂对象。以下是推荐使用ref的几个关键原因：统一性、深层响应性和灵活性。

       ref的核心优势之一是它的统一性。它提供了一种简单、一致的方式来处理所有类型的数据，无论是数字、字符串、对象还是数组。这种统一性极大地简化了开发者的代码，减少了在不同数据类型之间切换时的复杂性。

       ref支持深层响应性，这意味着它可以追踪和更新嵌套对象和数组中的变化。这种特性使得ref非常适合处理复杂的数据结构，如对象和数组。

       ref提供了高度的灵活性，尤其在处理普通赋值和解构赋值方面。这种灵活性使得ref在开发中的使用更加方便，特别是在进行复杂的数据操作时。

       ref在Vue3中提供了一种更统一、灵活的响应式解决方案，还能避免了reactive的某些局限性。希望这篇文章对你有所帮助，有所借鉴。

vue3导入excel并转化成数组

       创建示例excel的演示

       首先导入xlsx上传组件，使用element-plus的el-upload组件进行代码实现，部分结果如下。

       对文件进行读取，并通过判断后缀来确认是否为excel文件。

       接着读取数据，将其转换为json格式。

       定义dealExcel函数，专门处理表格中的中文表头，将其转化为相应的key值。

       最后将处理的步骤转化为一个array数组，并输出。

       需注意，前端最多支持处理约5万条数据，超过此数浏览器可能崩溃，希望有经验的大佬能提供优化方法，欢迎交流。

       关注公众号“小何成长”，分享个人成长中的经验和踩过的坑。感兴趣的朋友欢迎关注我，一起进步！