Vue源码分析生命周期

背景

vue 版本

2.5.21

本篇内容

Vue 的生命周期

源码开始

1. package.json

scrpit 内，npm run dev 的命令：

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"

• 其中 rollup 是一个打包工具，类似 webpack。

  rollup: Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

• 打包的代码在scripts/config.js

2. scripts/config.js

根据 TARGET:web-full-dev 找到如下代码：

// Runtime+compiler development build (Browser)
'web-full-dev': {entry: resolve('web/entry-runtime-with-compiler.js'),
  dest: resolve('dist/vue.js'),
  format: 'umd',
  env: 'development',
  alias: {he: './entity-decoder'},
  banner
}

找到入口文件在web/entry-runtime-with-compiler.js

3. src\platforms\web\entry-runtime-with-compiler.js

vue 来自于./runtime/index

import Vue from './runtime/index'

4. src\platforms\web\runtime\index.js

Vue 来自于core/index

import Vue from 'core/index'

5. src\core\index.js

Vue 来自于./instance/index

import Vue from './instance/index'

6. src\core\instance\index.js

一直跟到这里，Vue 终于露出庐山真面目。

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)
}