皮皮网

皮皮网

【商业博客空间源码下载】【暖念日记源码】【溯源码大数据】vue2源码

时间:2024-12-26 00:28:26 分类:热点

1.Vue2 源码解析
2.Vue2源码解析?2?初始化
3.Vue 2.0 源码解析:深入剖析模板编译原理与实 现步骤
4.基于VUE2.0移动端H5 -NUT组件源码Progress分析
5.Vue2.0源码阅读(2) —vue.nextTicket()
6.Vue2源码细读-new Vue()初始化

vue2源码

Vue2 源码解析

       Vue.js,作为前端开发中的知名框架,其核心机制在于数据的自动监测和响应式更新。阅读源码有助于理解其工作原理,尤其是依赖收集、数据监听和模板编译的商业博客空间源码下载过程。

       1. 依赖收集与数据监听

       Vue 通过getter和setter机制监控数据变化,确保DOM的自动更新。数据变更时,Vue 会区分"推送"与"拉取"策略。"推送"用于像data和watch这样的直接访问,当数据变化时主动通知依赖;而"拉取"策略在计算属性或methods中使用,依赖会自动跟随数据变化更新。

       核心方法如defineReactive(),在实例初始化时将data转换为可响应的getter和setter,收集依赖关系。Watcher负责在数据变化时执行相应的逻辑。

       2. 模板编译与渲染

       Vue 通过render()方法将模板编译为AST并优化为虚拟DOM,然后在挂载时调用$mount()进行渲染。在web平台上,$mount会调用mountComponent(),处理初次渲染和更新的差异。

       3. 组件机制

       Vue组件解析是通过webpack等工具将.vue文件转换为JS,组件拥有独立的Vue实例,独立渲染。v-model双向绑定在1.0和2.0中有所变化,2.0版本下,它本质上是:value绑定和事件绑定的结合。

       4. 实现细节

       例如,nextTick()方法处理异步更新DOM的问题,确保在DOM更新后执行回调。Vue-router关注更新URL和监听URL变更,使用history模式解决hash模式的局限。

       5. 周边技术

       vue-router在前端路由中处理URL更新和监听,而Vuex用于状态管理,提供了一个状态统一存储和分发的解决方案。vue-cli是Vue的命令行工具,用于项目初始化和管理。暖念日记源码

Vue2源码解析?2?初始化

       活着,最有意义的事情,就是不遗余力地提升自己的认知,拓展自己的认知边界。

       在搭建源码调试环境一节中,我们已经找到了Vue的构造函数,接下来开始探索Vue初始化的流程。

一个小测试

       在精读源码之前,我们可以在一些重要的方法内打印一下日志,熟悉一下这些关键节点的执行顺序。(执行npmrundev后,源码变更后会自动生成新的Vue.js,我们的测试html只需要刷新即可)

在初始化之前,Vue类的构建过程?

       在此过程中,大部分都是原型方法和属性,意味着实例vm可以直接调用

       注意事项:

       1、以$为前缀的属性和方法,在调用_init原型方法的那一刻即可使用

       2、以_为前缀的原型方法和属性,谨慎使用

       3、本章旨在了解Vue为我们提供了哪些工具(用到时,深入研究,不必要在开始时花过多精力,后边遇到时会详细说明)

       4、类方法和属性在newVue()前后都可以使用,原型方法和属性只能在newVue()后使用

