vue源码学习笔记

喜欢ヅ旅行 2022-05-22 06:08 307阅读 0赞

**Vue的本质**

Vue的**本质**就是**用一个Function实现的Class**，然后在它的**原型prototype**和**本身上面**扩展一些**属性和方法。**

**它的定义**是在src/core/instance/index.js里面定义

**使用ES5的方式，即用函数来实现一个class**，不用ES6来实现class的原因：在ES5中，是可以往Vue的原型上挂很多方法，并且可以将不同的原型方法拆分到不同的文件下，这样方便代码的管理，不用再单个文件上把Vue的原型方法都定义一遍

**Vue中的全局方法**定义在src/core/global-api里面：定义Vue的全局配置

**一：数据驱动**

Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指**视图是由数据驱动生成**的，对**视图的修改，**不会直接操作 DOM，而是通过**修改数据**。它相比我们传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大**简化了代码量**。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护

可以采用简洁的模板语法来声明式的将数据渲染为 DOM

数据驱动的两个核心思想：模板和数据是如何渲染成最终的DOM；数据更新驱动视图变化

**问题**：vue中模板和数据如何渲染成最终的DOM？？？？

**2、new Vue()发生了什么？**

**1）**new关键字实例化一个对象，Vue()是一个类，在js中类用Function定义

**2）**在Vue()函数中调用初始化函数：Vue 初始化主要就干了几件事情，**合并配置**，**初始化生命周期**，**初始化事件中心**，**初始化渲染**，**初始化data**、**props**、**computed**、**watcher** 等等。Vue 的**初始化逻辑**写的非常清楚，把**不同的功能逻辑**拆成一些**单独的函数**执行，让主线逻辑一目了然

**3）**在**初始化的最后**，检测到如果有 **el 属性**，则调用 **vm.$mount 方法**挂载 vm，**挂载的目标**就是**把模板渲染成最终的 DOM**

分析 Vue 的挂载过程

在vue的项目中去调试vue源码，如下图所示：

import Vue from 'vue'
    
    var vue = new Vue({
    
    el: "#app", data() { return { message: 'hello' } }})

vue的定义是在node\_modules下面定义的，在vue文件夹下面的package.json下面定义了如下内容：

"main": "dist/vue.runtime.esm.js",
    "module": "dist/vue.runtime.esm.js"

如果项目用vue-cli构建的话，那么vue的引进其实是在build/webpack.base.conf.js中进行配置的

resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/distue.esm.js',  //完整的写法：node_modules/vue/dist/vue.esm.js
          '@': resolve('src'),
          'common':resolve('src/common'),
          'components':resolve('src/components')
        }
      }

即：

import Vue from 'vue' 就相当于import Vue from 'node_modules/vue/dist/vue.esm.js'

那调用initMixin()方法时，就是调用这个路径下的文件里面定义的方法，可以在里面添加debugger，然后就可以调试vue中的源码了

在data()属性里面定义了变量之后，就可以通过this.变量名访问到在data()里面定义的变量，这是为什么呢？

通过在初始化函数中调用**initState(vm)**，然后调用初始化data的函数**initData**()，在里面将数据赋给vm\_.data，然后通过**proxy**()将vm.\_data.key替换成vm.key，在proxy()中对vm.\_data.key设置setter  getter，然后通过**Object.defineProperty**(target,key,sharedPropertyDefinition)来实现代理的

import Vue from 'vue' 
    
    var vue = new Vue({
    
       el: "#app",
       mounted: {
          console.log(this.message) //相当于this._data_message,通过proxy做一层代理，主要应用Object.defineProperty()实现一个代理
       },
       data() {
         return {
            message: 'hello'
         }
       }
    })

在init.js文件中初始化函数中有一个initState(vm)，而这个函数是定义在state.js中

export function initState (vm: Component) {
      vm._watchers = []
      const opts = vm.$options
      if (opts.props) initProps(vm, opts.props)
      if (opts.methods) initMethods(vm, opts.methods)
      //如果定义了data，就初始化data
      if (opts.data) {
        initData(vm)
      } else {
        observe(vm._data = {}, true /* asRootData */)
      }
      if (opts.computed) initComputed(vm, opts.computed)
      if (opts.watch && opts.watch !== nativeWatch) {
        initWatch(vm, opts.watch)
      }
    }

initData()函数定义如下：

