Vue2源码解读

GISer_Jinger

于 2024-09-16 21:29:49 发布

阅读量1.8k

点赞数 24

分类专栏：面试题目 Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_55049655/article/details/142307148

版权

面试题目同时被 2 个专栏收录

77 篇文章 1 订阅

订阅专栏

Vue

63 篇文章 2 订阅

订阅专栏

vue源码_哔哩哔哩_bilibili

1.Vue源码路径目录解读

Vue2源码的路径目录被设计得非常清晰，每个文件夹都承担着特定的职责和功能。以下是这些主要文件夹（compiler、core、platform、server、sfc、shared）的详细解读：

1. compiler

作用：compiler 文件夹包含了 Vue.js 所有编译相关的代码。它主要负责将模板（template）编译成抽象语法树（AST【前端】AST树详解_前端 ast-CSDN博客），然后对 AST 进行优化，并最终生成渲染函数（render function）。这个过程可以是构建时（offline compilation）通过 webpack、vue-loader 等工具完成，也可以是运行时（runtime compilation）由 Vue.js 自行处理。不过，为了性能考虑，推荐采用构建时编译。

2. core

作用：core 文件夹是 Vue.js 的核心部分，包含了 Vue 的主要实现逻辑。这个文件夹又可以细分为多个子目录，如 instance、observer、vdom 等，分别对应 Vue 实例的创建、响应式系统的实现、虚拟 DOM 的处理等功能。这个文件夹是 Vue 框架的核心所在，实现了 Vue 的核心机制和特性。

3. platform

作用：platform 文件夹为 Vue.js 提供了在不同平台上的支持。Vue.js 是一个跨平台的 MVVM 框架，可以运行在 web 上，也可以配合其他技术（如 Weex）运行在 native 客户端上。这个文件夹包含了多个子目录，对应不分别同的平台入口和实现。

4. server

作用：server 文件夹包含了服务端渲染（SSR）相关的逻辑。服务端渲染的主要工作是将 Vue 组件渲染为服务器端的 HTML 字符串，然后将这些字符串直接发送到浏览器。这样做的好处是可以加快首屏渲染速度，提升用户体验。在 Vue.js 2.0 中，服务端渲染的支持被加入到了框架中，开发者可以通过这个文件夹中的代码来实现服务端渲染。

5. sfc

作用：sfc（Single-File Component）文件夹用于处理 .vue 单文件组件。Vue.js 支持以单文件组件的形式编写组件，这种方式将模板、脚本、样式封装在一个文件中，便于管理和维护。sfc 文件夹中的代码逻辑会将 .vue 文件内容解析成一个 JavaScript 对象，以便在 Vue.js 中使用。

6. shared

作用：shared 文件夹包含了一些辅助的方法、常量和工具函数，这些代码可以在 Vue.js 的不同部分中共享。例如，Vue.js 会在内部定义一些工具方法，这些工具方法既可以在浏览器端的 Vue.js 中使用，也可以在服务端的 Vue.js 中使用。将这些共享的代码放在一个独立的文件夹中，有助于减少代码的重复和提高代码的可维护性。

2.Vue实例初始化

在Vue 2中，当你通过new Vue({...})来创建一个Vue实例对象时，这个过程中涉及的主要源码分布在多个文件夹下，但主要的核心逻辑集中在core和instance文件夹中。下面是一个简化的概述，帮助你理解这个过程：

core/index.js:
这是Vue 2核心模块的入口文件。当你通过import Vue from 'vue'引入Vue时，实际上是在引入这个文件中导出的Vue构造函数。这个文件通常会将Vue的多个核心功能（如全局API、Vue.extend等）和Vue实例的构造函数（在instance/index.js中定义）组合起来，然后导出。
instance/index.js:
这个文件定义了Vue的构造函数，以及Vue实例的初始化逻辑。当你调用new Vue({...})时，实际上是在调用这个构造函数。构造函数内部会执行一系列的初始化步骤，包括选项合并、子组件注册、实例属性初始化、生命周期钩子调用等。
instance/init.js:
这个文件包含了Vue实例初始化过程中的多个重要函数，如initLifecycle（初始化生命周期）、initEvents（初始化事件）、initRender（初始化渲染）等。这些函数在Vue实例的构造函数中被调用，用于设置实例的初始状态。
instance/state.js:
这个文件负责处理Vue实例的状态管理，包括数据响应式系统（通过Observer类）的初始化、计算属性（computed）、侦听器（watchers）的创建等。这是Vue响应式系统的核心部分。
observer/index.js 和其他相关文件:
虽然这些文件不在instance文件夹下，但它们与Vue实例的响应式系统密切相关。observer/index.js通常包含了Vue响应式系统的核心实现，如Observer类，它负责将Vue实例的data、computed等属性转换为响应式数据。
vdom/index.js 和其他相关文件:
Vue的虚拟DOM实现也在这个过程中起到关键作用。虽然虚拟DOM的创建和更新不直接由Vue实例的构造函数控制，但Vue实例的渲染过程（通过$mount方法）会依赖于虚拟DOM。这些逻辑主要在vdom文件夹下的文件中实现。
compiler/index.js 和其他相关文件（如果使用了模板）:
如果你在Vue实例中使用了模板（而不是渲染函数），那么Vue的编译器将负责将模板编译成渲染函数。这个过程在构建时（通过预编译器如vue-loader）或运行时（如果启用了运行时编译）发生。compiler文件夹下的文件包含了模板编译的相关逻辑。

