上一篇文章我们了解了Vue是怎么一步步变得丰富起来的，从而形成我们的3大框架之一，接下来我们当然是要了解这个Vue是用来干嘛的？怎么发生作用的？本质上Vue就是一个构造函数，所以我们通过new Vue来探究，从这里也可以看出，我们用Vue框架搭建的项目，本质上是一个Vue实例。
new Vue
我们引入vue，然后new Vue创建应用，那么，要探究发生了什么，我们要先找到Vue构造函数定义的地方，上一篇我们知道丰富Vue的文件有4个，它正是在文件src\core\instance\index.js定义的。
如果你还无法确定，可以通过debugger来查看，像这样：
debugger
一般我们像这样创建vue实例,new Vue时传入不同的选项，如el, data, mounted等，我们的思路之一可以是Vue都是怎么处理我们传入的这些选项的。
var vm = new Vue({
el: '#el',
data: {
...
},
mounted() {
...
},
methods: {
....
}
.......
})
接下来我们看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)
}
非常简单是不是，只要符合条件，就执行_init方法，还记得这个_init文件怎么来的吗?上一篇我们已经讲过，通过执行initMixin(Vue)，接下来我们看看_init发生了什么？
this._init(options)
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
// 设置uid
vm._uid = uid++
let startTag, endTag
/* istanbul ignore if */
// 性能相关的操作
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = `vue-perf-start:${vm._uid}`
endTag = `vue-perf-end:${vm._uid}`
mark(startTag) // 这里调用window.performance.mark:从navigetionStart事件发生时刻到记录时刻间隔的毫秒数
}
// a flag to avoid this being observed
// 添加_isVue标记
vm._isVue = true
// merge options
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 {
// 合并options，设置$options
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
// _self执行自身
vm._self = vm
// 初始化生命周期
initLifecycle(vm)
// 初始化事件中心
initEvents(vm)
// 初始化渲染
initRender(vm)
callHook(vm, 'beforeCreate')
// 初始化 data、props、computed、watcher 等等
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
// 调用钩子函数create
callHook(vm, 'created')
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false)
mark(endTag)
measure(`vue ${vm._name} init`, startTag, endTag) // 跟上面的性能操作相对应
}
if (vm.$options.el) {
// 如果存在选择器，则执行挂载方法
vm.$mount(vm.$options.el)
}
}
}
好了，让我们来总结如下：
this._init(options)
让我们来看看用颜色圈出的操作具体是什么意思？
1. vm._uid
2. vm._isVue = true
3. vm.$options
调用mergeOptions合并构造函数的options，如Vue.options，返回的结果赋给vm.$options
4. initProxy（vm）
设置vm._renderProxy = new Proxy(vm, handlers), vm._renderProxy是干嘛用的，暂时不理会。
5. vm._self = vm
6. initLifecycle(vm)
function initLifecycle (vm) {
var options = vm.$options;
// locate first non-abstract parent
var 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 = [];
vm.$refs = {};
vm._watcher = null;
vm._inactive = null;
vm._directInactive = false;
vm._isMounted = false;
vm._isDestroyed = false;
vm._isBeingDestroyed = false;
}
7. initEvents(vm)
function initEvents (vm) {
// 初始化vm._events, vm._hasHookEvent
vm._events = Object.create(null);
vm._hasHookEvent = false;
// init parent attached events
// 如果listeners存在，则进行更新
var listeners = vm.$options._parentListeners;
if (listeners) {
updateComponentListeners(vm, listeners);
}
}
其实它后面是对新旧listeners进行更新，这里暂时不讨论。
8. initRender(vm)
这一步就跟渲染有关了，例如虚拟DOM，创建元素的方法，$slots等，另外，还设置了$attrs和$listeners,并将它们设置为响应式
function initRender (vm) {
vm._vnode = null; // the root of the child tree
vm._staticTrees = null; // v-once cached trees
var options = vm.$options;
var parentVnode = vm.$vnode = options._parentVnode; // the placeholder node in parent tree
var renderContext = parentVnode && parentVnode.context;
vm.$slots = resolveSlots(options._renderChildren, renderContext);
vm.$scopedSlots = emptyObject;
// bind the createElement fn to this instance
// so that we get proper render context inside it.
// args order: tag, data, children, normalizationType, alwaysNormalize
// internal version is used by render functions compiled from templates
vm._c = function (a, b, c, d) { return createElement(vm, a, b, c, d, false); };
// normalization is always applied for the public version, used in
// user-written render functions.
vm.$createElement = function (a, b, c, d) { return createElement(vm, a, b, c, d, true); };
// $attrs & $listeners are exposed for easier HOC creation.
// they need to be reactive so that HOCs using them are always updated
var parentData = parentVnode && parentVnode.data;
/* istanbul ignore else */
{
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, function () {
!isUpdatingChildComponent && warn("$attrs is readonly.", vm);
}, true);
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, function () {
!isUpdatingChildComponent && warn("$listeners is readonly.", vm);
}, true);
}
}
9. callHook(vm, 'beforeCreate')
调用生命周期方法beforeCreate,在这里可以看到beforeCreate之前都做了哪些操作
10. initInjections(vm)
function initInjections (vm) {
var result = resolveInject(vm.$options.inject, vm);
if (result) {
toggleObserving(false);
Object.keys(result).forEach(function (key) {
/* istanbul ignore else */
{
defineReactive(vm, key, result[key], function () {
warn(
"Avoid mutating an injected value directly since the changes will be " +
"overwritten whenever the provided component re-renders. " +
"injection being mutated: \"" + key + "\"",
vm
);
});
}
});
toggleObserving(true);
}
}
这里对我们传入的选项inject进行处理。
11. initState(vm)
function initState (vm) {
vm._watchers = [];
var opts = vm.$options;
if (opts.props) { initProps(vm, opts.props); }
if (opts.methods) { initMethods(vm, opts.methods); // 使用bind方法把methods里面的方法和vm绑定在一起，于是vm上有了这个方法，我们就可以用this.xxx()调用}
if (opts.data) {
initData(vm); // 1. 将data里面的数据定义在vm上，于是我们可以使用this.xxx访问属性；2. observe(data, true)将递归遍历data里面的转为可响应式数据，递归遍历到的数据如果是对象或数组，会被打上_ob_标记
} else {
// 这里将数据可响应化
observe(vm._data = {}, true /* asRootData */);
}
if (opts.computed) { initComputed(vm, opts.computed); }
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch);
}
}
从代码可知，这一步初始化vm.watchers = []，初始化选项computed，watch，props,methods, data并将data里面的数据转为响应式的，主要处理数据相关的
12. initProvide(vm)
function initProvide (vm) {
var provide = vm.$options.provide;
if (provide) {
vm._provided = typeof provide === 'function'
? provide.call(vm)
: provide;
}
}
非常明显，处理我们传入的provide选项。
13. callHook(vm, 'created')
调用生命周期钩子函数created, 说明这时已经初始化好数据，但是并没有把模板正在挂载在元素上，下一步$mount才开始挂载。
14. vm.$mount(vm.$options.el)
如果我们有传入el选项，则会Vue会自动帮我们调用$mount方法，否则需要我们手动去调用vm.$mount()。
var mount = Vue.prototype.$mount;
Vue.prototype.$mount = function (
el,
hydrating
) {
el = el && query(el);
/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
warn(
"Do not mount Vue to <html> or <body> - mount to normal elements instead."
);
return this
}
var options = this.$options;
// resolve template/el and convert to render function
if (!options.render) {
var template = options.template;
if (template) {
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
template = idToTemplate(template);
/* istanbul ignore if */
if ( !template) {
warn(
("Template element not found or is empty: " + (options.template)),
this
);
}
}
} else if (template.nodeType) {
template = template.innerHTML;
} else {
{
warn('invalid template option:' + template, this);
}
return this
}
} else if (el) {
template = getOuterHTML(el);
}
if (template) {
/* istanbul ignore if */
if ( config.performance && mark) {
mark('compile');
}
// 将模板转render函数
var ref = compileToFunctions(template, {
outputSourceRange: "development" !== 'production',
shouldDecodeNewlines: shouldDecodeNewlines,
shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this);
var render = ref.render;
var staticRenderFns = ref.staticRenderFns;
options.render = render;
options.staticRenderFns = staticRenderFns;
/* istanbul ignore if */
if ( config.performance && mark) {
mark('compile end');
measure(("vue " + (this._name) + " compile"), 'compile', 'compile end');
}
}
}
return mount.call(this, el, hydrating)
};
很明显，这里重写了$mount，这个在上一篇中我们已经提及到了，具体$mount做了什么？由于是重点内容，我们将在下一篇继续探讨。
网友评论