接著上節Vue Watcher源碼的話，繼續探討，目前是這么個過程：
函數大概是這里：
// line-3846 Vue.prototype._render = function() { // 獲取參數 try { // 死在這兒 vnode = render.call(vm._renderProxy, vm.$createElement); } catch (e) { // 報render錯誤 } // return empty vnode in case the render function errored out if (!(vnode instanceof VNode)) { // 返回空節點 } // set parent vnode.parent = _parentVnode; return vnode };然后，在上個月，我卡死在了render.call這個函數上面，因為所有vue實例被設置了proxy代理，所以會跳轉到各種奇怪的檢測函數中。
過了一個月，我依然看不懂，一點都不想講，所以先跳過，直接看后面！
這里假設vnode已經返回了，來看看是個啥：
這是一個虛擬節點，由之前字符串化后的DOM樹生成，主要包含子節點、上下文、屬性、文本、標簽名、類型等屬性，這些可以直接從鍵名判斷。
得到vnode后，由于這里是根節點，所以不存在_parentVnode，直接返回。
然后到了mountComponent函數：
// line-2374 function mountComponent(vm, el, hydrating) { vm.$el = el; // error callHook(vm, 'beforeMount'); var updateComponent; /* istanbul ignore if */ if ("development" !== 'production' && config.performance && mark) { updateComponent = function() { // 開發者模式下的處理方式 }; } else { // 重新進入這里 updateComponent = function() { vm._update(vm._render(), hydrating); }; } vm._watcher = new Watcher(vm, updateComponent, noop); hydrating = false; // manually mounted instance, call mounted on self // mounted is called for render-created child components in its inserted hook if (vm.$vnode == null) { vm._isMounted = true; callHook(vm, 'mounted'); } return vm }這樣，就帶著返回的vode進入了_update函數，開始正式渲染頁面。
函數如下：
// line-2374 Vue.prototype._update = function(vnode, hydrating) { var vm = this; if (vm._isMounted) { callHook(vm, 'beforeUpdate'); } // 保存原屬性 var prevEl = vm.$el; var prevVnode = vm._vnode; var prevActiveInstance = activeInstance; activeInstance = vm; vm._vnode = vnode; // patch if (!prevVnode) { // 初始化渲染 vm.$el = vm.__patch__( vm.$el, vnode, hydrating, false /* removeOnly */ , vm.$options._parentElm, vm.$options._refElm ); } else { // 更新 vm.$el = vm.__patch__(prevVnode, vnode); } activeInstance = prevActiveInstance; // update __vue__ reference if (prevEl) { prevEl.__vue__ = null; } if (vm.$el) { vm.$el.__vue__ = vm; } // if parent is an HOC, update its $el as well // HOC => High Order Component => 高階組件 if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) { vm.$parent.$el = vm.$el; } // updated hook is called by the scheduler to ensure that children are // updated in a parent's updated hook. };由于是初次渲染，所以會進入第一個條件分支，并調用__patch__函數，傳入原生DOM節點、虛擬DOM、false三個參數。
__patch__在加載框架時候已經注入了，見代碼：
// line-7526 // install platform patch function Vue$3.prototype.__patch__ = inBrowser ? patch : noop; // line-6968 var patch = createPatchFunction({ nodeOps: nodeOps, modules: modules });這里，nodeOps為封裝的DOM操作操作方法，modules為屬性、指令等相關方法。
這個createPatchFunction函數的構造相當于一個模塊，里面包含大量的方法，但是最后不是返回一個對象包含內部方法的引用，而是返回一個函數，形式大概如下：
// line-4762 function createPatchFunction() { // fn1... // fn2... return function patch() { // 調用內部方法fn1,fn2... } }方法比較多，下次再講，邊跑流程邊看。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
