![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue深入学习
文章平均质量分 93
itpeilibo
不怕孤独,努力沉淀;
于淡泊中,平和自在。
展开
-
【Vue2.0源码学习】生命周期篇-销毁阶段(destroy)
接下来到了生命周期流程的最后一个阶段——销毁阶段。从官方文档给出的生命周期流程图中可以看到,当调用了方法,Vue实例就进入了销毁阶段,该阶段所做的主要工作是将当前的Vue实例从其父级实例中删除,取消当前实例上的所有依赖追踪并且移除实例上的所有事件监听器。也就是说,当这个阶段完成之后,当前的Vue实例的整个生命流程就全部走完了,最终“寿终正寝”了。本篇文章就来分析一下在销毁阶段都做了哪些工作。本篇文章介绍了生命周期流程的最后一个阶段——销毁阶段。我们知道了,当调用了实例上的。原创 2023-10-07 09:17:19 · 3300 阅读 · 1 评论 -
【Vue2.0源码学习】生命周期篇-挂载阶段(mount)
模板编译阶段完成之后,接下来就进入了挂载阶段,从官方文档给出的生命周期流程图中可以看到,挂载阶段所做的主要工作是创建Vue实例并用其替换el选项对应的DOM元素,同时还要开启对模板中数据(状态)的监控,当数据(状态)发生变化时通知其依赖进行视图更新。本篇文章介绍了生命周期中的第三个阶段——挂载阶段。在该阶段中所做的主要工作是创建Vue实例并用其替换el选项对应的DOM元素,同时还要开启对模板中数据(状态)的监控,当数据(状态)发生变化时通知其依赖进行视图更新。原创 2023-09-25 07:35:31 · 460 阅读 · 2 评论 -
【Vue2.0源码学习】生命周期篇-模板编译阶段(template)
前几篇文章中我们介绍了生命周期的初始化阶段,我们知道,在初始化阶段各项工作做完之后调用了vm.$mount方法,该方法的调用标志着初始化阶段的结束和进入下一个阶段,从官方文档给出的生命周期流程图中可以看到,下一个阶段就进入了模板编译阶段,该阶段所做的主要工作是获取到用户传入的模板内容并将其编译成渲染函数。模板编译阶段并不是存在于Vue的所有构建版本中,它只存在于完整版(即vue.js)中。在只包含运行时版本(即)中并不存在该阶段,这是因为当使用vue-loader或vueify时,*.vue。原创 2023-09-18 07:32:59 · 496 阅读 · 2 评论 -
【Vue2.0源码学习】生命周期篇-初始化阶段(initState)
本篇文章介绍生命周期初始化阶段所调用的第五个初始化函数——initState。从函数名字上来看,这个函数是用来初始化实例状态的,那么什么是实例的状态呢?在前面文章中我们略有提及,在我们日常开发中,在Vue组件中会写一些如propsdatamethodscomputedwatch选项,我们把这些选项称为实例的状态选项。也就是说,initState函数就是用来初始化这些状态的,那么接下来我们就来分析该函数是如何初始化这些状态选项的。本篇文章介绍了生命周期初始化阶段所调用的第五个初始化函数——initState。原创 2023-09-11 07:27:59 · 462 阅读 · 2 评论 -
【Vue2.0源码学习】生命周期篇-初始化阶段(initInjections)
本篇文章介绍生命周期初始化阶段所调用的第四个初始化函数——。从函数名字上来看,该函数是用来初始化实例中的inject选项的。说到inject选项,那必然离不开provide选项,这两个选项都是成对出现的,它们的作用是:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。并且provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持Symbol和。原创 2023-09-04 07:18:52 · 643 阅读 · 4 评论 -
【Vue2.0源码学习】生命周期篇-初始化阶段(initEvents)
本篇文章介绍生命周期初始化阶段所调用的第二个初始化函数——initEvents。从函数名字上来看,这个初始化函数是初始化实例的事件系统。我们知道,在Vue中,当我们在父组件中使用子组件时可以给子组件上注册一些事件,这些事件即包括使用v-on或注册的自定义事件,也包括注册的浏览器原生事件(需要加.native修饰符),如下:原创 2023-08-28 07:16:22 · 448 阅读 · 6 评论 -
【Vue2.0源码学习】生命周期篇-初始化阶段(initLifecycle)
在上篇文章中,我们介绍了生命周期初始化阶段的整体工作流程,以及在该阶段都做了哪些事情。我们知道了,在该阶段会调用一些初始化函数,对Vue实例的属性、数据等进行初始化工作。那这些初始化函数都初始化了哪些东西以及都怎么初始化的呢?接下来我们就把这些初始化函数一一展开介绍,本篇文章介绍第一个初始化函数。本篇文章介绍了初始化阶段调用的第一个初始化函数——函数。该函数的逻辑非常简单,就是给实例初始化了一些属性,包括以开头的供用户使用的外部属性,也包括以开头的供内部使用的内部属性。原创 2023-08-22 07:21:45 · 531 阅读 · 4 评论 -
【Vue2.0源码学习】生命周期篇-初始化阶段(new Vue)
在Vue中,每个Vue实例从被创建出来到最终被销毁都会经历一个过程,就像人一样,从出生到死亡。在这一过程里会发生许许多多的事,例如设置数据监听,编译模板,组件挂载等。在Vue中,把Vue实例从被创建出来到最终被销毁的这一过程称为Vue实例的生命周期,同时,在Vue实例生命周期的不同阶段Vue还提供了不同的钩子函数,以方便用户在不同的生命周期阶段做一些额外的事情。那么,接下来的几篇文章我们就从源码角度深入剖析一下一个Vue实例在从生到死的生命周期里到底都经历了些什么,每个阶段都做了哪些事情。原创 2023-08-14 08:30:00 · 630 阅读 · 2 评论 -
【Vue2.0源码学习】模板编译篇-模板解析阶段(总结)
到现在,模板编译的三大阶段就已经全部介绍完毕了,接下来本篇文章,就以宏观角度回顾并梳理一下模板编译整个流程是怎样的。首先,我们需要搞清楚模板编译的最终目的是什么,它的最终目的就是:把用户所写的模板转化成供Vue实例在挂载时可调用的render函数。或者你可以这样简单的理解为:模板编译就是一台机器,给它输入模板字符串,它就输出对应的render函数。我们把模板编译的最终目的只要牢记在心以后,那么模板编译中间的所有的变化都是在为达到这个目的而努力。接下来我们就以宏观角度来梳理一下模板编译的整个流程。原创 2023-07-24 08:42:07 · 331 阅读 · 0 评论 -
【Vue2.0源码学习】模板编译篇-模板解析(代码生成阶段)
经过前几篇文章,我们把用户所写的模板字符串先经过解析阶段解析生成对应的抽象语法树AST,接着再经过优化阶段将AST中的静态节点及静态根节点都打上标记,现在终于到了模板编译三大阶段的最后一个阶段了——代码生成阶段。所谓代码生成阶段,到底是要生成什么代码?答:要生成render函数字符串。我们知道,Vue实例在挂载的时候会调用其自身的render函数来生成实例上的template选项所对应的VNode,简单的来说就是Vue只要调用了render函数,就可以把模板转换成对应的虚拟DOM。那么Vue要想调用。原创 2023-07-20 08:30:00 · 397 阅读 · 0 评论 -
【Vue2.0源码学习】模板编译篇-模板解析阶段(优化阶段)
在前几篇文章中,我们介绍了模板编译流程三大阶段中的第一阶段模板解析阶段,在这一阶段主要做的工作是用解析器将用户所写的模板字符串解析成AST抽象语法树,理论上来讲,有了AST就可直接进入第三阶段生成render函数了。其实不然,Vue还是很看重性能的,只要有一点可以优化的地方就要将其进行优化。原创 2023-07-18 08:30:00 · 330 阅读 · 1 评论 -
【Vue2.0源码学习】模板编译篇-模板解析阶段(文本解析器)
在上篇文章中我们说了,当HTML解析器解析到文本内容时会调用4个钩子函数中的chars函数来创建文本型的AST节点,并且也说了在chars函数中会根据文本内容是否包含变量再细分为创建含有变量的AST节点和不包含变量的AST// 当解析到标签的文本时,触发chars chars(text) {从上面代码中可以看到,创建含有变量的AST节点时节点的type属性为2,并且相较于不包含变量的ASTexpression和tokens。那么如何来判断文本里面是否包含变量以及多的那两个属性是什么呢?原创 2023-07-17 08:30:00 · 307 阅读 · 0 评论 -
【Vue2.0源码学习】模板编译篇-模板解析阶段(HTML解析器)
上篇文章中我们说到,在模板解析阶段主线函数parse中,根据要解析的内容不同会调用不同的解析器,而在三个不同的解析器中最主要的当属HTML解析器,为什么这么说呢?因为HTML解析器主要负责解析出模板字符串中有哪些内容,然后根据不同的内容才能调用其他的解析器以及做相应的处理。那么本篇文章就来介绍一下HTML解析器是如何解析出模板字符串中包含的不同的内容的。本篇文章主要介绍了HTML解析器的工作流程以及工作原理,文章比较长,但是逻辑并不复杂。首先介绍了HTML。原创 2023-07-13 08:30:00 · 602 阅读 · 0 评论 -
【Vue2.0源码学习】模板编译篇-模板解析阶段(整体运行流程)
在前几篇文章中,我们介绍了Vue中的虚拟DOM以及虚拟DOM的patch(DOM-Diff)过程,而虚拟DOM存在的必要条件是得先有VNode,那么VNode又是从哪儿来的呢?这就是接下来几篇文章要说的模板编译。你可以这么理解:把用户写的模板进行编译,就会产生VNode。我们知道,在日常开发中,我们把写在标签中的类似于原生HTML的内容称之为模板。这时你可能会问了,为什么说是“类似于原生HTML的内容”而不是“就是HTML的内容”?因为我们在开发中,在标签中除了写一些原生HTML。原创 2023-07-11 08:30:00 · 735 阅读 · 0 评论 -
【Vue2.0源码学习】实例方法篇-生命周期相关方法
与生命周期相关的实例方法有4个,分别是vm.$mount和。其中,和$destroy方法是在函数中挂载到Vue原型上的,$nextTick方法是在函数中挂载到Vue原型上的,而$mount方法是在跨平台的代码中挂载到Vue原型上的。} }当执行和函数后,会向Vue原型上挂载相应的实例方法。接下来,我们就来分析这4个与生命周期相关的实例方法其内部的原理都是怎样的。原创 2023-06-29 08:30:00 · 306 阅读 · 1 评论 -
【Vue2.0源码学习】指令篇-Vue自定义指令
在Vue中,除了Vue本身为我们提供的一些内置指令之外,Vue还支持用户自定义指令。并且用户有两种定义指令的方式:一种是使用全局API——来定义全局指令,这种方式定义的指令会被存放在中;另一种是在组件内的directive选项中定义专为该组件使用的局部指令,这种方式定义的指令会被存放在中。可以看到,无论是使用哪一种方式定义的指令它都是将定义好的指令存放在指定的地方,而并不能让指令生效。那么定义的指令什么时候才会生效呢?或者说它是如何生效的呢?本篇文章就来带你探究自定义指令如何生效的内部原理。原创 2023-06-20 08:15:00 · 673 阅读 · 2 评论 -
【Vue2.0源码学习】全局API篇-Vue中全局API分析
与实例方法不同,实例方法是将方法挂载到Vue的原型上,而全局API是直接在Vue上挂载方法。在Vue中,全局API一共有12个,分别是Vue.extendVue.setVue.deleteVue.filterVue.useVue.mixin。这12个API中有的是我们在日常业务开发中经常会用到的,有的是对Vue内部或外部插件提供的,我们在日常业务开发中几乎用不到。接下来我们就对这12个API逐个进行分析,看看其内部原理都是怎样的。原创 2023-06-05 08:15:00 · 1727 阅读 · 10 评论 -
【Vue2.0源码学习】虚拟DOM篇-Vue中的DOM-优化更新子节点
在上一篇文章中,我们介绍了当新的VNode与旧的oldVNode都是元素节点并且都包含子节点时,Vue对子节点是先外层循环数组,再内层循环数组,每循环外层数组里的一个子节点,就去内层数组里找看有没有与之相同的子节点,最后根据不同的情况作出不同的操作。在上一篇文章的结尾我们也说了,这种方法虽然能够解决问题,但是还存在可优化的地方。比如当包含的子节点数量很多时,这样循环算法的时间复杂度就会变的很大,不利于性能提升。当然,Vue。原创 2023-05-30 08:15:00 · 895 阅读 · 6 评论 -
【Vue2.0源码学习】虚拟DOM篇-Vue中的DOM-更新子节点
在上一篇文章中,我们了解了Vue中的patch过程,即DOM-Diff算法。并且知道了在patch过程中基本会干三件事,分别是:创建节点,删除节点和更新节点。创建节点和删除节点都比较简单,而更新节点因为要处理各种可能出现的情况所以逻辑略微复杂一些,但是没关系,我们通过分析过程,对照源码,画逻辑流程图来帮助我们理解了其中的过程。最后我们还遗留了一个问题,那就是在更新节点过程中,新旧VNode可能都包含有子节点,对于子节点的对比更新会有额外的一些逻辑,那么在本篇文章中我们就来学习在Vue。原创 2023-05-29 08:15:00 · 756 阅读 · 0 评论 -
【Vue2.0源码学习】虚拟DOM篇-Vue中的DOM-Diff
在上一篇文章介绍VNode的时候我们说了,VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点,然后就可以对比新旧两份VNode,找出差异所在,然后更新有差异的DOM节点,最终达到以最少操作真实DOM更新视图的目的。而对比新旧两份VNode并找出差异的过程就是所谓的DOM-Diff过程。DOM-Diff算法是整个虚拟DOM的核心所在,那么接下来,我们就以源码出发,深入研究一下Vue中的DOM-Diff过程是怎样的。在本篇文章中我们介绍了Vue中的DOM-Diff算法:patch过程。原创 2023-05-22 08:15:00 · 813 阅读 · 0 评论 -
【Vue2.0源码学习】虚拟DOM篇-Vue中的虚拟DOM
虚拟DOM,这个名词作为当下的前端开发人员你一定不会陌生,至少会略有耳闻,但不会闻所未闻吧。这也是现在求职面试考察中非常高频的一个考点了。因为在当下的前端三大框架中关于虚拟DOM或多或少都有所涉及,那么接下来,我们就从源码角度出发,看看Vue中的虚拟DOM时怎样的。由于本系列文章是针对Vue源码深入学习的,所以着重分析在Vue中对虚拟DOM是如何实现的,而对于虚拟DOM本身这个概念不做大篇幅的展开讨论,仅从以下几个问题简单介绍:什么是虚拟DOM?所谓虚拟DOM,就是用一个JS对象来描述一个DOM。原创 2023-05-15 08:15:00 · 800 阅读 · 6 评论 -
【Vue2.0源码学习】变化侦测篇-Array的变化侦测
上一篇文章中我们介绍了Object数据的变化侦测方式,本篇文章我们来看一下对Array型数据的变化Vue是如何进行侦测的。为什么Object数据和Array型数据会有两种不同的变化侦测方式?这是因为对于Object数据我们使用的是JS提供的对象原型上的方法,而这个方法是对象原型上的,所以Array无法使用这个方法,所以我们需要对Array型数据设计一套另外的变化侦测机制。万变不离其宗,虽然对Array型数据设计了新的变化侦测机制,但是其根本思路还是不变的。原创 2023-05-08 08:19:02 · 528 阅读 · 2 评论 -
【Vue2.0源码学习】变化侦测篇-Object的变化侦测
我们知道:数据驱动视图的关键点则在于我们如何知道数据发生了变化,只要知道数据在什么时候变了,那么问题就变得迎刃而解,我们只需在数据变化的时候去通知视图更新即可。要想知道数据什么时候被读取了或数据什么时候被改写了,其实不难,JS为我们提供了方法,通过该方法我们就可以轻松的知道数据在什么时候发生变化。在上一章中,我们迈出了第一步:让object数据变的可观测。变的可观测以后,我们就能知道数据什么时候发生了变化,那么当数据发生变化时,我们去通知视图更新就好了。那么问题又来了,视图那么大,我们到底该通知谁去变化。原创 2023-05-01 08:30:00 · 986 阅读 · 2 评论