function initData (vm: Component) {
      let data = vm.$options.data  //在Vue()中的data()中定义的对象
      data = vm._data = typeof data === 'function'  // data = vm._data
        ? getData(data, vm)      //从vm中拿到data  getData(data, vm)
        : data || {}
      //如果data不是一个函数，那么就在浏览器报一个警告  
      if (!isPlainObject(data)) {
        data = {}
        process.env.NODE_ENV !== 'production' && warn(
          'data functions should return an object:\n' +
          'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
          vm
        )
      }
      // proxy data on instance
      const keys = Object.keys(data)
      const props = vm.$options.props
      const methods = vm.$options.methods
      let i = keys.length
      while (i--) {
        const key = keys[i]
        if (process.env.NODE_ENV !== 'production') {
          //methods和data中不能有同名的属性变量,有的话就报警告
          if (methods && hasOwn(methods, key)) {
            warn(
              `Method "${key}" has already been defined as a data property.`,
              vm
            )
          }
        }
        //props和data中不能有同名的属性变量,有的话就报警告
        if (props && hasOwn(props, key)) {
          process.env.NODE_ENV !== 'production' && warn(
            `The data property "${key}" is already declared as a prop. ` +
            `Use prop default value instead.`,
            vm
          )
        } else if (!isReserved(key)) {
          //如果没有同名的话，那就通过proxy()函数进行一个代理
          //vm实例对象，在_data对象上的key添加getter  setter
          proxy(vm, `_data`, key)
        }
      }
      // observe data  初始化的时候对data做了一个响应式的处理
      observe(data, true /* asRootData */)
    }

**3、Vue实例挂载的实现，也就是执行vm.$mount()做了哪些事情**

用的是runtime+compiler的版本，所以入口在entre-runtime-with-compiler.js

Vue中是通过**$mount实例方法**去**挂载vm**的

**$mount**方法定义在**Vue的原型**上：Vue.prototype.$mount

1）首先**缓存**了原型上的 **$mount** 方法

2）**重新定义该方法**

a)  它对 **el** 做了限制，Vue **不能挂载在 body、html** 这样的根节点上

b)  很关键的逻辑 —— 如果**没有定义 render 方法**，则会把 **el** 或者 **template 字符串**转换成 **render 方法**。这里我们要牢记，在 Vue 2.0 版本中，所有 Vue 的组件的渲染最终**都需要 render 方法**，无论我们是用单文件 .vue 方式开发组件，还是写了 el 或者 template 属性，最终**都会转换成 render 方法**，那么这个过程是 Vue 的一个“在线编译”的过程，它是调用 **compileToFunctions** 方法实现的

3)  最后，调用**原先原型上的 $mount** 方法**挂载**

原先原型上的 $mount 方法在 src/platform/web/runtime/index.js 中定义，之所以这么设计完全是为了**复用**，因为它是可以被 runtime only 版本的 Vue 直接使用的

**原先原型上的方法$mount**会调用**mountComponent**()，定义在src/core/instance/lifecycle.js

mountComponent ()核心

a)  先调用 **vm.\_render** 方法生成**VNode**

b)  再**实例化**一个**渲染Watcher**，在它的**回调函数**中会调用 **updateComponent** 方法，最终调用 **vm.\_update** 更新 **DOM**

c)  最后判断**为根节点**时，设置 **vm.\_isMounted** 为 **true（**表示这个实例已经挂载了**）**，同时**执行 mounted** 钩子函数。 这里注意 **vm.$vnode** 表示 **Vue 实例的父虚拟 Node**，所以它为 **Null** 则表示**当前是根 Vue 的实例**。

Watcher的作用

a)  **初始化**的时候**执行回调函数**

b)  当 **vm 实例**中，**监测的数据**发生**变化**的时候**执行回调函数**

mountComponent()方法中的vm.\_reneder()---创建VNode和vm.\_update()---将VNode挂载到DOM上

（1）vm.\_render()：定义在Vue.prototype.\_render上---把实例渲染成一个虚拟 Node

**vm.\_render()** 最终是通过执行 **createElement** 方法，然后返回 **vnode**

Virtual  DOM：用VNode类描述

用一个**原生的 JS 对象**去描述一个 **DOM 节点**，所以它比创建一个 DOM 的代价要小很多。在 Vue.js 中，**Virtual DOM** 是用 **VNode** 这么一个 **Class** 去描述，它是定义在 src/core/vdom/vnode.js 中的

**VNode** 是对**真实 DOM** 的一种**抽象描述**，它的核心定义无非就几个关键**属性，标签名、数据、子节点、键值**等，其它属性都是用来**扩展 VNode 的灵活**性以及实现一些特殊 feature 的。由于 VNode 只是用来映射到真实 DOM 的渲染，不需要包含操作 DOM 的方法，因此它是非常轻量和简单的

