前言
距離上一篇博文的更新時間已經過了一個月，一則是除了開發自己的項目之外，還臨時接手了其他同事的開發任務，大家都懂得。二則是寫這篇博文需要准備的東西着實不少，調試、畫圖、總結、整理筆記，需要花不少時間和精力。當然本着擼穿源碼的目標，還是堅持整理完成，就先個自己打個call吧，O(∩_∩)O哈哈~。
1. 初始化流程概述圖、代碼流程圖
1.1 初始化流程概述
通過debug的方式（如何准備源碼調試環境，大家可以參考我之前寫的 這篇文章）總結了Vue從初始化到遞歸創建元素的大致流程：定義Vue構造函數/全局API/實例的屬性方法 -> new Vue() -> init() -> mountComponent -> render -> patch -> createElm-> createComponent -> createChildren -> insert，整理的流程概述圖如下。
1.2 初始化代碼執行流程圖
下圖代碼的執行邏輯，表示Vue從初始化到DOM渲染的一個流程。之前看源碼的時候，主要是用到什么API，再去看與這個API相關的邏輯。但是這樣看代碼缺少系統性，不利於總結和復習。所以就一邊寫demo，一邊斷點，畫出大概的代碼執行流程，雖然不是很完善，但至少能有個總線。等到要看其他功能代碼的時候，可以在此基礎上進行擴展，同時也便於代碼定位和邏輯的梳理。
2. 初始化相關代碼分析
2.1 initGlobalAPI(Vue) 初始化Vue的全局靜態API
平時開發通過 new Vue({...}) 去創建了根實例，當然在此之前，Vue已經做了一些前期的准備工作。Vue 的核心代碼都在 src/core 目錄中，我們先來看看 core/index.js 這個入口文件，這部分代碼邏輯很簡單。
import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'
// 初始化全局API
initGlobalAPI(Vue)
// 下面代碼是服務端ssr渲染使用，web端可以忽略
Object.defineProperty(Vue.prototype, '$isServer', {
get: isServerRendering
})
Object.defineProperty(Vue.prototype, '$ssrContext', {
get () {
/* istanbul ignore next */
return this.$vnode && this.$vnode.ssrContext
}
})
// expose FunctionalRenderContext for ssr runtime helper installation
Object.defineProperty(Vue, 'FunctionalRenderContext', {
value: FunctionalRenderContext
})
// 添加 vue 版本號這個靜態變量
Vue.version = '__VERSION__'
export default Vue
我們主要關注的 initGlobalAPI(Vue) 這個函數，它定義在 core/global-api/index.js 文件中，主要給構造函數，添加諸如 Vue.set/delete/use/mixin/extend/component/directive/filter 這些靜態方法。
/* @flow */
import config from '../config'
import { initUse } from './use'
import { initMixin } from './mixin'
import { initExtend } from './extend'
import { initAssetRegisters } from './assets'
import { set, del } from '../observer/index'
import { ASSET_TYPES } from 'shared/constants'
import builtInComponents from '../components/index'
import { observe } from 'core/observer/index'
import {
warn,
extend,
nextTick,
mergeOptions,
defineReactive
} from '../util/index'
export function initGlobalAPI (Vue: GlobalAPI) {
// config
// 這個是給 Vue 設置的 config 屬性，不要手動的去替換這個對象，
// 如果替換，vue 會給 warn 提示
const configDef = {}
configDef.get = () => config
if (process.env.NODE_ENV !== 'production') {
configDef.set = () => {
warn(
'Do not replace the Vue.config object, set individual fields instead.'
)
}
}
Object.defineProperty(Vue, 'config', configDef)
// exposed util methods.
// NOTE: these are not considered part of the public API - avoid relying on
// them unless you are aware of the risk.
Vue.util = {
warn,
extend,
mergeOptions,
defineReactive
}
// Vue的靜態方法: Vue.set/delete/nextTick
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick
// 2.6 explicit observable API
Vue.observable = <T>(obj: T): T => {
observe(obj)
return obj
}
Vue.options = Object.create(null)
ASSET_TYPES.forEach(type => {
Vue.options[type + 's'] = Object.create(null)
})
// 用於標識 Weex 多實例場景中，通過“base”標識普通對象組件的構造函數。
// this is used to identify the "base" constructor to extend all plain-object
// components with in Weex's multi-instance scenarios.
Vue.options._base = Vue
extend(Vue.options.components, builtInComponents)
// Vue的靜態方法: Vue.use/mixin/extend
initUse(Vue)
initMixin(Vue)
initExtend(Vue)
// Vue的靜態屬性方法：Vue.component/directive/filter
initAssetRegisters(Vue)
}
其中 initAssetRegisters(Vue)，通過靜態變量數組 [ 'component', 'directive','filter'] 遍歷創建了Vue.component/directive/filter 這三個靜態屬性方法。 靜態變量配置在 src/shared/constants.js 文件中，方法定義在 core/global-api/assets.js 文件中。
export const SSR_ATTR = 'data-server-rendered'
// 注冊全局API時候使用
export const ASSET_TYPES = [
'component',
'directive',
'filter'
]
// 生命周期函數使用
export const LIFECYCLE_HOOKS = [
'beforeCreate',
'created',
'beforeMount',
'mounted',
'beforeUpdate',
'updated',
'beforeDestroy',
'destroyed',
'activated',
'deactivated',
'errorCaptured',
'serverPrefetch'
]
/* @flow */
import { ASSET_TYPES } from 'shared/constants'
import { isPlainObject, validateComponentName } from '../util/index'
export function initAssetRegisters (Vue: GlobalAPI) {
/**
* Create asset registration methods.
*/
ASSET_TYPES.forEach(type => {
// Vue.comoponent/directive/filter 靜態方法的綁定
Vue[type] = function (
id: string,
definition: Function | Object
): Function | Object | void {
if (!definition) {
return this.options[type + 's'][id]
} else {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && type === 'component') {
validateComponentName(id)
}
if (type === 'component' && isPlainObject(definition)) {
definition.name = definition.name || id
definition = this.options._base.extend(definition)
}
if (type === 'directive' && typeof definition === 'function') {
definition = { bind: definition, update: definition }
}
this.options[type + 's'][id] = definition
return definition
}
}
})
}
2.2 定義Vue構造函數、實例方法
Vue 這個構造函數，定義在 core/instance/index.js 文件中。從代碼中可以看到，用工廠模式，執行不同的混入函數，對 Vue.prototype 原型進行加工，給實例添加對應的屬性方法。
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
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')
}
// 構造函數中執行 Vue.prototype._init 方法
this._init(options)
}
// 實例初始化方法： Vue.prototype._init
initMixin(Vue)
// 實例數據狀態相關方法： Vue.prototype.$data/$props/$set/$delete,$watch
stateMixin(Vue)
// 實例事件相關方法： Vue.prototype.$on/$once/$off/$emit
eventsMixin(Vue)
// 實例生命周期相關方法：Vue.prototype._update/$forceUpdate/$destory
lifecycleMixin(Vue)
// 實例渲染相關方法：Vue.prototype.$nextTick/_render
renderMixin(Vue)
export default Vue
2.3 new Vue(options)
執行 new Vue() 創建組件實例，同時 this._init(options) 初始化方法被執行，合並用戶配置、初始化周期、事件、數據、屬性等。
new Vue({
data: {...},
props: {...},
methods: {...},
computed: {...}
...
})
這部分處理邏輯在 core/instance/indexjs 文件中，與 _init() 相關的主要看 initMixin 這個函數。
/* @flow */
import config from '../config'
import { initProxy } from './proxy'
import { initState } from './state'
import { initRender } from './render'
import { initEvents } from './events'
import { mark, measure } from '../util/perf'
import { initLifecycle, callHook } from './lifecycle'
import { initProvide, initInjections } from './inject'
import { extend, mergeOptions, formatComponentName } from '../util/index'
let uid = 0
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a 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)
}
// a flag to avoid this being observed
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 {
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 // 拋出vue實例本身
vm._self = vm
// 初始化屬性：vm.$parent/$root/$children/$refs
initLifecycle(vm)
// 初始化父組件傳入的 _parentListeners 事件。
initEvents(vm)
// 初始化render相關：vm.$slot/scopedSlots/_c/$createElement
initRender(vm)
// 調用生命鈎子 beforeCreate
callHook(vm, 'beforeCreate')
// 在data/props之前解析注入
initInjections(vm) // resolve injections before data/props
// 初始化相關用戶配置的數據響應式：vm._props/_data, 以及computed、watch、methods
initState(vm)
// 在 data/props 之后提供數據
initProvide(vm) // resolve provide after data/props
// 調用生命鈎子 created
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)
}
}
}
......
2.4 執行 $mount 進行掛載
執行 $mount 掛載，目錄是為了生成 vnode，進而轉換為真實DOM執行更新。 $mount 方法在 web 端相關兩個 src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js 構建文件中都有定義。我們這里分析 entry-runtime-with-compiler.js 帶 compiler 版本的入口文件。關於 Vue scripts 腳本構建相關的內容，大家可以參考我之前寫的 這篇文章 的第2章節。
entry-runtime-with-compiler.js 版本，是在 src/platform/web/runtime/index.js 版本的基礎上，加 compiler 相關的功能邏輯。它首先保存 runtime 版本的 mount = Vue.prototype.$mount 方法。再重寫 Vue.prototype.$mount 方法。如果用戶傳入 template 模板，就通過編譯，轉換成 render 函數。最后通過先前保存的 mount 方法進行掛載。下面我們在再來復習一下這個 $mount 實現邏輯。
......
// 1. 保存 runtime 版本 Vue.prototype 上的 $mount 方法
const mount = Vue.prototype.$mount
// 2. 重寫 Vue.prototype 上的 $mount（加上 compiler 相關功能邏輯）
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
// 處理 options 配置
const options = this.$options
// resolve template/el and convert to render function
if (!options.render) {
let template = options.template
if (template) {
if (typeof template === 'string') {
if (template.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
)
}
}
} else if (template.nodeType) {
template = template.innerHTML
} else {
if (process.env.NODE_ENV !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {
template = getOuterHTML(el)
}
// 3. 存在 template 選項內容，就進行編譯。
if (template) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile')
}
// 編譯獲取 render 函數
const { render, staticRenderFns } = compileToFunctions(template, {
outputSourceRange: process.env.NODE_ENV !== 'production',
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile end')
measure(`vue ${this._name} compile`, 'compile', 'compile end')
}
}
}
// 4. 編譯結束，調用 runtime 版本的 $mount 方法進行掛載
return mount.call(this, el, hydrating)
}
......
最后，代碼執行 mount.call(this, el, hydrating)。實際上復用了 runtime/index.js 中的定義的 $mount 公共方法，代碼注釋如下。
/* @flow */
import Vue from 'core/index'
import config from 'core/config'
import { extend, noop } from 'shared/util'
import { mountComponent } from 'core/instance/lifecycle'
import { devtools, inBrowser } from 'core/util/index'
import {
query,
mustUseProp,
isReservedTag,
isReservedAttr,
getTagNamespace,
isUnknownElement
} from 'web/util/index'
import { patch } from './patch'
import platformDirectives from './directives/index'
import platformComponents from './components/index'
// install platform specific utils
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement
// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)
// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop
// 定義了公共的 $mount 方法
// public mount method
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
// devtools global hook
/* istanbul ignore next */
....
export default Vue
公共 $mount 方法實際上調用了 mountComponent 函數，它 core/instance/lifecycle.js 文件中定義，在mountComponent 函數中，實例化一個渲染Watcher，此時 Watcher 內部邏輯中調用定義的 updateComponent 函數。updateComponent 被調用， vm._render 執行生成 vnode，最終調用 _update 將 vnode 更新成 DOM，代碼注釋如下。
...
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
if (process.env.NODE_ENV !== 'production') {
/* istanbul ignore if */
if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
vm.$options.el || el) {
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 {
warn(
'Failed to mount component: template or render function not defined.',
vm
)
}
}
}
// 調用 beforeMount 鈎子
callHook(vm, 'beforeMount')
let updateComponent
/* istanbul ignore if */ // web端可以忽略
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
updateComponent = () => {
const name = vm._name
const id = vm._uid
const startTag = `vue-perf-start:${id}`
const endTag = `vue-perf-end:${id}`
mark(startTag)
const 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方法，渲染 watcher 內部會調用。
// 如果 updateComponent 被調用，render 方法先執行，生成 vnode。
// 最后執行 _update 方法，進行DOM更新，new Vue() 走的是創建DOM邏輯。
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
}
// 初始化渲染 watcher，內部邏輯會調用 updateComponent。
// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
hydrating = false
// 如果 vm.$vnode === null 當前 vm 的父 vnode 為null。
// 即判斷 vm 當前實例為 Vue 的根實例.
// 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 // 標記該Vue根實例掛載結束
callHook(vm, 'mounted') // 執行鈎子 mounted。
}
return vm
}
...
2.5 執行 _render 生成 vnode
vm._render 方法在之前的內容中有提到，它定義 instance/index.js 文件中，它是在 Vue 構造函數定義的時候，給Vue添加的實例方法。
具體邏輯在 src/core/instance/render.js 文件中。其他代碼邏輯可以先不關注，主要關注，vnode = render.call(vm._renderProxy, vm.$createElement) 這部分調用。
export function renderMixin (Vue: Class<Component>) {
// install runtime convenience helpers
installRenderHelpers(Vue.prototype)
Vue.prototype.$nextTick = function (fn: Function) {
return nextTick(fn, this)
}
// 給實例初始化render方法
Vue.prototype._render = function (): VNode {
...
try {
// There's no need to maintain a stack because all render fns are called
// separately from one another. Nested component's render fns are called
// when parent component is patched.
currentRenderingInstance = vm
// 調用 render 函數生成 vnode。
// 其中只有當用戶自定義render函數時, vm.$createElement 作為回調函數被執行。
vnode = render.call(vm._renderProxy, vm.$createElement)
}
...
return vnode
}
}
render.call 執行，傳入了 vm.$createElement，這里就是用戶可以通過手寫 render 函數，用來生成 vnode 的實現。示例如下，其中 h 就是 vm.$createElement。
<div id="app">
{{title}}
</div>
<script>
window.app = new Vue({
data: {
title: 'vue render'
},
// 手寫 render 函數，h === vm.$createElement
render(h) {
return h(
'div',
{
attrs: {
id: 'demo'
}
},
this.title
);
}
}).$mount('#app');
</script>
vm.$createElement 方法會在實例 _init() 初始化階段，通過執行 initRender 函數添加。
initRender 方法定義在 src/core/instance/render.js 文件中，可以看到 vm._c 和 vm.$createElement 方法最終都是執行 createElement 來生成 vnode。vm._c 是 實例內部方法來創建 vnode，vm.$createElement 是用戶手寫 render 函數來創建 vnode，代碼注釋如下。
export function initRender (vm: Component) {
...
// 內部版本，由模板編譯的 render 函數使用
// 它就是 template 編譯生成 render 函數中使用的 vm._c
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
// normalization is always applied for the public version, used in
// user-written render functions.
// 用戶手寫的 render 函數調用（上面例子中的 h 函數會被執行）
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
...
}
2.5 執行update將vnode轉化為真實DOM
上節內容中介紹了 Vue 在 $mount 方法執行掛載的時候，vm._update 方法中的 vm.render() 執行生成 vnode，下面繼續分析這個 vm._update 方法。
vm._update 這個方法也定義在 src/core/instance/lifecycle.js 文件中，內部通過 prevVnode 這個條件判斷，執行不同參數的 patch 方法，來選擇是初始化操作或還是更新操作。本章內容是執行初始化，所以 vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */) 這個方法會被執行，創建DOM。
export function lifecycleMixin (Vue: Class<Component>) {
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const vm: Component = this
const prevEl = vm.$el
const prevVnode = vm._vnode
const restoreActiveInstance = setActiveInstance(vm)
vm._vnode = vnode
// Vue.prototype.__patch__ is injected in entry points
// based on the rendering backend used.
if (!prevVnode) {
// initial render // 初始化調用。
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
} else {
// updates // 更新調用
vm.$el = vm.__patch__(prevVnode, vnode)
}
restoreActiveInstance()
// 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
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.
}
...
}
關於 update 后面的流程，簡單來說，就是通過遍歷子vnode，遞歸創建DOM子節點，再插入到父節點的邏輯，它實現方式也蠻有意思的，我會在下一篇博文中對這部分代碼做分析。
3. 代碼調試
demo示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>init</title>
<script src="../dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{title}}</div>
文本
</div>
<script>
window.app = new Vue({
// el: "#app",
data: {
title: '初始化'
}
})
.$mount('#app');
</script>
</body>
</html>
debug：找到斷點入口
當vue.js 被加載。dev 環境下，通過 --sourcemap 配置，生成vue.js.map 文件對源碼進行定位，通過入口文件entry-runtime-with-compiler.js，知道不同 index.js 入口文件的引用關系如下。entry-runtime-with-compiler.js
⬆
web/runtime/index.js
⬆
src/core/index.js
⬆
core/instance/index.js。 // 該文件較上面三個文件，被最先解析執行
確定斷點位置如下。
debug：添加實例屬性、方法。
在 core/instance/index.js 文件中斷點如下，在 initMixin(Vue) 之前，Vue 只是一個單純的構造函數。
繼續斷點執行，可以看到Vue.prototype 上添加了相應的實例方法。
debug：添加全局靜態屬性方法
斷點 core/index.js 文件執行，可以看到給Vue添加的全局靜態屬性方法。
debug：new Vue()、_init 初始化
斷點到demo文件，開始實例化。
step into 進入調用的構造函數。斷點 this._init(options) 處。
step into 進入，可以看到此時 vm 實例上還沒有相應的屬性。
執行斷點如下，可以看vm實例上，已經初始化 \(parent、\)slots、_c 等屬性方法。
step over 一直單步執行，直到斷點 $mout 處進行掛載。
debug：$mount 執行掛載
斷點至 entry-runtime-with-compiler.js 文件的如下位置。此時需要關注 render 函數。通過 compileToFunctions 已經將 template 模板，編譯成了 render 函數，賦值給 this.$options 。 並且通過 return mount.call(this, el, hydrating)，將當前實例的 this 引用，通過參數的方式進行傳遞。
生成的 render 函數，可以點擊 [[FunctionLocation]] 進行查看，截圖如下。
單步執行，進入 調用 mountComponent。
step into 進入函數調用，並且打上斷點。
繼續單步執行可以看到定義了 updateComponent 這個方法。
繼續單步執行到 new Watcher，斷點進入。
debug：實例化渲染watcher
斷點到 this.get() 處，watcher 的依賴收集等其他代碼邏輯這里先不關注，主要關注這個this.get() 執行，內部調用 this.getter.call(vm, vm)，進而執行先前定義的 updateComponent 方法。
step into 進入 updateComponent，打上斷點標記。
debug：render執行生成vnode
如何生成 render 函數的編譯邏輯這里先不關注，之后的博文中會對compiler內容進行代碼分析。step over 單步執行一下，讓 vm._render() 執行結束，返回 vnode 作為參數傳遞給 vm._update。
debug：update 執行生成真實DOM
step into 進入 vm._update(vm._render(), hydrating) 方法，它將傳入的 vnode 作為當前實例的_vnode 私有屬性。
step over 單步往下走，執行完 update 之后，可以看到界面中的DOM已經替換完成。
總結
- Vue 在實例化之前，給原型對象 Vue.prototype 擴展了實例的屬性和方法，同時給 Vue 構造函數，擴展全局靜態屬性和方法。
- 當執行 new Vue() 創建實例，構造函數內部執行 _init 初始化邏輯，給當前實例添加諸如 \(parent、\)slots、_c 等屬性方法。
- 初始化結束之后，執行 $mount 進行掛載，最終是通過 mountComponent 方法來實現的。
- mountComponent 重點是給當前實例創建一個渲染Watcher，在 Watcher 的 this.get() 邏輯中會調用先前定義的 updateComponent 方法，開始更新。
- updateComponent 先執行 vm._render 方法生成 vnode，最終調用 vm._update 將 vnode 轉化成真實DOM更新視圖。