定义构造函数//src/core/instance/index.jsfunctionVue(options){ //形式上很简单,就是一个_init方法this._init(options)}挂载原型方法:_init//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }挂载与state相关的原型属性和原型方法//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}挂载与事件相关的原型方法//src/core/instance/events.jsconsthookRE=/^hook:/Vue.prototype.$on=function(event:string|Array<string>,fn:Function):Component{ }Vue.prototype.$once=function(event:string,fn:Function):Component{ }Vue.prototype.$off=function(event?:string|Array<string>,fn?:Function):Component{ }Vue.prototype.$emit=function(event:string):Component{ }挂载与生命周期相关的原型方法//src/core/instance/lifecycle.jsVue.prototype._update=function(vnode:VNode,hydrating?:boolean){ }Vue.prototype.$forceUpdate=function(){ }Vue.prototype.$destroy=function(){ }挂载与渲染相关的原型方法//installruntimeconveniencehelpersinstallRenderHelpers(Vue.prototype)Vue.prototype.$nextTick=function(fn:Function){ }Vue.prototype._render=function():VNode{ }挂载Vue类方法和类属性//src/core/global-api/index.js//configconstconfigDef={ }configDef.get=()=>configObject.defineProperty(Vue,'config',configDef)Vue.util={ warn,extend,mergeOptions,defineReactive}Vue.set=setVue.delete=delVue.nextTick=nextTick//2.6explicitobservableAPIVue.observable=<T>(obj:T):T=>{ observe(obj)returnobj}Vue.options=Object.create(null)ASSET_TYPES.forEach(type=>{ Vue.options[type+'s']=Object.create(null)})Vue.options._base=Vueextend(Vue.options.components,builtInComponents)initUse(Vue)//挂载类方法use,用于安装插件(特别特别重要)initMixin(Vue)//挂载类方法mixin,用于全局混入(在Vue3中被新特性取代)initExtend(Vue)//实现Vue.extend函数initAssetRegisters(Vue)//实现Vue.component,Vue.directive,Vue.filter函数挂载平台相关的属性,挂载原型方法$mount//src/platforms/web/runtime/index.js//installplatformspecificutilsVue.config.mustUseProp=mustUsePropVue.config.isReservedTag=isReservedTagVue.config.isReservedAttr=isReservedAttrVue.config.getTagNamespace=getTagNamespaceVue.config.isUnknownElement=isUnknownElement//installplatformruntimedirectives&componentsextend(Vue.options.directives,platformDirectives)extend(Vue.options.components,platformComponents)//installplatformpatchfunctionVue.prototype.__patch__=inBrowser?patch:noopconsole.log('挂载$mount方法')//publicmountmethodVue.prototype.$mount=function(el?:string|Element,hydrating?:boolean):Component{ }拓展$mount方法//src/platforms/web/entry-runtime-with-compiler.jsconstmount=Vue.prototype.$mount//保存之前定义的$mount方法Vue.prototype.$mount=function(el?:string|Element,hydrating?:boolean):Component{ //执行拓展内容returnmount.call(this,el,hydrating)//执行最初定义的$mount方法}Vue的初始化过程(很重要哦!!!)

       熟悉了初始化过程,就会对不同阶段挂载的实例属性了然于胸,了解Vue是如何处理options中的数据,将初始化流程抽象成一个模型,从此,溯源码大数据当你看到用户编写的options选项,都可以在这个模型中演练。

       前边我们提到过,Vue的构造函数中只调用了一个_init方法

执行_init方法//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ constvm:Component=this//此刻,Vue的实例已经创建,只是雏形,但Vue的所有原型方法可以调用//aflagtoavoidthisbeingobserved//(observe会在后面的响应式章节详细说明)vm._isVue=true//mergeoptionsif(options&&options._isComponent){ //在后面的Vue组件章节会详细说明//optimizeinternalcomponentinstantiation//sincedynamicoptionsmergingisprettyslow,andnoneofthe//internalcomponentoptionsneedsspecialtreatment.initInternalComponent(vm,options)}else{ vm.$options=mergeOptions(//合并optionsresolveConstructorOptions(vm.constructor),//主要处理包含继承关系的实例()options||{ },vm)}//exposerealselfvm._self=vminitLifecycle(vm)//初始化实例中与生命周期相关的属性initEvents(vm)//处理父组件传递的事件和回调initRender(vm)//初始化与渲染相关的实例属性callHook(vm,'beforeCreate')//调用beforeCreate钩子,即执行beforeCreate中的代码(用户编写)initInjections(vm)//resolveinjectionsbeforedata/props获取注入数据initState(vm)//初始化props、methods、data、computed、watchinitProvide(vm)//resolveprovideafterdata/props提供数据注入callHook(vm,'created')//执行钩子created中的代码(用户编写)if(vm.$options.el){ //DOM容器(通常是指定id的div)vm.$mount(vm.$options.el)//将虚拟DOM转换成真实DOM,然后插入到DOM容器内}}initLifecycle:初始化与生命周期相关的实例属性//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }0initEvents(vm):处理父组件传递的事件和回调//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }1initRender(vm):初始化与渲染相关的实例属性//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }2CallHook(vm,'beforeCreate'):执行beforeCreate钩子

       执行options中,用户编写在beforeCreate中的代码