**Virtual DOM**映射到真实的DOM上要经历过**VNode**的**create    diff   patch**等过程，**Vnode的create**是通过**createElement**()方法创建的

createElement()创建Vnode

定义在'src/core/vdom/create-elemenet.js'

**createElement** 方法实际上是对 **\_createElement** 方法的**封装**，它允许**传入的参数**更加**灵活**，在处理这些参数后，调用真正创建 VNode 的函数 **\_createElement**

createElement 函数的流程略微有点多—— 这里主要介绍children 的规范化以及 VNode 的创建

children 的规范化：children 变成了一个类型为 VNode 的 Array

由于 **Virtual DOM** 实际上是一个**树状结构**，每一个 **VNode** 可能会有**若干个子节点**，这些**子节点**应该也是 **VNode** 的类型。**\_createElement** 接收的第 4 个参数 **children** 是**任意类型**的，因此我们需要把它们**规范成 VNode 类型**

**根据normalizationType** 的不同，调用了 **normalizeChildren**(children) 和 **simpleNormalizeChildren**(children) 方法，

这两个方法在src/core/vdom/helpers/normalzie-children.js定义

**1）simpleNormalizeChildren ：调用场景**是 **render 函数是编译生成**的。理论上编译生成的 children 都已经是 VNode 类型的，但这里有一个例外，就是 **functional component** 函数式**组件**返回的是**一个数组而不是一个根节点**，所以会通过 **Array.prototype.concat** 方法把整个 children 数组打平，让它的**深度只有一层**

**2）normalizeChildren ：调用场景**有 **2 种**

一个场景是 **render 函数是用户手写**的，当 **children** 只有**一个节点**的时候，Vue.js 从接口层面允许用户把 children 写成基础类型用来创建单个简单的文本节点，这种情况会调用 **createTextVNode** 创建一个**文本节点的 VNode**

**另一个场景是当编译 slot、v-for** 的时候会产生**嵌套数组**的情况，会调用 **normalizeArrayChildren** 方法

**normalizeArrayChildren** 接收 2 个参数，**children** 表示**要规范的子节点**，**nestedIndex** 表示**嵌套的索引**，因为单个 child 可能是一个数组类型

**normalizeArrayChildren** 主要的逻辑就是**遍历 children**，获得**单个节点 c**，然后**对 c 的类型判断：**

1）如果是一个**数组类型**，则**递归调用 normalizeArrayChildren**;

2）如果是**基础类型**，则通过 **createTextVNode** 方法转换成 **VNode 类型**；否则就已经是 VNode 类型

3）如果 children 是一个列表并且列表还存在嵌套的情况，则根据 nestedIndex 去更新它的 key。这里需要注意一点，在遍历的过程中，对这 3 种情况都做了如下处理：如果**存在两个连续的 text节点**，会把它们**合并成一个 text 节点。**

在**createElement**函数中，**规范化children**之后，就会**创建一个VNode的实例**

这里先对 tag 做判断

1）如果是 string 类型，则**接着**判断

a）如果是内置的一些节点，则直接创建一个普通 VNode

b）如果是为已注册的组件名，则通过 **createComponent** 创建一个**组件类型的 VNode**，否则创建一个**未知的标签的 VNode**。**2）如果是 tag 一个 Component 类型**，则直接调用 **createComponent** 创建一个组件类型的 VNode 节点

（2）vm.\_update()：**调用的时机**有两个----首次渲染和数据更新（响应式原理）

**作用**：**把VNode渲染成真实的DOM**，定义在---src/core/instance/lifecycle.js

**\_update 的核心：**调用 **vm.\_\_patch\_\_** 方法，这个方法实际上在不同的平台，比如 web 和 weex 上的定义是不一样的，因此在 web 平台中它的定义在 **src/platforms/web/runtime/index.js**

Vue.prototype.\_\_patch\_\_ = inBrowser ? patch : noop

可以看到，甚至在 **web 平台**上，**是否是服务端渲染**也会对这个方法产生影响。因为在服务端渲染中，**没有真实的浏览器 DOM 环境**，所以不需要把 **VNode 最终转换成 DOM**，因此是一个**空函数**，而在**浏览器端渲染**中，它指向了 **patch** 方法，它的定义在 src/platforms/web/runtime/patch.js中

**createPatchFunction** 内部定义了一系列的辅助方法，最终**返回**了一个 **patch** 方法，这个方法就赋值给了 **vm.\_update** 函数里调用的 **vm.\_\_patch\_\_**

**patch 是平台相关**的，在 Web 和 Weex 环境，它们把虚拟 DOM 映射到 “平台 DOM” 的方法是不同的，并且对 “DOM” 包括的**属性模块创建和更新**也不尽相同。因此每个平台都有各自的 **nodeOps** 和 **modules**，它们的代码需要托管在 src/platforms 这个大目录下

