目标
深入理解 Vue 的初始化过程，再也不怕
面试官
的那道面试题：
new Vue(options)
发生了什么？
找入口
想知道
new Vue(options)
都做了什么，就得先找到 Vue 的构造函数是在哪声明的，有两个办法：
-
从 rollup 配置文件中找到编译的入口，然后一步步找到 Vue 构造函数，这种方式
费劲
-
通过编写示例代码，然后打断点的方式，一步到位，
简单
我们就采用第二种方式，写示例，打断点，一步到位。
-
在
/examples
目录下增加一个示例文件 ——
test.html
，在文件中添加如下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 源码解读</title>
</head>
<body>
<div id="app">
{
{ msg }}
</div>
<script src="../dist/vue.js"></script>
<script> debugger
new Vue({
el: '#app',
data: {
msg: 'hello vue'
}
}) </script>
</body>
</html>
-
在浏览器中打开控制台，然后打开
test.html
，则会进入断点调试，然后找到 Vue 构造函数所在的文件
得到 Vue 构造函数在
/src/core/instance/index.js
文件中，接下来正式开始源码阅读，带着目标去阅读。
在阅读过程中如遇到看不明白的地方，可通过编写示例代码，然后使用浏览器的调试功能进行一步步调试，配合理解，如果还是理解不了，就做个备注继续向后看，也许你看到其它地方，就突然明白这个地方在做什么，或者回头再来看，就会懂了，源码这个东西，一定要多看，要想精通，一遍两遍肯定是不够的
源码解读 —— Vue 初始化过程
Vue
/src/core/instance/index.js
import { initMixin } from './init'
// Vue 构造函数
function Vue (options) {
// 调用 Vue.prototype._init 方法，该方法是在 initMixin 中定义的
this._init(options)
}
// 定义 Vue.prototype._init 方法
initMixin(Vue)
export default Vue
Vue.prototype._init
/src/core/instance/init.js
/**
* 定义 Vue.prototype._init 方法
* @param {*} Vue Vue 构造函数
*/
export function initMixin (Vue: Class<Component>) {
// 负责 Vue 的初始化过程
Vue.prototype._init = function (options?: Object) {
// vue 实例
const vm: Component = this
// 每个 vue 实例都有一个 _uid，并且是依次递增的
vm._uid = uid++
// a flag to avoid this being observed
vm._isVue = true
// 处理组件配置项
if (options && options._isComponent) {
/**
* 每个子组件初始化时走这里，这里只做了一些性能优化
* 将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率
*/
initI
版权声明：本文为Guolicheng_原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。