//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }3initInjections(vm):resolveinjectionsbeforedata/props获取注入数据//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }4initState(vm):初始化props、methods、data、computed、watch(划重点啦!!!)//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }5initProps:初始化props

       此处概念比较多,propsData、props、vm._props、propsOptions,后续会结合实例来分析其区别,此处只做大概了解。

//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }6initMethods:初始化methods//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }7initData:初始化data//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }8initComputed:初始化computed选项//src/core/instance/init.jsVue.prototype._init=function(options?:Object){ }9initWatch:初始化watch

       createWatcher:本质上执行了vm.$watch(expOrFn,handler,options)

//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}0initProvide(vm):提供数据注入

       为什么provide初始化滞后与inject,后续补充

//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}1CallHook(vm,'created'):执行created钩子中的代码

       callHook的相关逻辑,参考上面的callHook(vm,'beforeCreate')

执行挂载执行$mount扩展

       通过下面的代码可知:当用户代码中同时包含render,template,el时,它们的优先级依次为:render、template、el

//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}2

       $mount方法中,首先获取挂载容器,然后执行mountComponent方法

//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,东方年代记源码'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}3//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}4

       在_update方法中,通过_vnode属性判断是否初次渲染,patch其实就是patch方法,关于patch的详细逻辑,将在diff算法章节详细说明。

//src/core/instance/state.jsconstdataDef={ }dataDef.get=function(){ returnthis._data}constpropsDef={ }propsDef.get=function(){ returnthis._props}Object.defineProperty(Vue.prototype,'$data',dataDef)Object.defineProperty(Vue.prototype,'$props',propsDef)Vue.prototype.$set=setVue.prototype.$delete=delVue.prototype.$watch=function(expOrFn:string|Function,cb:any,options?:Object):Function{ //略}5原文:/post/

Vue 2.0 源码解析:深入剖析模板编译原理与实 现步骤

       Vue.js 2.0,这款流行的JavaScript框架,其核心魅力之一在于其模板编译机制。本文将逐步揭示Vue 2.0模板编译的内部运作,包括解析原理和实际实现步骤。

       首先,Vue的模板编译原理是通过基于HTML的声明式语法,将DOM与底层数据绑定。在运行时,它将模板转化为高效的渲染函数,这个函数能执行并生成虚拟DOM树。

       编译过程分为几个关键步骤:

       解析模板:Vue使用正则表达式解析模板,识别指令和插值表达式,构建抽象语法树(AST)。

       优化AST:通过遍历,标记静态节点,以优化性能,减少渲染时不必要的计算。

       生成代码:AST被转化为可执行的JavaScript代码字符串。

       创建渲染函数:使用`new Function`将代码字符串转化为实际的函数。

       执行渲染函数:调用生成的函数,生成虚拟DOM。

       例如,解析模板的过程会将模板字符串转化为一个token数组,每个token包含类型和值。而在代码生成阶段,会根据AST中的节点类型生成相应的代码段。

       理解这些步骤有助于我们深入理解Vue 2.0的工作机制,从而在开发中灵活运用,进行性能优化。本文详细剖析了模板编译的各个环节,希望能帮助你更好地掌握Vue 2.0模板编译的精髓。

基于VUE2.0移动端H5 -NUT组件源码Progress分析

       为了满足显示需求,android的喜鹊源码布局采用flex布局,使%的文字位于右侧。

       颜色通过div的背景实现,红色部分在浅色背景内部,使用绝对定位确保红色覆盖并实现动画效果,使用frame animation技术。

       "nut-progress-outer"代表浅色背景,"nut-progress-inner"代表红色部分宽度,文字设置在"nut-progress-inner"的左侧。

       若需文字位于右侧,则放置在"nut-progress-outer"后面。

       scss实现时,将"progress"设为flex布局。

       在js中,通过设置属性来实现上述布局和效果。