不同平台的 **patch** 的**主要逻辑部分是相同**的，所以这部分公共的部分托管在 **core** 这个大目录下**，差异化部分**只需要通过**参数**来区别，这里用到了一个**函数柯里化的技巧**，通过 **createPatchFunction** 把**差异化参数提前固化**，这样不用每次调用 patch 的时候都传递 nodeOps 和 modules 了，这种编程技巧也非常值得学习。

**nodeOps** 表示对 “平台 DOM” 的一些**操作方法**，**modules** 表示**平台**的一些**模块**，它们会在整个 **patch** 过程的**不同阶段**执行相应的**钩子函数**

**patch() **方法本身，它接收 **4个参数**

**oldVnode** 表示旧的 VNode 节点，它也可以不存在或者是一个 DOM 对象

**vnode** 表示执行 \_render 后返回的 VNode 的节点

**hydrating** 表示是否是服务端渲染

**removeOnly** 是给 transition-group 用的

在 **vm.\_update** 的方法里是这么调用 **patch** 方法

vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)

**hydrating** 在**非服务端渲染**情况下为 **false**，**removeOnly** 为 **false**

由于我们传入的 **oldVnode** 实际上是一个 **DOM container**，所以 **isRealElement** 为 **true**，接下来又通过 **emptyNodeAt** 方法把 **oldVnode 转换成 VNode 对象**，然后再调用 **createElm** 方法

**createElm** 的作用：通过**虚拟节点**创建**真实的 DOM** 并**插入到它的父节点中**

**createElm 关键逻辑：createComponent** 方法目的是**尝试创建子组件**，在当前这个 case 下它的返回值为 **false**

接下来判断 **vnode** 是否包含 **tag**，如果包含，先简单对 tag 的合法性在非生产环境下做校验，**看是否是一个合法标签**

然后再去**调用平台 DOM 的操作**去创建一个**占位符元素**

调用 **createChildren** 方法去**创建子元素，**逻辑如下：

**遍历子虚拟节点**，**递归**调用 **createElm**，这是一种常用的**深度优先的遍历算**法，这里要注意的一点是在遍历过程中会把 **vnode.elm** 作为**父容器的 DOM 节点占位符**传入

**接着**再调用 **invokeCreateHooks** 方法执行所有的 **create 的钩子**，并把 **vnode push** 到 **insertedVnodeQueue** 中

**最后**调用 **insert** 方法把 **DOM 插入到父节点**中，因为是**递归调用**，**子元素会优先调用 insert**，所以整个 **vnode** 树节点的**插入顺序是先子后父**。它的定义在 src/core/vdom/patch.js 上

**insert 逻辑：**调用一些 **nodeOps** 把**子节点插入到父节点**中，这些辅助方法定义在 src/platforms/web/runtime/node-ops.js 中

其实就是调用**原生 DOM** **的 API** 进行 **DOM 操作**

在 **createElm** 过程中，如果 **vnode** 节点**不包含 tag**，则它有可能是一个**注释或者纯文本节点**，可以**直接插入到父元素**中

再回到 **patch** 方法，首次**渲染**我们调用了 **createElm** 方法，这里传入的 **parentElm 是 oldVnode.elm 的父元素**， 实际上整个过程就是**递归创建了一个完整的 DOM 树并插入到 Body 上  
最后**，我们根据之前递归 createElm 生成的 vnode 插入顺序队列，执行相关的 **insert 钩子函数**

**二：组件**

**组件化**：把页面拆分成**多个组件** (component)，每个组件依赖的 **CSS、JavaScript、模板、图片等资源放在一起**开发和维护。组件是**资源独立**的，组件**在系统内部可复用**，**组件和组件之间可以嵌套**

**createElement ()**最终会调用 **\_createElement()**，其中有一段逻辑是对**参数 tag** 的判断，如果是一个**普通的 html 标签**，像上一章的例子那样是一个普通的 div，则会**实例化一个普通 VNode 节点**，否则通过 **createComponent** 方法创建一个**组件 VNode**

**createComponent** ：src/core/vdom/create-component.js

在createComponent()中针对**组件渲染**这个 **case** 主要就 3 个**关键步骤**：  
**构造子类构造函数、安装组件钩子函数、实例化 vnode**

1、构造子类构造函数

在.vue文件中，export \{\}，即输出是一个对象，所以在**createComponent**()函数中会执行

baseCtor.extend(Ctor)

**baseCtor**实际上就是 **Vue**， src/core/global-api/index.js 中的 **initGlobalAPI 函数**

