vue源码分析系列一：new Vue的初始化过程

- 日理万妓 2022-01-23 14:53 400阅读 0赞

## import Vue from ‘vue’（作者用的vue-cli一键生成） ##

node环境下`import Vue from 'vue'`的作用是什么意思？  
在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：  
![vue各个版本图][vue]  
具体参考：[官网][Link 1]

完整版：同时包含编译器和运行时的版本。

编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

UMD：UMD 版本可以通过

CommonJS：CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。

## 开始看代码： ##

在利用webpack的Vue项目中，在main.js中通过`import Vue from 'vue'`导入的vue包如下图所示。(在node\_modules/vue/package.json中配置了main属性)  
![在这里插入图片描述][20190604102354210.jpg]  
通过官网的解析，我们可以知道：这个包功能其实是不完整的，只有runtime-only的功能。来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码；基本上就是除去编译器的其它一切。

因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：  
webpack：

module.exports = {
      // ...
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
      }
    }

或者我们可以直接引入：`import Vue from '../node_modules/vue/dist/vue.js'`

## 查看主流程上的源码-vue.runtime.common.js ##

`import Vue from 'vue'`过程中，Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。下面是源码中的初始化函数：

initMixin(Vue);
    stateMixin(Vue);
    eventsMixin(Vue);
    lifecycleMixin(Vue);
    renderMixin(Vue);

我们可以改一下：

setTimeout(function(){
    	console.log('初始化开始');
    	initMixin(Vue);
    	stateMixin(Vue);
    	eventsMixin(Vue);
    	lifecycleMixin(Vue);
    	renderMixin(Vue);
    	console.log('初始化结束');
    },2000)

然后重新运行`npm run dev`  
![在这里插入图片描述][20190604103631939.png]  
初始化不依赖浏览器。

## initMixin() ##

## new Vue() ##

在此之前，我修改了一下这3个入口文件：  
![在这里插入图片描述][20190604174956640.jpg]  
index.html

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>vue-cli</title>
      </head>
      <body>
        <div id="application"></div>
        
      </body>
    </html>

App.vue

<template>
      <div id="component">
        <h1>{
       { msg }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'appy',
    	data () {
    		return {
    			msg: 'vue源码解析',
    		}
    	},
    }
    </script>

main.js

import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    Vue.config.performance = true
    
    let vm = new Vue({
      el: '#application',
      components: { App },
      template: '<App/>'
    })
    
    console.log('Vue.version', Vue.version)
    console.log('vm', vm)

通过`initMixin`方法之后，执行 `new Vue()` 操作，在 Vue构造函数内部，调用了vm原型上的 `_init()`方法，在`this._init()`方法中我们目前主要关注的是 `initState()`方法

function Vue (options) {
         if (process.env.NODE_ENV !== 'production' &&
           !(this instanceof Vue)
         ) {
           warn('Vue is a constructor and should be called with the `new` keyword');
         }
         this._init(options);// 在Vue原型上定义了的方法(initMixin方法中)，使构建出来的Vue实例调用
     }

## initState() ##

## initData() ##

## proxy() ##

在这个方法中，通过Object.defineProperty()来实现数据劫持，当我们通过 [this.xxx][] 访问我们定义的数据时，其实就是访问的 this.\_data.xxx，从而达到数据代理的目的-双向数据绑定。

## 总结 ##

Vue 的初始化逻辑写的非常清楚，把不同的功能逻辑拆成一些单独的函数执行，让主线逻辑一目了然，这样的编程思想是非常值得借鉴和学习的。

为了弄清楚模板和数据如何渲染成最终的 DOM，所以各种初始化逻辑我们先不看。在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM，下一节我们来分析 Vue 的挂载过程。

[vue]: /images/20220123/c226fea6f03a44bd9ac4213c05bb6d64.png
[Link 1]: https://cn.vuejs.org/v2/guide/installation.html
[20190604102354210.jpg]: /images/20220123/a8ed6e9e53ea45f1a8741c048d80bda7.png
[20190604103631939.png]: /images/20220123/05cb7f2c134a4dcf90ae71b48fc68d83.png
[20190604174956640.jpg]: /images/20220123/ccb0c1be3c6149af86f342a2c9b9d0e2.png
[this.xxx]: http://this.xxx