Vue原始碼分析系列二:$mount()方法
提示:描述都寫在程式碼的註釋中 在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()方法。