Vue.options._base = Vue

这里是 **Vue.option**，而我们的 **createComponent** 取的是 **context.$options**，实际上在 src/core/instance/init.js 里 Vue 原型上的 **\_init** 函数中有这么一段逻辑

vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    )

把 **Vue** 上的一些 **option** 扩展到了**vm.$option **

**mergeOptions()的作用**：把 **Vue 构造函数**的 **options** 和**用户传入的 option**s 做一层**合并**到 **vm.$options** 上

Vue.extend()：src/core/global-api/extend.js

**作用**：就是**构造一个 Vue 的子类**，使用原型继承的方式把一个**纯对象**转换一个继承于 **Vue 的构造器 Sub** 并**返回**

然后对 Sub 这个**对象本身扩展一些属性**，如扩展 **options**、**添加全局 API** 等

对**配置**中的 **props** 和 **computed** 做了**初始化工作**

最后对这个 **Sub 构造函数**做了**缓存**，避免多次执行 **Vue.extend** 的时候对同一个子组件重复构造

**实例化 Sub** 的时候，就会执行 this.\_init 逻辑再次走到了 **Vue 实例的初始化逻辑**

2、安装组件钩子函数

installComponentHooks(data)

整个**installComponentHooks** 的过程就是把 **componentVNodeHooks** 的**钩子函数合并**到 **data.hook** 中

在 **VNode** 执行 **patch** 的过程中**执行相关的钩子函数**

**在合并**过程中，如果**某个时机的钩子**已经存在 **data.hook** 中，那么通过执行 **mergeHook 函数做合并**，这个逻辑很简单，就是在最终执行的时候，**依次执行**这两个钩子函数即可

3、实例化VNode

通过 **new VNode** 实例化一个 vnode 并返回

需要注意的是**和普通元素节点的 vnode 不同**，**组件的 vnode** 是没有 **children** 的

**组件patch的过程：createComponent  -> 子组件初始化  ->  子组件render -> 子组件patch**

**activeInstance**为当前激活的**vm实例**；vm.**$vnode**为组件的**占位vnode**；vm.**\_vnode**为组件的**渲染vnode**

**嵌套组件**的插入顺序是**先子后父**

通过 **createComponent** 创建了组件 **VNode**，接下来会走到 **vm.\_update**，执行 **vm.\_\_patch\_\_** 去把 **VNode 转换成**真正的 **DOM 节点。组件的 VNode** 如何patch

**patch** 的过程会调用 **createElm** 创建元素节点，定义在src/core/vdom/patch.js

createComponent()

首先对 **vnode.data** 做了一些判断，如果**vnode** 是一个**组件 VNode**，那么条件会满足，并且得到 **i 就是 init 钩子函数**

init() 钩子函数，它是通过 **createComponentInstanceForVnode** 创建一个 **Vue 的实例**，然后调用 **$mount** 方法挂载子组件

createComponentInstanceForVnode()构造的一个**内部组件的参数**，然后执行 **new vnode.componentOptions.Ctor(options)**\------是子组件的构造函数，它实际上是继承于 **Vue 的一个构造器 Sub**，相当于 **new Sub(options)** 这里有几个关键参数要注意几个点，**\_isComponent** 为 **true** 表示它是一个组件，**parent** 表示**当前激活的组件实例**

所以**子组件的实例化**实际上就是在这个**时机**执行的，并且它会执行**实例的 \_init** 方法，代码在 src/core/instance/init.js 中

这里首先是**合并 options** 的过程有变化，**\_isComponent** 为 **true**，所以走到了 **initInternalComponent ()**

initInternalComponent()这个过程我们重点记住以下几个点即可：**opts.parent = options.parent**、**opts.\_parentVnode = parentVnode**，把之前我们通过 **createComponentInstanceForVnode** 函数**传入的几个参数**合并到**内部的选项 $options** 里了

**三、响应式原理**

什么是响应式对象？响应式对象的创建过程？

Vue.js实现**响应式的核心**是利用ES5的**Object.defineProperty(obj,prop,descriptor)，**给对象的属性添加getter  setter，返回这个对象

**响应式对象的定义**：如果**对象的属性**拥有了**setter  getter**，就可以将该对象成为响应式的对象

**在Vue中响应式对象**有：props  data   computed  watcher  methods（如果子属性为对象，则递归的把该对象变成响应式的）

在**生命周期钩子函数**中定义的对象是不具有响应式的

什么是依赖收集？依赖收集的流程和目的

在访问对象的属性的时候，在get中会完成依赖的收集--收集当前正在计算的watcher作为订阅者