Web前端最全vue2源码解析——new Vue()这个过程究竟做了什么？，前端开发基础不牢

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

在Vue中，组件实例的创建并不需要显式地使用 new Vue()，而是通过Vue组件系统来创建组件实例。当我们在Vue应用中定义一个组件时，Vue会在内部帮我们处理组件实例的创建和管理。在Vue中，组件实例的创建过程大致可以分为以下几个步骤：

1. 组件定义： 我们在Vue应用中定义一个组件，可以是全局注册的组件，也可以是局部注册的组件（在父组件中注册）。
2. 组件实例化： 当组件在模板中被使用时，Vue会根据组件定义自动实例化组件。这个过程是由Vue的编译器负责的。
3. 虚拟DOM的创建： Vue会根据组件的模板（template）生成虚拟DOM（Virtual DOM）。
4. 挂载组件： Vue会将生成的虚拟DOM挂载到实际的DOM元素上，这个过程是在组件的生命周期钩子函数中的 mounted 钩子中完成的。
5. 更新组件： 当组件的数据发生变化时，Vue会重新渲染组件，并更新视图。这个过程是在组件的生命周期钩子函数中的 updated 钩子中完成的。
6. 销毁组件： 当组件不再需要时（比如组件被销毁或者不再显示），Vue会在适当的时机销毁组件实例，释放组件占用的资源。这个过程是在组件的生命周期钩子函数中的 beforeDestroy 和 destroyed 钩子中完成的。

总的来说，组件实例的创建过程是由Vue自动管理的，我们只需要定义好组件，然后在需要的地方使用组件即可。Vue会负责处理组件实例的创建、更新和销毁等过程，我们不需要手动去实例化组件。这种抽象的方式让我们可以更专注于组件的功能和交互，而不必过多关注底层的实例化细节。

new Vue生命周期过程

在了解了new Vue是干什么的，以及组件实例和根实例的作用，再来看vue组件实例/根实例的生命周期就有思路了。Vue 实例的生命周期过程可以分为以下几个阶段：

1. 初始化阶段（Initialization）：

• beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。
• created：实例已经创建完成，数据观测和事件配置已完成，但尚未挂载到 DOM 上。

2. 模板编译阶段（Template Compilation）：

• beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted：实例已经挂载到 DOM 上后被调用，这时可以访问到DOM元素。

3. 更新阶段（Updating）：

• beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
• updated：数据更新后调用，发生在虚拟 DOM 重新渲染和打补丁之后。

4. 销毁阶段（Destruction）：

• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：实例销毁后调用。在这一步，Vue 实例的所有指令已经解绑，所有事件监听器已经移除，所有子实例也已经被销毁。

在 Vue 实例的生命周期中，开发者可以利用这些生命周期钩子函数来执行各种操作，比如在数据初始化前后执行某些逻辑、在 DOM 渲染前后执行某些操作、在组件销毁前后清理资源等。生命周期钩子函数提供了丰富的扩展能力，可以帮助开发者更好地控制应用的行为。

源码相关术语解释

源码中的类、构造函数、属性、方法、实例的解释

Vue：表示vue的构造函数

Vue.prototype.**：表示给构造函数增加**方法

vm：表示vue实例

vm.**：获取vm实例的属性或调用vm实例的方法

vm.$options:获取vm实例的$options属性

vnode：虚拟节点

vm._render：渲染函数，将模板转换虚拟dom

vm._update：调用组件更新方法

Watcher类：监听模板变化的监听器；监听vm数据变化重新渲染。数据变化执行updated

hook：生命周期名字

callHook(vm, ‘***’) ：在当前vue组件实例中，调用某个生命周期钩子注册的所有回调函数。

Vue构造函数和vm实例

vue实例，在源码中通过new function Vue构造函数的方式生成。源码通过mixin混入，将外部定义的Vue.prototype.**原型方法与Vue构造函数结合，扩展Vue的方法。

Vue原型总共提供了下面方法：事件相关$on$once$off$emit；初始化相关_init；更新相关_update$forceUpdate$destroy;渲染相关$$\begin{gathered} nextTick{ \\ }_{r}ender；状态相关 \end{gathered}$$set$delete等。挂载$mount方法

vm可以访问哪些属性和方法呢 ？

在vue的类型定义，component.ts文件里可以看到vm的类型

vm.$options——获取vm实例相关属性

vm.$options：在源码中大量出现！用于 访问和操作 Vue 实例的初始化选项，在运行时方便地获取到实例的配置信息，并根据这些信息进行相应的处理。

可以通过$options获取vm实例的哪些属性呢？

从$options的类型定义ComponentOptions可以看到，$options对象可以访问的属性几乎包括了vm实例所有的事件、属性、方法。包括选项式api提供的data\props\computed\method\watch等；dom相关的挂载点、render函数等；生命周期相关的钩子函数；指令，依赖注入以及一些vm的私有属性。

源码解析

初始化事件绑定和父子关系

源码关于实例化过程，在 vue-main\src\core\instance\index.ts中，可以看到Vue的构造函数，function Vue（）。同时，下面还做了混入方法，混入方法就是给Vue原型增加方法。

在vue-main\src\core\instance\init.ts文件中可以看到额外扩展了Vue原型的__init方法

initLifecycle方法

initLifecycle 方法主要完成了初始化了父子组件关系：

