Vue源码讲解
文章平均质量分 89
小彭努力中
不积跬步,无以至千里
展开
-
Vue源码系列讲解——全局API篇【一】(Vue.extend)
其实应该返回同一个结果,只要返回结果是固定的,就可以将结果缓存,再次调用时,只需从缓存中取出结果即可。在API方法定义的最后,当创建完子类后,会使用父类的。类中继承而来,所以创建子类的过程其实就是一边给子类上添加上独有的属性,一边将父类的公共属性复制到子类上。接着,在缓存池中先尝试获取是否之前已经创建过的该子类,如果之前创建过,则直接返回之前创建的。类的子类,那么除了它本身独有的一些属性方法,还有一些是从。类的子类,可接收的参数是一个包含组件选项的对象。接着,获取到传入的选项参数中的。原创 2024-03-12 11:10:16 · 1689 阅读 · 0 评论 -
Vue源码系列讲解——内置组件篇【一】(keep-alive)
是Vue实现的一个内置组件,也就是说Vue源码不仅实现了一套组件化的机制,也实现了一些内置组件,关于是Vue中内置的一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。这句话的意思简单来说:就是我们可以把一些不常变动的组件或者需要缓存的组件用包裹起来,这样就会帮我们把组件保存在内存中,而不是直接的销毁,这样做可以保留组件的状态或避免多次重新渲染,以提高页面性能。原创 2024-03-09 13:58:13 · 1059 阅读 · 0 评论 -
Vue源码系列讲解——指令篇【一】(自定义指令)
在Vue中,除了Vue本身为我们提供的一些内置指令之外,Vue还支持用户自定义指令。并且用户有两种定义指令的方式:一种是使用全局API——来定义全局指令,这种方式定义的指令会被存放在中;另一种是在组件内的directive选项中定义专为该组件使用的局部指令,这种方式定义的指令会被存放在中。可以看到,无论是使用哪一种方式定义的指令它都是将定义好的指令存放在指定的地方,而并不能让指令生效。那么定义的指令什么时候才会生效呢?或者说它是如何生效的呢?本篇文章就来带你探究自定义指令如何生效的内部原理。原创 2024-03-08 09:01:32 · 1355 阅读 · 0 评论 -
Vue源码系列讲解——过滤器篇【三】(解析过滤器)
在上篇文章中我们说了,无论用户是以什么方式使用过滤器,终归是将解析器写在模板中,既然是在模板中,那它肯定就会被解析编译,通过解析用户所写的模板,进而解析出用户所写的过滤器中哪部分是被处理的表达式,哪部分是过滤器id及其参数。还记得我们在介绍模板编译篇的解析阶段中说过,用户所写的模板会被三个解析器所解析,分别是HTML解析器parseHTML、文本解析器parseText和过滤器解析器。其中HTML解析器是主线,在使用HTML解析器parseHTML函数解析模板中HTML。原创 2024-03-06 09:07:19 · 1009 阅读 · 0 评论 -
Vue源码系列讲解——过滤器篇【二】(工作原理)
通过上一篇用法回顾我们知道,过滤器有两种使用方式,分别是在双花括号插值中和在 v-bind 表达式中。但是无论是哪一种使用方式,过滤器都是写在模板里面的。既然是写在模板里面,那么它就会被编译,会被编译成渲染函数字符串,然后在挂载的时候会执行渲染函数,从而就会使过滤器生效。举个例子:filters: {if (!如果你是初次看到这个_f这样的函数,请不要惊慌。这跟我们在介绍模板编译篇中代码生成阶段时所看到的_c_e函数一样,它都对应着一个函数,_f对应的是函数,通过模板编译会生成一个_f。原创 2024-03-05 16:14:08 · 976 阅读 · 0 评论 -
Vue源码系列讲解——过滤器篇【一】(用法回顾)
过滤器在我们日常开发中应该算是一个非常常用的功能了,它经常会被用来格式化模板中的文本。过滤器可以单个使用,也可以多个串联一起使用,还可以传参数使用。那么在Vue中过滤器是如何工作的呢?其内部原理是怎样的?Vue又是如何识别出我们所写的过滤器的?接下来,我们将从源码角度出发,探究过滤器内部的工作原理,分析其工作流程,揭开它神秘的面纱。也可以在创建Vue实例之前使用全局APIVue.filterif (!})当全局过滤器和局部过滤器重名时,会采用局部过滤器。原创 2024-03-04 09:29:57 · 575 阅读 · 0 评论 -
Vue源码系列讲解——实例方法篇【三】(生命周期相关方法)
与生命周期相关的实例方法有4个,分别是vm.$mount和。其中,和$destroy方法是在函数中挂载到Vue原型上的,$nextTick方法是在函数中挂载到Vue原型上的,而$mount方法是在跨平台的代码中挂载到Vue原型上的。当执行和函数后,会向Vue原型上挂载相应的实例方法。接下来,我们就来分析这4个与生命周期相关的实例方法其内部的原理都是怎样的。原创 2024-03-01 09:11:06 · 1187 阅读 · 0 评论 -
Vue源码系列讲解——实例方法篇【二】(事件相关方法)
与事件相关的实例方法有4个,分别是vm.$onvm.$emitvm.$off和vm.$once。它们是在函数中挂载到Vue当执行函数后,会向Vue原型上挂载上述4个实例方法。接下来,我们就来分析这4个与事件相关的实例方法其内部的原理都是怎样的。原创 2024-02-29 11:34:19 · 1141 阅读 · 0 评论 -
Vue源码系列讲解——实例方法篇【一】(数据相关方法)
与数据相关的实例方法有3个,分别是vm.$setvm.$delete和vm.$watch。它们是在stateMixin函数中挂载到Vue当执行stateMixin函数后,会向Vue原型上挂载上述3个实例方法。接下来,我们就来分析这3个与数据相关的实例方法其内部的原理都是怎样的。原创 2024-02-28 10:28:07 · 2554 阅读 · 0 评论 -
Vue源码系列讲解——生命周期篇【九】(销毁阶段)
接下来到了生命周期流程的最后一个阶段——销毁阶段。从官方文档给出的生命周期流程图中可以看到,当调用了方法,Vue实例就进入了销毁阶段,该阶段所做的主要工作是将当前的Vue实例从其父级实例中删除,取消当前实例上的所有依赖追踪并且移除实例上的所有事件监听器。也就是说,当这个阶段完成之后,当前的Vue实例的整个生命流程就全部走完了,最终“寿终正寝”了。本篇文章就来分析一下在销毁阶段都做了哪些工作。本篇文章介绍了生命周期流程的最后一个阶段——销毁阶段。我们知道了,当调用了实例上的。原创 2024-02-27 09:23:13 · 1209 阅读 · 0 评论 -
Vue源码系列讲解——生命周期篇【八】(挂载阶段)
模板编译阶段完成之后,接下来就进入了挂载阶段,从官方文档给出的生命周期流程图中可以看到,挂载阶段所做的主要工作是创建Vue实例并用其替换el选项对应的DOM元素,同时还要开启对模板中数据(状态)的监控,当数据(状态)发生变化时通知其依赖进行视图更新。本篇文章介绍了生命周期中的第三个阶段——挂载阶段。在该阶段中所做的主要工作是创建Vue实例并用其替换el选项对应的DOM元素,同时还要开启对模板中数据(状态)的监控,当数据(状态)发生变化时通知其依赖进行视图更新。原创 2024-02-26 09:16:21 · 1023 阅读 · 0 评论 -
Vue源码系列讲解——生命周期篇【七】(模板编译阶段)
前几篇文章中我们介绍了生命周期的初始化阶段,我们知道,在初始化阶段各项工作做完之后调用了vm.$mount方法,该方法的调用标志着初始化阶段的结束和进入下一个阶段,从官方文档给出的生命周期流程图中可以看到,下一个阶段就进入了模板编译阶段,该阶段所做的主要工作是获取到用户传入的模板内容并将其编译成渲染函数。模板编译阶段并不是存在于Vue的所有构建版本中,它只存在于完整版(即vue.js)中。在只包含运行时版本(即)中并不存在该阶段,这是因为当使用vue-loader或vueify时,*.vue。原创 2024-02-26 09:08:15 · 1074 阅读 · 0 评论 -
Vue源码系列讲解——生命周期篇【六】(initState)
本篇文章介绍生命周期初始化阶段所调用的第五个初始化函数——initState。从函数名字上来看,这个函数是用来初始化实例状态的,那么什么是实例的状态呢?在前面文章中我们略有提及,在我们日常开发中,在Vue组件中会写一些如propsdatamethodscomputedwatch选项,我们把这些选项称为实例的状态选项。也就是说,initState函数就是用来初始化这些状态的,那么接下来我们就来分析该函数是如何初始化这些状态选项的。本篇文章介绍了生命周期初始化阶段所调用的第五个初始化函数——initState。原创 2024-02-23 09:23:40 · 951 阅读 · 0 评论 -
Vue源码系列讲解——生命周期篇【五】(initInjections)
本篇文章介绍生命周期初始化阶段所调用的第四个初始化函数——。从函数名字上来看,该函数是用来初始化实例中的inject选项的。说到inject选项,那必然离不开provide选项,这两个选项都是成对出现的,它们的作用是:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。并且provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持Symbol和。原创 2024-02-23 09:02:52 · 912 阅读 · 0 评论 -
Vue源码系列讲解——生命周期篇【四】(initEvents)
本篇文章介绍生命周期初始化阶段所调用的第二个初始化函数——initEvents。从函数名字上来看,这个初始化函数是初始化实例的事件系统。我们知道,在Vue中,当我们在父组件中使用子组件时可以给子组件上注册一些事件,这些事件即包括使用v-on或注册的自定义事件,也包括注册的浏览器原生事件(需要加.native不管是什么事件,当子组件(即实例)在初始化的时候都需要进行一定的初始化,那么本篇文章就来看看实例上的事件都是如何进行初始化的。本篇文章介绍了生命周期初始化阶段所调用的第二个初始化函数——原创 2024-02-22 09:05:00 · 1394 阅读 · 0 评论 -
Vue源码系列讲解——生命周期篇【三】(initLifecycle)
在上篇文章中,我们介绍了生命周期初始化阶段的整体工作流程,以及在该阶段都做了哪些事情。我们知道了,在该阶段会调用一些初始化函数,对Vue实例的属性、数据等进行初始化工作。那这些初始化函数都初始化了哪些东西以及都怎么初始化的呢?接下来我们就把这些初始化函数一一展开介绍,本篇文章介绍第一个初始化函数。本篇文章介绍了初始化阶段调用的第一个初始化函数——函数。该函数的逻辑非常简单,就是给实例初始化了一些属性,包括以开头的供用户使用的外部属性,也包括以开头的供内部使用的内部属性。原创 2024-02-22 09:00:03 · 653 阅读 · 0 评论 -
Vue源码系列讲解——生命周期篇【二】(new Vue)
上篇文章中介绍了Vue实例的生命周期大致分为4个阶段,那么首先我们先从第一个阶段——初始化阶段开始入手分析。从生命周期流程图中我们可以看到,初始化阶段所做的工作也可大致分为两部分:第一部分是new Vue(),也就是创建一个Vue实例;第二部分是为创建好的Vue实例初始化一些事件、属性、响应式数据等。接下来我们就从源码角度来深入分析一下初始化阶段所做的工作及其内部原理。new Vue()。首先,分析了new Vue()时其内部都干了些什么。原创 2024-02-21 09:21:31 · 1203 阅读 · 0 评论 -
Vue源码系列讲解——生命周期篇【一】(综述)
在Vue中,每个Vue实例从被创建出来到最终被销毁都会经历一个过程,就像人一样,从出生到死亡。在这一过程里会发生许许多多的事,例如设置数据监听,编译模板,组件挂载等。在Vue中,把Vue实例从被创建出来到最终被销毁的这一过程称为Vue实例的生命周期,同时,在Vue实例生命周期的不同阶段Vue还提供了不同的钩子函数,以方便用户在不同的生命周期阶段做一些额外的事情。那么,接下来的几篇文章我们就从源码角度深入剖析一下一个Vue实例在从生到死的生命周期里到底都经历了些什么,每个阶段都做了哪些事情。原创 2024-02-20 10:53:12 · 624 阅读 · 0 评论 -
Vue源码系列讲解——模板编译篇【六】(总结)
到现在,模板编译的三大阶段就已经全部介绍完毕了,接下来本篇文章,就以宏观角度回顾并梳理一下模板编译整个流程是怎样的。首先,我们需要搞清楚模板编译的最终目的是什么,它的最终目的就是:把用户所写的模板转化成供Vue实例在挂载时可调用的render函数。或者你可以这样简单的理解为:模板编译就是一台机器,给它输入模板字符串,它就输出对应的render函数。我们把模板编译的最终目的只要牢记在心以后,那么模板编译中间的所有的变化都是在为达到这个目的而努力。接下来我们就以宏观角度来梳理一下模板编译的整个流程。原创 2024-02-19 09:27:48 · 1138 阅读 · 0 评论 -
Vue源码系列讲解——模板编译篇【五】(代码生成阶段)
经过前几篇文章,我们把用户所写的模板字符串先经过解析阶段解析生成对应的抽象语法树AST,接着再经过优化阶段将AST中的静态节点及静态根节点都打上标记,现在终于到了模板编译三大阶段的最后一个阶段了——代码生成阶段。所谓代码生成阶段,到底是要生成什么代码?答:要生成render函数字符串。我们知道,Vue实例在挂载的时候会调用其自身的render函数来生成实例上的template选项所对应的VNode,简单的来说就是Vue只要调用了render函数,就可以把模板转换成对应的虚拟DOM。那么Vue要想调用。原创 2024-02-18 09:11:51 · 1123 阅读 · 0 评论 -
Vue源码系列讲解——模板编译篇【五】(优化阶段)
<li>我是文本信息</li><li>我是文本信息</li><li>我是文本信息</li><li>我是文本信息</li><li>我是文本信息</li>原创 2024-02-15 20:14:34 · 1223 阅读 · 0 评论 -
Vue源码系列讲解——模板编译篇【四】(文本解析器)
在上篇文章中我们说了,当HTML解析器解析到文本内容时会调用4个钩子函数中的chars函数来创建文本型的AST节点,并且也说了在chars函数中会根据文本内容是否包含变量再细分为创建含有变量的AST节点和不包含变量的AST// 当解析到标签的文本时,触发charstype: 2,text} else {type: 3,text从上面代码中可以看到,创建含有变量的AST节点时节点的type属性为2,并且相较于不包含变量的ASTexpression和tokens。原创 2024-02-14 19:49:08 · 1357 阅读 · 0 评论 -
Vue源码系列讲解——模板编译篇【三】(HTML解析器)
上篇文章中我们说到,在模板解析阶段主线函数parse中,根据要解析的内容不同会调用不同的解析器,而在三个不同的解析器中最主要的当属HTML解析器,为什么这么说呢?因为HTML解析器主要负责解析出模板字符串中有哪些内容,然后根据不同的内容才能调用其他的解析器以及做相应的处理。那么本篇文章就来介绍一下HTML解析器是如何解析出模板字符串中包含的不同的内容的。本篇文章主要介绍了HTML解析器的工作流程以及工作原理,文章比较长,但是逻辑并不复杂。首先介绍了HTML。原创 2024-02-13 23:11:35 · 1638 阅读 · 0 评论 -
Vue源码系列讲解——模板编译篇【二】(整体运行流程)
本篇文章主要梳理了模板解析的整体运行流程,模板解析其实就是根据被解析内容的特点使用正则等方式将有效信息解析提取出来,根据解析内容的不同分为HTML解析器,文本解析器和过滤器解析器。而文本信息与过滤器信息又存在于HTML标签中,所以在解析器主线函数parse中先调用HTML解析器parseHTML函数对模板字符串进行解析,如果在解析过程中遇到文本或过滤器信息则再调用相应的解析器进行解析,最终完成对整个模板字符串的解析。原创 2024-02-12 09:18:09 · 606 阅读 · 0 评论 -
Vue源码系列讲解——模板编译篇【一】(综述)
在前几篇文章中,我们介绍了Vue中的虚拟DOM以及虚拟DOM的patch(DOM-Diff)过程,而虚拟DOM存在的必要条件是得先有VNode,那么VNode又是从哪儿来的呢?这就是接下来几篇文章要说的模板编译。你可以这么理解:把用户写的模板进行编译,就会产生VNode。我们知道,在日常开发中,我们把写在标签中的类似于原生HTML的内容称之为模板。这时你可能会问了,为什么说是“类似于原生HTML的内容”而不是“就是HTML的内容”?因为我们在开发中,在标签中除了写一些原生HTML。原创 2024-02-11 20:25:19 · 1578 阅读 · 0 评论 -
Vue源码系列讲解——虚拟DOM篇【四】(优化更新子节点)
在上一篇文章中,我们介绍了当新的VNode与旧的oldVNode都是元素节点并且都包含子节点时,Vue对子节点是先外层循环数组,再内层循环数组,每循环外层数组里的一个子节点,就去内层数组里找看有没有与之相同的子节点,最后根据不同的情况作出不同的操作。在上一篇文章的结尾我们也说了,这种方法虽然能够解决问题,但是还存在可优化的地方。比如当包含的子节点数量很多时,这样循环算法的时间复杂度就会变的很大,不利于性能提升。当然,Vue。原创 2024-02-10 22:45:12 · 1115 阅读 · 0 评论 -
Vue源码系列讲解——虚拟DOM篇【三】(更新子节点)
在上一篇文章中,我们了解了Vue中的patch过程,即DOM-Diff算法。并且知道了在patch过程中基本会干三件事,分别是:创建节点,删除节点和更新节点。创建节点和删除节点都比较简单,而更新节点因为要处理各种可能出现的情况所以逻辑略微复杂一些,但是没关系,我们通过分析过程,对照源码,画逻辑流程图来帮助我们理解了其中的过程。最后我们还遗留了一个问题,那就是在更新节点过程中,新旧VNode可能都包含有子节点,对于子节点的对比更新会有额外的一些逻辑,那么在本篇文章中我们就来学习在Vue。原创 2024-02-09 23:03:54 · 2515 阅读 · 0 评论 -
Vue源码系列讲解——虚拟DOM篇【二】(Vue中的DOM-Diff)
在上一篇文章介绍VNode的时候我们说了,VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点,然后就可以对比新旧两份VNode,找出差异所在,然后更新有差异的DOM节点,最终达到以最少操作真实DOM更新视图的目的。而对比新旧两份VNode并找出差异的过程就是所谓的DOM-Diff过程。DOM-Diff算法是整个虚拟DOM的核心所在,那么接下来,我们就以源码出发,深入研究一下Vue中的DOM-Diff过程是怎样的。在本篇文章中我们介绍了Vue中的DOM-Diff算法:patch过程。原创 2024-02-08 21:16:45 · 1465 阅读 · 0 评论 -
Vue源码系列讲解——虚拟DOM篇【一】(Vue中的虚拟DOM)
虚拟DOM,这个名词作为当下的前端开发人员你一定不会陌生,至少会略有耳闻,但不会闻所未闻吧。这也是现在求职面试考察中非常高频的一个考点了。因为在当下的前端三大框架中关于虚拟DOM或多或少都有所涉及,那么接下来,我们就从源码角度出发,看看Vue中的虚拟DOM时怎样的。原创 2024-02-07 09:07:54 · 1259 阅读 · 0 评论 -
Vue源码系列讲解——变化侦测篇【下】(Array的变化侦测)
上一篇文章中我们介绍了Object数据的变化侦测方式,本篇文章我们来看一下对Array型数据的变化Vue是如何进行侦测的。为什么Object数据和Array型数据会有两种不同的变化侦测方式?这是因为对于Object数据我们使用的是JS提供的对象原型上的方法,而这个方法是对象原型上的,所以Array无法使用这个方法,所以我们需要对Array型数据设计一套另外的变化侦测机制。万变不离其宗,虽然对Array型数据设计了新的变化侦测机制,但是其根本思路还是不变的。原创 2024-02-06 09:10:20 · 1281 阅读 · 0 评论 -
Vue源码系列讲解——变化侦测篇【中】(Object的变化侦测)
在上一篇文章中,我们知道:数据驱动视图的关键点则在于我们如何知道数据发生了变化,只要知道数据在什么时候变了,那么问题就变得迎刃而解,我们只需在数据变化的时候去通知视图更新即可。要想知道数据什么时候被读取了或数据什么时候被改写了,其实不难,JS为我们提供了方法,通过该方法我们就可以轻松的知道数据在什么时候发生变化。在上一章中,我们迈出了第一步:让object数据变的可观测。变的可观测以后,我们就能知道数据什么时候发生了变化,那么当数据发生变化时,我们去通知视图更新就好了。原创 2024-02-05 17:59:06 · 1167 阅读 · 0 评论 -
Vue源码系列讲解——变化侦测篇【上】(何为变化侦测)
最大的特点之一就是数据驱动视图,那么什么是数据驱动视图呢?在这里,我们可以把数据理解为状态,而视图就是用户可直观看到页面。数据驱动视图简单来说就是数据变化引起视图变化,那么第一步就是先要知道数据什么时候发生变化,也就是说对数据的变化要进行侦测。输出,状态输入一旦变化了,页面输出也随之而变化。变化侦测就是追踪状态,亦或者说是数据的变化,一旦发生了变化,就要去更新视图。其次,数据的变化侦测在三大框架中均有涉及,不同的框架有着自己的一套侦测机制。变化之后,经过一系列加工,最终将变化反应在。来实现变化侦测,而在。原创 2024-02-05 17:49:38 · 400 阅读 · 0 评论