vueJs 源码解析 （三） 具体代码
在之前的文章中提到了 vuejs 源码中的 架构部分，以及 谈论到了 vue 源码三要素 vm、compiler、watcher 这三要素，那么今天我们就从这三要素逐步了解清楚
好了，话不多说， let's do it
在这之前，我们需要 对上文中讲到的 vuejs 的源码是 flow 写法的问题进行一个简化。 毕竟还有有工具是可以解决的。
可以用babel-plugin-transform-flow-strip-types去转化下即可。
1、 npm install --save-dev babel-plugin-transform-flow-strip-types
2、 .babelrc 文件中
{
"plugins": ["transform-flow-strip-types"]
}
具体转换方法见 github地址
一、 instance 实例化入口 核心代码
/src/core/instance/index.js
import { initMixin } from './init' // 实例化 混合
import { stateMixin } from './state' // 各类数据应用 混合
import { renderMixin } from './render' // render 函数等 混合
import { eventsMixin } from './events' // 例如 父子组件的 emit on 事件
import { lifecycleMixin } from './lifecycle' // 这个暂时比较模糊，后面的文章更新
import { warn } from '../util/index' // warn 报错工具 在控制台经常会看到的 vue 的warn
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue) // 这里就是判断当前 this 的 prototype 是否是 Vue
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue
一、 instance 实例化入口 核心代码 之 init.js
核心代码区块一：
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options);
} else {
vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor),
options || {}, vm);
}
解析：
判断传入的值当中是否有组件，如果有则先实例化组件。
核心代码区块二：
vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
解析：
看字面上的意思是分别一次 实例化了 生命周期、事件、渲染函数 、回调钩子 ‘beforeCreate’、
依赖注入、状态、 提供 、回调钩子 ‘created’、
对，看到这里我们还是很奇怪这些东西是干嘛的？
那么下面我们继续依次往下看：
一、实例化生命周期 initLifecycle
vm.$parent = parent;
vm.$root = parent ? parent.$root : vm;
vm.$children = [];
vm.$refs = {};
vm._watcher = null;
vm._inactive = null;
vm._directInactive = false;
vm._isMounted = false;
vm._isDestroyed = false;
vm._isBeingDestroyed = false;
看上去是增加了一系列的 属性。但是还是不知道这个有什么用。不着急，我们继续往下看。
二、实例化生命周期 initEvents
export function initEvents(vm) {
vm._events = Object.create(null);
vm._hasHookEvent = false;
// init parent attached events
const listeners = vm.$options._parentListeners;
if (listeners) {
updateComponentListeners(vm, listeners);
}
}
再走到这步的时候就会发现， vm.$options 这个对象 频频出现在我们的视野中，如果每次都不能理解的话。就会遇到 理解障碍。 那么 我们就需要 做一个 最简单的测试用例。 （实际的把 vue 跑起来）
三、new Vue({ options }) Vue 最简单的测试用例
我们在created 钩子下打印 this 对象 部分结果如下
console.log(this)
// console.log(this)
_events: {}
_hasHookEvent :false
_inactive :null
_isBeingDestroyed :false
_isDestroyed :false
_isMounted: true
_isVue: true
这里我们就能够看到比较清晰的一些属性了 在 init.js 中的第一步 initLifecycle.js 中定义的
// console.log(this)
_events: {} // 事件对象集合
_hasHookEvent :false // 是否有钩子事件
_inactive :null // 未知
_isBeingDestroyed :false // 是否要销毁
_isDestroyed :false // 是否已经销毁
_isMounted: true // 是否已挂载
_isVue: true // 是否是 Vue 对象
这里我们就再回到 initLifecycle.js 源码 中去看
const options = vm.$options;
let parent = options.parent;
if (parent && !options.abstract) {
while (parent.$options.abstract && parent.$parent) {
parent = parent.$parent;
}
parent.$children.push(vm);
}
vm.$parent = parent;
vm.$root = parent ? parent.$root : vm;
vm.$children = []; // 这里定义的 children 数字对象未知是什么意思
vm.$refs = {}; // 这里定义的 refs 对象依然未知
走到这一步 大概对 vm.$options 这个对象 有个初步的了解，但是还有部分依然是未知。好了，我们继续往下走。
四、 我回到 第二步 实例化生命周期 initEvents
export function initEvents(vm) {
vm._events = Object.create(null);
vm._hasHookEvent = false;
// init parent attached events
const listeners = vm.$options._parentListeners;
if (listeners) {
updateComponentListeners(vm, listeners);
}
}
给 vm 对象 新增了一个 _events 对象 ， 并且会去判断 vm.$options 是否有父级的事件监听。
propsData : undefined
_componentTag : "App"
_parentElm : null
_parentListeners : undefined
_parentVnode : VNode {tag: "vue-component-1-Apps-test", data: {…}, children: undefined, text: undefined, elm: div.test11, …}
_refElm : null
_renderChildren : undefined
_parentListeners 值为空。 这里我们做一个大胆的假设： 是否有组件的引用的时候这个值就会发生改变。 那么下面我们简单的测试下。新增一个基础组件.
// 验证失败：这个值依然还是为 空
// 但是弄清楚了一个问题：
this.$root // 为根对象
this.$root.$parent // 根对象的 父属性一定是为空
this.$root.$children // 根对象的 子代属性一定是 一个数组。
// 如果你引用的 组件
this.$root.$children[0] // 为第一个组件
this.$root.$children[1] // 为第二个组件
...
// 以此类推
好，我们接着往下看
五、 initRender(vm)
第五步： 比较核心的 渲染功能。
今天先到这里... 先下个班，回家继续整理