需要注意的是，上述描述是一个简化的概述，Vue 2的源码实际上更加复杂，包含了许多其他的功能和细节。此外，随着Vue版本的更新，源码结构可能会有所变化。但总的来说，core和instance文件夹是理解Vue实例创建过程的关键。

3.Vue中渲染过程

三种渲染方式

在Vue中，与渲染相关的三个核心方法或概念主要是：render 函数、$mount 方法以及（在模板编译过程中涉及的）compile 过程（尽管compile不是Vue实例直接调用的方法，但它对于理解模板如何被转换为渲染函数至关重要）。下面我将分别解释这三个方面：

1. `render` 函数

render 函数是Vue组件中的一个选项，它允许你使用JavaScript来描述你的组件输出。这个函数接收一个createElement函数作为参数，用于创建虚拟DOM节点。render函数是Vue 2.x中推荐的创建组件输出的方式，因为它提供了比模板更高的灵活性和性能。

Vue.component('anchored-heading', {  
  render: function (createElement) {  
    return createElement(  
      'h1', // 标签名称  
      this.$slots.default // 子节点数组  
    )  
  },  
  props: {  
    level: {  
      type: Number,  
      required: true  
    }  
  }  
})

2. `$mount` 方法

$mount 是Vue实例的一个方法，用于将Vue实例挂载到DOM上。如果Vue实例在实例化时没有接收到el选项（即没有指定挂载点），那么你可以稍后通过调用$mount方法来手动挂载它。$mount方法可以接受一个字符串（表示CSS选择器）或一个DOM元素作为参数，Vue实例将挂载到这个元素上。

var vm = new Vue({  
  // 选项...  
}).$mount('#app') // 挂载到#app元素上

或者，如果你已经有一个DOM元素，你可以直接传递这个元素给$mount：

var mountPoint = document.querySelector('#app')  
var vm = new Vue({  
  // 选项...  
}).$mount(mountPoint)

3. `compile` 过程（template,非直接调用）

虽然compile不是Vue实例直接调用的方法，但它是Vue内部用于将模板字符串编译成渲染函数的过程。在Vue 2.x中，如果你使用了模板（通过template选项或.vue文件中的<template>部分），Vue会在组件实例化时自动调用编译过程，将模板转换为渲染函数。这个过程发生在$mount之前，因为Vue需要渲染函数来生成虚拟DOM，进而更新真实的DOM。

需要注意的是，在Vue 2.x中，如果你使用了构建时预编译（例如通过vue-loader），那么模板已经被编译成了渲染函数，Vue在运行时就不需要再次编译了。这可以显著提高性能。

在Vue 3.x中，编译过程有所变化，因为Vue 3引入了编译时优化和更高效的编译策略，但基本概念仍然相同：模板被编译成渲染函数，然后Vue使用这些渲染函数来生成和更新DOM。

2.渲染过程

Vue与React的Diff算法-CSDN博客

Vue的渲染过程是一个复杂而高效的数据到视图的映射过程，它依赖于Vue的响应式系统和虚拟DOM技术。下面将详细解析Vue的渲染过程：

一、初始化阶段

创建Vue实例：
通过new Vue(options)创建一个Vue实例。在这个阶段，Vue会进行一系列的初始化工作，包括设置数据观测、初始化事件系统、编译模板等。
实例配置：
Vue实例接收一个选项对象，该对象包含数据、模板、挂载元素、方法、生命周期钩子等选项。这些选项将用于配置Vue实例的行为。
数据响应式：
Vue通过Object.defineProperty()（在Vue 3中改为使用Proxy）将data对象的所有属性转换成getter/setter。这样，每当这些属性被访问或修改时，Vue都能够知道并执行相应的逻辑，如视图更新。

二、模板编译阶段

模板解析：
Vue会将template选项中的模板字符串或.vue文件中的<template>部分转换成渲染函数。如果没有提供template，则会将挂载元素的外部HTML作为模板使用。
生成AST（抽象语法树）：
模板解析的过程中，Vue会捕获语法并生成AST。AST是源代码的抽象语法结构的树状表现形式，用于表示模板中的元素、指令、属性等。
优化和生成渲染函数：
Vue会对AST进行优化处理，如移除静态节点、标记动态节点等，然后生成一个渲染函数。渲染函数是一个JavaScript函数，它接收一个createElement函数作为参数，并返回一个虚拟DOM树。

三、挂载阶段

调用beforeMount钩子：
在挂载开始之前，Vue会调用beforeMount钩子。此时，模板已经编译成渲染函数，但尚未生成或挂载真实的DOM。
生成虚拟DOM：
Vue会调用渲染函数生成虚拟DOM树。虚拟DOM是一个轻量级的JavaScript对象，它是对真实DOM的抽象表示。
挂载真实DOM：
Vue将虚拟DOM树转换为真实DOM，并将其挂载到指定的DOM元素上。这一过程称为“挂载”。
调用mounted钩子：
挂载完成后，Vue会调用mounted钩子。此时，组件已经出现在页面上，可以进行DOM操作和数据获取。

四、更新阶段

数据变化检测：
当响应式数据发生变化时，Vue的依赖收集系统能够检测到这些变化。
重新渲染：
Vue会调用渲染函数生成新的虚拟DOM树。
DOM Diffing：
Vue会使用Diff算法比较新旧虚拟DOM树的差异，找出需要更新的部分。
DOM更新：
Vue将变化应用到真实DOM上，完成DOM更新。
调用beforeUpdate和updated钩子：
在数据变化导致视图重新渲染前后，Vue会分别调用beforeUpdate和updated钩子。