• 将当前组件的父组件设置为传入的 parent 组件。
• 将当前组件添加到父组件的子组件列表中。

初始化组件的生命周期相关属性：

初始化了 _isMounted 属性，用来表示组件是否已经挂载。初始化了 _isDestroyed 属性，用来表示组件是否已经销毁。初始化了 _isBeingDestroyed 属性，用来表示组件是否正在被销毁。初始化了 _inactive 属性，用来表示组件是否处于非活动状态。

initEvents方法

initEvents 主要负责初始化事件相关的数据结构，并处理父组件传递的事件监听器，确保组件在初始化时能够正确处理事件。initEvents 函数主要完成了以下几个步骤：

1. 创建了一个空对象 _events 用来存储事件监听器。
2. 将 _hasHookEvent 标记设置为 false，用来表示当前组件是否有钩子函数相关的事件。
3. 检查是否有父组件传递的事件监听器，如果有的话则调用 updateComponentListeners 函数来更新组件的监听器。

初始化依赖注入和响应式数据

initInjections方法

initInjections 函数主要负责解析注入属性的值，为这些注入属性设置响应式，并在开发环境下给出警告，防止直接修改注入属性导致不可预料的问题

initState方法

initState 函数主要负责初始化组件的 props、setup、methods、data、computed 和 watch 等状态，为组件的各种状态做准备工作，以便在组件实例化时能够正确地使用这些状态。

在beforeCreate钩子的时候我们没有对props、methods、data、computed、watch上的数据的访问权限。在created中才可以

initProvide方法

initProvide 函数的作用是初始化组件的 provide 数据，将 provide 数据提供给组件的后代组件使用。这样可以在组件树中实现跨层级传递数据，为子组件提供共享的数据或方法。

模板渲染

在created方法后，beforeMount之前，执行的是模板转换为render函数的过程。new Vue示例图中没有el属性才会去调$mount方法。但是在源码中，created钩子之后，判断el存在也会去调$mount方法。

$mount方法

$mount中进行模板渲染，在源码中重写$mount方法。如果vue的$options上有render方法，则返回。否则，根据template生成render函数。没有template的话，调el挂载的html解析为template模板。不用进行render函数生成。

组件挂载

组件挂载的过程核心部分在mountComponent方法中实现。

mountCompontent方法

每个组件有对应的Watcher，数值变化会触发其update函数导致重新渲染mountComponent核心就是实例化一个渲染watcher，在它的回调函数中调用updateComponent方法。

updateComponent更新模板方法，其中有两个核心方法：vm_render用于生成虚拟Dom，和vm_.update将虚拟dom映射到真实dom。

在mountComponent方法里，使用vm.$el接收el变量。执行beforeMount钩子函数。设置更新模板逻辑updateComponent方法。设置watcher监听选项，内置了beforeUpdate方法。

核心是通过new Watcher创建了一个watcher实例，watcher监听组件vm实例，当数据发生变化时触发模板的更新。

在执行完 vm._update() 把VNode patch到真实Dom后，执行 mouted钩子。也就明白了为什么直到mounted阶段才名正言顺的拿到了Dom

组件更新

组件更新，核心调用的是_update方法

watcher.run() => componentUpdate() => render() => update() => patch()

这个方法里通过vm的__patch__方法比较新旧vnode节点差异，并将返回值复制给vm.$el。

看下__patch__在浏览器运行时，是patch方法。

patch方法又通过createPatchFunction创建。

createPatchFunction方法

createPatchFunction方法是Vue源码中的一个核心函数，主要负责创建一个用于对比和更新虚拟DOM树的patch函数。在Vue中，虚拟DOM的概念被用来描述真实DOM树的轻量级表示，通过对比新旧虚拟DOM树的差异，可以高效地更新真实DOM，实现页面的响应式更新。

具体来说，createPatchFunction方法主要完成以下几个功能：

1. 根据传入的backend参数生成对应的patch函数，backend包含了一系列操作DOM的方法，如创建元素、插入元素、更新元素等。
2. 在生成patch函数时，会根据平台的不同（如浏览器、Weex等），选择不同的backend，以适配不同的环境。
3. patch函数的核心功能是对比新旧虚拟DOM树的差异，并将这些差异应用到真实DOM上，从而实现页面的更新。
4. patch函数会递归地遍历新旧虚拟DOM树的节点，找出差异并更新对应的真实DOM节点，以确保页面与最新的虚拟DOM树保持同步。

总的来说，createPatchFunction方法的作用是生成一个用于对比和更新虚拟DOM树的patch函数，是Vue实现响应式更新的重要组成部分。

本文不做虚拟dom和patch过程的详细展开

生命周期钩子函数

在创建一个Vue实例时，Vue会在实例化过程中执行一系列的生命周期钩子函数，这些钩子函数允许开发者在不同的阶段插入自定义逻辑。

以下是在new Vue的过程中组件生命周期钩子函数做的事情：

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在这个阶段，实例的属性和方法是不可用的，在这个阶段，可以进行一些初始化工作，例如设置一些默认值、初始化一些变量或者进行一些全局配置。。

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

以下是在new Vue的过程中组件生命周期钩子函数做的事情：

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在这个阶段，实例的属性和方法是不可用的，在这个阶段，可以进行一些初始化工作，例如设置一些默认值、初始化一些变量或者进行一些全局配置。。

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-pOXwpRhy-1715175707694)]