Vue原始碼分析系列二：$mount()方法
摘要：
提示：描述都寫在程式碼的註釋中
在initMixin()的最後執行了如下操作:
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
複製程式碼
執行$mount()方法
query()
function qu...
提示：描述都寫在程式碼的註釋中 在initMixin()的最後執行了如下操作:
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
複製程式碼
執行$mount()方法
- query()
function query (el) {
if (typeof el === 'string') {
var selected = document.querySelector(el);
if (!selected) { // 如果存在 el 元素，就直接返回 selected，否則如下
process.env.NODE_ENV !== 'production' && warn(
'Cannot find element: ' + el
);
return document.createElement('div') // 如果不存在el元素，就返回一個空div
}
return selected
} else { // 否則直接返回dom元素
return el
}
}
複製程式碼
vm的原型上本身就定義了一個$mount(如下所示)，然後通過重寫$mount方法，最後返回的時候，呼叫這個快取$mount方法。
Vue.prototype.$mount = function ( // 這是最開始定義的$mount方法，在runtime-only版本中
el,
hydrating
) {
//var inBrowser = typeof window !== 'undefined';
el = el && inBrowser ? query(el) : undefined;
return mountComponent(this, el, hydrating) // 然後執行 mountComponent方法
};
複製程式碼
直接呼叫的$mount程式碼如下
Vue.prototype.$mount = function() {
el = el && query(el); // 表示如果el存在就執行query(el)方法
if (el === document.body || el === document.documentElement) {
// Vue 不能掛載在 body、html 這樣的根節點上，因為它會替換掉這些元素
process.env.NODE_ENV !== 'production' && warn(
"Do not mount Vue to <html> or <body> - mount to normal elements instead."
);
return this
}
// 如果有render方法，就直接 return 並呼叫原先原型原型上的 $mount 方法
// 如果沒有render方法，就判斷有沒有template
// 如果沒有template就會呼叫template = getOuterHTML(el)
// 總之，最終還是會將template轉換成render函式
// 最後再呼叫 mountComponent 方法
if (!this.$options.render) {
if(this.$options.template){
if (template.charAt(0) === '#') { // 我們這裡的 charAt(0) 是 '<'
template = idToTemplate(template);
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && !template) {
warn(
("Template element not found or is empty: " + (options.template)),
this
);
}
}
}
}
// 然後開始編譯
if (template) {
// 通過compileToFunction 生成 render 函式，渲染vnode的時候會用到
var ref = compileToFunctions();
var render = ref.render;
var render = ref.render;
var staticRenderFns = ref.staticRenderFns; // 靜態 render函式
options.render = render; // 會在渲染 Vnode 的時候用到
options.staticRenderFns = staticRenderFns;
}
return mount.call(this, el, hydrating)
// 最後，呼叫原先原型上的 $mount 方法掛載。
// 並執行 mountComponent() 方法
// mountComponent 實在 core/instance/lifecycle 中
}
複製程式碼
mountComponent()方法
function mountComponent (
vm,
el,
hydrating
) {
debugger
vm.$el = el; // 對 el 進行快取
if (!vm.$options.render) { // 如果沒有render函式，包括 template 沒有正確的轉換成render函式，就執行 if 語句
vm.$options.render = createEmptyVNode; // createEmptyVNode
if (process.env.NODE_ENV !== 'production') {
/* istanbul ignore if */
if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
vm.$options.el || el) {
// 如果使用了template而不是render函式但是使用的runtime-only版本，就報這個警告
// 如果使用了template 但是不是用的 compile 版本，也會報警告
warn(
'You are using the runtime-only build of Vue where the template ' +
'compiler is not available. Either pre-compile the templates into ' +
'render functions, or use the compiler-included build.',
vm
);
} else {
// 如果沒有使用 template 或者 render 函式，就報這個警告
warn(
'Failed to mount component: template or render function not defined.',
vm
);
}
}
}
callHook(vm, 'beforeMount');
var updateComponent;
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
// mark 是 util 工具函式中的perf，這裡先不作深入研究，主要研究主線。
// 效能埋點相關
// 提供程式的執行狀況，
updateComponent = function () {
var name = vm._name;
var id = vm._uid;
var startTag = "vue-perf-start:" + id;
var endTag = "vue-perf-end:" + id;
mark(startTag);
var vnode = vm._render();
mark(endTag);
measure(("vue " + name + " render"), startTag, endTag);
mark(startTag);
vm._update(vnode, hydrating);
mark(endTag);
measure(("vue " + name + " patch"), startTag, endTag);
};
} else {
updateComponent = function () {
// vm._render() 方法渲染出來一個 VNode
// jydrating 跟服務端渲染相關，如果沒有啟用的話，其為 false
// 當收集好了依賴之後，會通過 Watcher 的 this.getter(vm, vm) 來呼叫 updateComponent() 方法
vm._update(vm._render(), hydrating); // 然後執行 vm._render()方法
};
}
複製程式碼
updateComponent()
在這個方法裡有兩個方法需要呼叫：vm._render() and vm._update(),先呼叫 _render 方法生成一個vnode，然後將這個vnode傳入到 _update()方法中
updateComponent = function () {
// vm._render() 方法渲染出來一個 VNode
// jydrating 跟服務端渲染相關，如果沒有啟用的話，其為 false
// 當收集好了依賴之後，會通過 Watcher 的 this.getter(vm, vm) 來呼叫 updateComponent() 方法
vm._update(vm._render(), hydrating); // 然後執行 vm._render()方法
};
複製程式碼
new Watcher()
渲染watcher，Watcher 在這裡起到兩個作用，一個是初始化的時候會執行回撥函式，另一個是當 vm 例項中的監測的資料發生變化的時候執行回撥函式
new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */);
var Watcher = function Watcher (
vm,
expOrFn, // 是一個表示式還是一個 fn
cb, // 回撥
options, // 配置
isRenderWatcher // 是否是一個渲染watcher
) {
this.vm = vm;
if (isRenderWatcher) { // 如果是渲染 Watcher
vm._watcher = this; // this 表示 Vue例項, 其中包括了你定義了的資料，也有 $options，還有_data,都可以獲取到你定義的資料
}
vm._watchers.push(this); // 然後將Vue 例項push到 _watchers中， 在initState中 vm._watchers = []
// options
if (options) {
this.deep = !!options.deep;
this.user = !!options.user;
this.lazy = !!options.lazy;
this.sync = !!options.sync;
} else {
this.deep = this.user = this.lazy = this.sync = false;
}
this.cb = cb;
this.id = ++uid$1; // uid for batching
this.active = true;
this.dirty = this.lazy; // for lazy watchers
this.deps = [];
this.newDeps = [];
this.depIds = new _Set();
this.newDepIds = new _Set();
// expOrFn: updateComponent = function() { vm._update(vm._render(), hydrating); }
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: '';
// parse expression for getter
if (typeof expOrFn === 'function') { // 判斷expOrFn是否是一個函式
this.getter = expOrFn; // this => Watcher
} else {
this.getter = parsePath(expOrFn);
if (!this.getter) {
this.getter = function () {};
process.env.NODE_ENV !== 'production' && warn(
"Failed watching path: \"" + expOrFn + "\" " +
'Watcher only accepts simple dot-delimited paths. ' +
'For full control, use a function instead.',
vm
);
}
}
this.value = this.lazy
? undefined
: this.get(); // this表示Watcher,其原型上定義了get方法
};
複製程式碼
Watcher.prototype.get()
在Watcher的建構函式中定義了getter函式：this.getter = expOrFn
。這個expOrFn 是updateComponent方法，在Watcher.prototype.get()
方法中通過this.getter.call(vm, vm)
來呼叫updateComponent方法，然後執行vm._update(vm._render, hydrating)
。
Watcher.prototype.get = function get () {
// 依賴收集
pushTarget(this);
var value;
var vm = this.vm; // this => Watcher,裡面有當前的Vue例項vm
try {
value = this.getter.call(vm, vm);
} catch (e) {
if (this.user) {
handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
} else {
throw e
}
} finally {
// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {
traverse(value);
}
popTarget();
this.cleanupDeps();
}
return value
};
複製程式碼
總結
到這裡，我們知道updateComponent方法會完成整個渲染工作，在系列三中，將深入分析 vm._render()方法以及vm._update()方法。