Vue2.0源码阅读(2) —vue.nextTicket()

       揭开Vue.nextTick之谜

       在vue圈子中,有一句广为流传的“都市传说”:“遇事不决,问nextTick。”这句话背后的nextTick究竟是何物?根据官方文档的解释,nextTick()是在下次DOM更新循环结束之后执行延迟回调。其核心功能是在数据更新后自动调用回调函数,获取更新后的DOM。接下来,我们将深入源码,一探nextTick的真谛。

       将nextTick定义至Vue原型链的代码位于src/core/instance/render.js,具体实现则在src/core/util/next-tick.js。nextTick接受两个参数:函数cd(实际使用场景中,为延迟执行的函数)与this上下文。内部定义了一个回调函数数组callbacks,当cb存在时将其添加至数组,同时将回调函数的上下文指向组件的this;若cb不存在,则将resolve函数添加至数组。接着判断pending值,其用于控制状态。当pending值为false,表示无回调函数正在执行,进而执行timerFunc函数。timerFunc函数在cb不存在且浏览器支持Promise时返回一个Promise,允许在不传入回调的情况下通过this.$nextTick().then(cb)进行调用。

       timerFunc看似实现关键,实则执行逻辑围绕Promise、MutationObserver、setImmediate与setTimeout(f(), 0)等方法展开。若系统支持Promise,则使用Promise执行延时;不支持Promise时,依次判断是否支持MutationObserver、setImmediate或setTimeout,选择合适的方法执行flushCallbacks函数。

       flushCallbacks函数负责将pending状态设为false,并将callbacks数组复制至copies数组,清空callbacks。接着遍历copies数组,依次执行回调函数(即传入nextTick的cb函数)。至此,我们理解了nextTick的核心机制与使用场景。

       MutationObserver:在源码阅读中,我们发现若系统不支持Promise,则使用MutationObserver作为替代方案。MutationObserver是监听DOM树变更的接口,其设计用于替代DOM3 Events规范中的Mutation Events功能。简单理解,MutationObserver用于监听DOM变动,当DOM发生任何更改时,它会接收到通知。

       MutationObserver的使用方式如代码所示,实例化MutationObserver并指定回调函数与需要监控的DOM元素与变动类型。调用observer.observe(dom, options)方法进行观察。options对象中定义了需要观察的变动类型,如childList、attributes、characterData等。

       下面通过一个简单的demo来理解MutationObserver。在运行该demo后,屏幕显示了,说明文本节点已添加至DOM中。然而,控制台打印的I值只有1,这意味着DOM变动只触发了一次。这表明MutationObserver在异步处理DOM变化,直到页面上所有DOM操作完成时执行一次,实现高效处理。

       在nextTick中,MutationObserver用于触发flushCallbacks函数。通过文本节点的操作触发MutationObserver,从而执行flushCallbacks。至此,我们理解了nextTick的实现与MutationObserver的用法。

       源码阅读让我们发现,nextTick并非传说中的神物,其主要应用场合与DOM操作相关。在遇到无法在DOM更新前操作DOM的情况时,可以考虑使用nextTick。由于nextTick在DOM更新循环结束后执行,因此在created钩子中操作DOM成为可能,实现目标。

Vue2源码细读-new Vue()初始化

       Vue.js 是一个数据驱动的前端框架,其核心是通过数据生成视图,开发者更关注数据模型与流转而非视图生成。

       从 new Vue() 开始,我们将探索 Vue 实例的创建过程。新创建的 Vue 实例本质上是一个 Vue 的实例对象。Vue 作为构造函数,只能通过 new 操作符创建实例,核心功能是调用初始化方法 _init,并传入参数。

       Vue 的实现中,构造函数定义了多个 mixin,这些 mixin 被挂载到 Vue.prototype,以降低耦合度,便于维护。初始化流程包括多个模块的挂载,如初始化、数据状态、事件发布订阅、生命周期与渲染。

       初始化过程主要分为三个阶段:手动调用场景和组件场景。手动调用场景指直接创建的 Vue 实例,优先级高于组件场景。组件场景涉及全局或局部注册的组件,组件创建和继承通过 Vue.extend 实现。

       组件创建过程中,Vue.extend 用于获取组件构造函数,createComponent 则生成初始的 VNode。组件实例的创建发生在 patch 过程中,此时调用 init 钩子,真正创建组件实例。

       组件实例的 options 包含组件配置,通过对象赋值保存到实例中。在组件场景中,initInternalComponent 函数处理组件实例的初始化,包括设置组件选项和相关属性。

       综上所述,new Vue() 过程涉及构造函数的初始化、混合功能的挂载、配置的合并与组件的创建。这一过程在后续篇章中将详细分析。

       

参考资料:

[Vue.js 技术揭秘]( 合并配置 | Vue.js 技术揭秘)

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/