其他章節請看：
Vue 例項的初始化過程
書接上文，每次呼叫 new Vue() 都會執行 Vue.prototype._init() 方法。倘若你看過 jQuery 的原始碼，你會發現每次呼叫 jQuery() 也會執行一個初始化的方法（即 jQuery.fn.init()）。兩者在執行初始化方法後都會返回一個例項（vue 例項或 jQuery 例項），而且在初始化過程中，都會做許多事情。本篇就和大家一起來看一下 vue 例項的初始化過程。
Tip：本篇亦叫 Vue.prototype._init() 的原始碼解讀。解讀順序和原始碼的順序保持一致。
function Vue (options) {
...
this._init(options)
}
// 核心程式碼
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// 合併引數
if (options && options._isComponent) {
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
// 初始化生命週期、初始化事件...
initLifecycle(vm)
initEvents(vm)
initRender(vm)
// 觸發生命鉤子：beforeCreate
callHook(vm, 'beforeCreate')
// resolve injections before data/props
// 我們可以使用的順序：inject -> data/props -> provide
initInjections(vm)
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
if (vm.$options.el) {
// 掛載
vm.$mount(vm.$options.el)
}
}
initLifecycle（初始化生命週期）
export function initLifecycle (vm: Component) {
const options = vm.$options
// locate first non-abstract parent
// 定位第一個非抽象父節點
let parent = options.parent
// 有 parent，並且自己不是抽象的，則找到最近一級的非抽象 parent，並將自己放入其 $children 陣列中
if (parent && !options.abstract) {
// 如果 parent 是抽象的（abstract），則繼續往上級找 parent，直到 parent 不是抽象的為止
while (parent.$options.abstract && parent.$parent) {
parent = parent.$parent
}
// 將 vm 放入 parent 中
parent.$children.push(vm)
}
// 初始化例項 property：vm.$parent、vm.$root、$children、vm.$refs
vm.$parent = parent // 父例項，如果當前例項有的話
vm.$root = parent ? parent.$root : vm // 當前元件樹的根 Vue 例項
vm.$children = [] // 當前例項的直接子元件
vm.$refs = {} // 一個物件，持有註冊過 ref attribute 的所有 DOM 元素和元件例項。
// 以下劃線（_）開頭的應該是私有例項屬性
vm._watcher = null
vm._inactive = null
vm._directInactive = false
vm._isMounted = false
vm._isDestroyed = false
vm._isBeingDestroyed = false
}
initLifecycle() 方法做了一下幾件事：
- 找到最近一級非抽象 parent，並將自己放入其 $children 陣列中
- 初始化例項 property：vm.$parent、vm.$root、$children、vm.$refs
- 給 vm 初始化一些以下劃線（_）開頭的私有屬性
這個方法所做的事太簡單了！和我的猜測不一致。
最初我認為初始化生命週期（initLifecycle()），應該和官網的生命週期圖相關。現在在來看一下這張圖，發現 _init() 中的程式碼僅僅對應這張圖的前一半而已。
graph TD
a("new Vue()") --> b("init Events 和 Lifecycle")
b --> |beforeCreate| c("init injects 和 reactivity")
c --> |created| d("編譯模板")
d --> |beforeMount| e("create vm.$el and replace 'el' with it")
e --> |mounted| f("...")
initEvents 初始化事件
export function initEvents (vm: Component) {
// 建立一個沒有原型的物件，賦值給 _events
vm._events = Object.create(null)
// 是否有鉤子事件
vm._hasHookEvent = false
// init parent attached events
// 初始化父元件附加的事件
const listeners = vm.$options._parentListeners
if (listeners) {
// 更新元件監聽器
updateComponentListeners(vm, listeners)
}
}
initEvents() 好像沒幹啥事。
但一個方法總得乾點事，所以如果實在要說這個函式哪裡做了點事，應該就和 _parentListeners 有關。
export function updateComponentListeners (
vm: Component,
listeners: Object,
oldListeners: ?Object
) {
target = vm
// 更新監聽器
// 第一個引數是父元件的監聽器，第二個是父元件監聽器的老版本
// 之後就是 add、remove，很簡單，即註冊事件和刪除事件
updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm)
target = undefined
}
initEvents() 做的事情就是，更新父元件給子元件註冊的事件。這裡有兩個關鍵詞：父子元件、註冊。
Tip：updateListeners() 就兩個邏輯：
- 遍歷新的
listeners。如果老的版本上沒有定義，說明是新增。裡面用on；新老版本不一致，以新版本為準。 - 遍歷舊的
oldListeners。新的版本沒有定義，說明刪除了。裡面用remove
export function updateListeners (
on: Object,
oldOn: Object,
add: Function,
remove: Function,
createOnceHandler: Function,
vm: Component
) {
let name, def, cur, old, event
// 遍歷新的監聽器
for (name in on) {
def = cur = on[name]
old = oldOn[name]
event = normalizeEvent(name)
...
if (isUndef(cur)) {
...
// 老的版本上沒有定義，說明是新增。裡面用 on
} else if (isUndef(old)) {
if (isUndef(cur.fns)) {
cur = on[name] = createFnInvoker(cur, vm)
}
if (isTrue(event.once)) {
cur = on[name] = createOnceHandler(event.name, cur, event.capture)
}
add(event.name, cur, event.capture, event.passive, event.params)
// 新老版本不一致，以新版本為準
} else if (cur !== old) {
old.fns = cur
on[name] = old
}
}
// 遍歷舊的監聽器
for (name in oldOn) {
// 新的版本沒有定義，說明刪除了。裡面用 remove
if (isUndef(on[name])) {
event = normalizeEvent(name)
remove(event.name, oldOn[name], event.capture)
}
}
}
父子元件
我們通過一個實驗來了解一下父元件和其中的子元件的建立過程。
定義父子兩個元件，並都有4個生命週期鉤子函式 beforeCreate、created、beforeMount、mounted：
// WelComeButton.vue - 子元件
<template>
<div>
<button v-on:click="$emit('welcome')">Click me to be welcomed</button>
</div>
</template>
<script>
export default {
beforeCreate () {
console.log('beforeCreate')
},
created () {
console.log('created')
},
beforeMount () {
console.log('beforeMount')
},
mounted () {
console.log('mounted')
}
}
</script>
// About.vue - 父元件
<template>
<div class="about">
<welcome-button></welcome-button>
</div>
</template>
<script>
import WelcomeButton from './WelComeButton.vue'
export default {
components: { WelcomeButton },
beforeCreate () {
console.log('parent beforeCreate')
},
created () {
console.log('parent created')
},
beforeMount () {
console.log('parent beforeMount')
},
mounted () {
console.log('parent mounted')
}
}
</script>
// 瀏覽器輸出
parent beforeCreate
parent created
parent beforeMount
beforeCreate
created
beforeMount
mounted
parent mounted
父子元件的建立過程如下：
- 父元素的 beforeCreate。會初始化事件和生命週期
- 父元素的 created。初始化 inject、data/props、provide
- 父元素的 beforeMount。編譯模板為渲染函式
- 子元素的 beforeCreate
- 子元素的 created
- 子元素的 beforeMount
- 子元素的 mounted
- 父元素的 mounted。建立 vm.$el（Vue 例項使用的根 DOM 元素），並掛載檢視
於是我們知道包含子元件的元件，它的落地（更新到真實 dom）過程：
- 將父元件編譯成渲染函式
- 建立子元件，並掛載到父元件中
- 父元件被掛載
註冊
提到註冊事件，我們會想到 v-on。
v-on 用在普通元素上時，監聽原生 DOM 事件。用在自定義元素元件上時，監聽子元件觸發的自定義事件。
// v-on 用於普通元素
<button v-on:click="greet">Greet</button>
// v-on 用於自定義元素元件
<div id='app'>
<!-- 父元件給子元件註冊了事件 chang-count，事件的回撥方法是 changCount -->
<button-counter v-on:chang-count='changCount'></button-counter>
</div>
我們通常使用模板，並在其上註冊事件，模板會編譯生成渲染函式，接著就到了虛擬 DOM，每次執行渲染函式都會生成一份新的 vNode，新的 vNode 和舊的 vNode 對比，查詢出需要更新的dom 節點，最後就更新 dom。這個過程會建立一些元素，此時才會去判斷到底是元件還是原生的元素（或平臺標籤）。
為什麼得在建立元素的時候才去判斷到底是元件還是原生的元素？
筆者猜測：在前面做這個判斷從技術上是可以做到的，因為這個邏輯（元件 or 原生的元素）判斷不復雜；所以另一種可能就是將這個邏輯放在更新 dom 的時候更加合理。如果是普通元素，直接建立，如果是元件，則建立元件，如果包含子元件，則先建立（或例項化）子元件，並會傳遞一些引數，其中就包含通過 v-on 註冊的事件。
initRender 初始化渲染
export function initRender (vm: Component) {
// 重置子樹的根
vm._vnode = null
// 重置 _staticTrees。
// once 只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。
vm._staticTrees = null // v-once cached trees
// 用於當前 Vue 例項的初始化選項
const options = vm.$options
// 父樹中的佔位符節點
const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree
// 渲染上下文，即父節點的上下文
const renderContext = parentVnode && parentVnode.context
// vm.$slots，用來訪問被插槽分發的內容
vm.$slots = resolveSlots(options._renderChildren, renderContext)
// vm.$scopedSlots，用來訪問作用域插槽
vm.$scopedSlots = emptyObject
// 定義 vm._c。建立元素型別的 vNode
// 渲染函式中會使用這個方法。
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.
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
// 定義 vm.$attrs、vm.$listeners
// vm.$attrs，包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 繫結
// vm.$listeners，包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器
const parentData = parentVnode && parentVnode.data
if (process.env.NODE_ENV !== 'production') {
...
} else {
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)
}
}
此函式的功能有些零散，但至少我們知道該方法定義了 6 個例項屬性：vm.$slots、vm.$scopedSlots、vm._c、vm.$createElement、vm.$attrs、vm.$listeners。
vm._c
此函式將會建立 vnode。這個我們可以通關原始碼來驗證：
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
export function createElement (
context: Component,
tag: any,
data: any,
children: any,
normalizationType: any,
alwaysNormalize: boolean
): VNode | Array<VNode> {
...
return _createElement(context, tag, data, children, normalizationType)
}
真正起作用的是 _createElement：
export function _createElement (
context: Component,
tag?: string | Class<Component> | Function | Object,
data?: VNodeData,
children?: any,
normalizationType?: number
): VNode | Array<VNode> {
if (isDef(data) && isDef((data: any).__ob__)) {
...
return createEmptyVNode()
}
...
if (!tag) {
// in case of component :is set to falsy value
return createEmptyVNode()
}
...
// 定義 vnode
let vnode, ns
if (typeof tag === 'string') {
...
} else {
vnode = createComponent(tag, data, context, children)
}
if (Array.isArray(vnode)) {
return vnode
} else if (isDef(vnode)) {
if (isDef(ns)) applyNS(vnode, ns)
if (isDef(data)) registerDeepBindings(data)
return vnode
} else {
return createEmptyVNode()
}
}
重點看一下返回值（return），都是 vnode。
在模板一文中，我們知道模板編譯成渲染函式，執行渲染函式就會生成一份 vNode。
callHook
callHook(vm, 'beforeCreate') 會觸發 beforeCreated 對應的回撥。請看原始碼：
// 將鉤子拿出來，觸發
export function callHook(vm: Component, hook: string) {
// #7573 呼叫生命週期鉤子時禁用 dep 收集
pushTarget()
// 是一個陣列。比如可以通過 Vue.mixin 注入一個 created，這樣就能有兩個 created。
const handlers = vm.$options[hook]
const info = `${hook} hook`
// 同一個 hook 有多個回撥
if (handlers) {
for (let i = 0, j = handlers.length; i < j; i++) {
// 此方法真正呼叫回撥，裡面包含一些錯誤處理
invokeWithErrorHandling(handlers[i], vm, null, vm, info)
}
}
// 觸發私有鉤子
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook)
}
popTarget()
}
callHook() 真正呼叫鉤子的方法是 invokeWithErrorHandling()。請看原始碼：
// handler 指回撥
export function invokeWithErrorHandling (
handler: Function,
context: any,
args: null | any[],
vm: any,
info: string
) {
let res
try {
// res，指回撥的結果
res = args ? handler.apply(context, args) : handler.call(context) // {1}
if (res && !res._isVue && isPromise(res) && !res._handled) {
res.catch(e => handleError(e, vm, info + ` (Promise/async)`))
// issue #9511
// avoid catch triggering multiple times when nested calls
res._handled = true
}
} catch (e) {
handleError(e, vm, info)
}
return res
}
其中 回撥的結果（行{1}）放在 try...catch 中，如果報錯，則會進入處理錯誤邏輯，即 handleError()。看父元件、父父元件...（一直往上找），如果沒能捕獲錯誤，則進入全域性錯誤處理（globalHandleError）。請看原始碼：
export function handleError (err: Error, vm: any, info: string) {
pushTarget()
try {
if (vm) {
let cur = vm
// 依次找父元件，父父元件...，如果定義了錯誤捕獲（errorCaptured），並能捕獲錯誤，則退出函式
// 否則進入全域性錯誤處理
while ((cur = cur.$parent)) {
const hooks = cur.$options.errorCaptured
if (hooks) {
// 依次迭代錯誤捕獲
for (let i = 0; i < hooks.length; i++) {
try {
// 如果錯誤捕獲返回 false，則視為已捕獲，結束函式
const capture = hooks[i].call(cur, err, vm, info) === false
if (capture) return
} catch (e) {
globalHandleError(e, cur, 'errorCaptured hook')
}
}
}
}
}
// 全域性處理錯誤
globalHandleError(err, vm, info)
} finally {
popTarget()
}
}
initInjections
inject 就是給子孫元件注入屬性或方法。就像這樣：
// 父級元件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子元件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
執行 initInjections() 方法，首先獲取 vm 中注入的 inject（包含注入的 key 和對應的屬性或方法），然後將 inject 繫結到 vm 上，期間會關閉響應。
// 初始化注入
export function initInjections(vm: Component) {
// 拿到注入的key以及對應的屬性或方法。資料結構是 [{key: provideProperyOrFunction},...]
const result = resolveInject(vm.$options.inject, vm)
// 若有注入
if (result) {
// 官網：provide 和 inject 繫結並不是可響應的。
// 關閉響應
toggleObserving(false)
Object.keys(result).forEach(key => {
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
...
} else {
// 訪問 key 時，其實就會訪問 result[key]，即呼叫注入的函式
defineReactive(vm, key, result[key])
}
})
toggleObserving(true)
}
}
Tip：resolveInject() 會返回一個包含物件的陣列，裡面是 inject 屬性以及對應的值：
export function resolveInject(inject: any, vm: Component): ?Object {
if (inject) {
const result = Object.create(null)
const keys = hasSymbol
? Reflect.ownKeys(inject)
: Object.keys(inject)
// 依次遍歷 inject 的每個 key，從當前 vm 開始找 provide，若沒有則依次往上一級找
// 如果找到，則註冊到一個空物件（result）中
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
// #6574 in case the inject object is observed...
if (key === '__ob__') continue
const provideKey = inject[key].from
let source = vm
while (source) {
if (source._provided && hasOwn(source._provided, provideKey)) {
// 找到inject對應的 provide，存入 result 物件中
// _provided 在下文的 initProvide 中被初始化
result[key] = source._provided[provideKey]
break
}
// 找上一級
source = source.$parent
}
// source 為假值，說明一直找到頂部，都找到
if (!source) {
...
}
}
return result
}
}
initState 初始化狀態
初始化狀態，即初始化 props、methods、data、computed 和 watch。
export function initState(vm: Component) {
vm._watchers = []
// 用於當前 Vue 例項的初始化選項
const opts = vm.$options
// 初始化 props
if (opts.props) initProps(vm, opts.props)
// 初始化 methods
if (opts.methods) initMethods(vm, opts.methods)
// 初始化 data
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
// computed
if (opts.computed) initComputed(vm, opts.computed)
// watch
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
initProps
定義元件時，我們可以通過 props 定義父元件傳來的屬性。就像這樣：
// 接收父元件傳來的 title 屬性
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
initProps() 會將 prop 和對應的屬性或方法加入 vm._props 中，並將 prop 代理到 vm._props。如果訪問 props，例如 vm.titlexx，其實訪問的是 vm._props.titlexx。請看原始碼：
function initProps(vm: Component, propsOptions: Object) {
// propsData，建立例項時傳遞 props
const propsData = vm.$options.propsData || {}
// 下面會將 prop 和對應的屬性或方法繫結到此物件中
const props = vm._props = {}
const keys = vm.$options._propKeys = []
...
// propsOptions 是 vm.$options.props
for (const key in propsOptions) {
keys.push(key)
// value 是 prop 對應的屬性或方法
const value = validateProp(key, propsOptions, propsData, vm)
// Tip：直接看生成環境的邏輯即可
if (process.env.NODE_ENV !== 'production') {
...
} else {
// defineReactive 將資料轉為響應式。給 props 新增 key 和對應的 value。
defineReactive(props, key, value)
}
// 如果 key 不在 vm 中，則將 key 代理到 _props
// 就是說，如果訪問props，例如 vm.titlexx，其實訪問的是 vm._props.titlexx
if (!(key in vm)) {
proxy(vm, `_props`, key)
}
}
toggleObserving(true)
}
initMethods
initMethods() 會將我們定義的方法放到 vm 中。開發環境下會檢查方法名，比如不能和 prop 中重複，不能和現有 Vue 例項方法衝突。
function initMethods (vm: Component, methods: Object) {
const props = vm.$options.props
for (const key in methods) {
if (process.env.NODE_ENV !== 'production') {
...
if (props && hasOwn(props, key)) {
// `方法 "${key}" 已經被定義為一個 prop。`,
warn(
`Method "${key}" has already been defined as a prop.`,
vm
)
}
if ((key in vm) && isReserved(key)) {
// `方法 "${key}" 與現有的 Vue 例項方法衝突。 ` +
// `避免定義以_或$開頭的元件方法。`
warn(
`Method "${key}" conflicts with an existing Vue instance method. ` +
`Avoid defining component methods that start with _ or $.`
)
}
}
// bind(methods[key], vm)，將 methods[key] 方法繫結到 vm 中
vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)
}
}
initData
initData() 首先會取得 data，並放入 vm._data 中。依次將 data 中的 key 代理到 vm._data 中，期間會檢查 key 是否與 methods 或 props 中 key 相同。如果訪問 data，例如訪問 vm.age，其實訪問的是 vm._data.age。請看原始碼：
function initData(vm: Component) {
// 取得資料 vm.$options.data
let data = vm.$options.data
// 如果資料是函式，則呼叫 getData（即 data.call(vm, vm)）返回資料，每個例項都有一份
// 如果data不是函式，則每個例項公用這份 data
// vm._data 指向 data，後面會做一個代理。訪問 vm.age，其實訪問的是 vm._data.age
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
// data 如果不是一個物件，開發環境則發出警告：資料函式應該返回一個物件
if (!isPlainObject(data)) {
...
}
// proxy data on instance
const keys = Object.keys(data)
const props = vm.$options.props
const methods = vm.$options.methods
let i = keys.length
while (i--) {
const key = keys[i]
// key 不能和 methods 中相同
if (process.env.NODE_ENV !== 'production') {
...
}
// key 不能和 props 中相同
if (props && hasOwn(props, key)) {
...
// 沒有被預定，則將 key 代理到 _data
} else if (!isReserved(key)) {
proxy(vm, `_data`, key)
}
}
// observe data
observe(data, true /* asRootData */)
}
initComputed
computed 用法如下：
computed: {
aDouble: vm => vm.a * 2
}
initComputed() 會依次迭代我們定義的 computed，給每一個 key 都會建立一個 Watcher，並給 Watcher 傳入 key 對應的回撥方法，最後在 vm 上定義計算屬性（defineComputed(vm, key, userDef)）。請看原始碼：
function initComputed(vm: Component, computed: Object) {
// 建立一個空物件給 vm._computedWatchers，是計算屬性的 watcher
const watchers = vm._computedWatchers = Object.create(null)
// 是否是服務端渲染
const isSSR = isServerRendering()
// 迭代 computed
for (const key in computed) {
// 取得 key 對應的方法
const userDef = computed[key]
// computed 還支援 get、set
const getter = typeof userDef === 'function' ? userDef : userDef.get
...
// 非服務端渲染
if (!isSSR) {
// create internal watcher for the computed property.
// 為計算屬性建立內部觀察者。訪問 vm['計算屬性'] 時會使用
watchers[key] = new Watcher(
vm,
// 取值（watcher.value）時會用到
getter || noop, // {1}
noop,
computedWatcherOptions
)
}
// 定義計算屬性
if (!(key in vm)) {
// userDef，即 key 對應的回撥
defineComputed(vm, key, userDef)
} else if (process.env.NODE_ENV !== 'production') {
// 計算屬性不能在 data、props和methods中
...
}
}
}
如果你想知道 defineComputed(vm, key, userDef) 做了什麼？請繼續看。
defineComputed() 的核心功能在最後一句：
// 定義計算屬性
export function defineComputed(
target: any,
key: string,
userDef: Object | Function
) {
// 不是服務端渲染，則需要快取
const shouldCache = !isServerRendering()
if (typeof userDef === 'function') {
sharedPropertyDefinition.get = shouldCache
? createComputedGetter(key)
: createGetterInvoker(userDef)
sharedPropertyDefinition.set = noop
} else {
// 計算屬性可以有 get、set
...
}
...
// target 是 vm
// 訪問 vm[key] 就會訪問 sharedPropertyDefinition
Object.defineProperty(target, key, sharedPropertyDefinition)
}
我們這裡不是服務端渲染，所以進入 createComputedGetter()：
function createComputedGetter(key) {
return function computedGetter() {
// 取得在 initComputed() 中定義的 watcher
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
// 計算屬性是有快取的（官網：計算屬性是基於它們的響應式依賴進行快取的）
// 髒的（比如說計算屬性依賴的某個資料值變了，就是髒的），則重新求值
if (watcher.dirty) {
watcher.evaluate()
}
if (Dep.target) {
watcher.depend()
}
// 取得 watcher 的值。會訪問 initComputed() 方法中的 getter（行{1}）
return watcher.value
}
}
}
defineComputed(vm, key, userDef) 做什麼事情，它的名字其實已經告訴我們了（即定義計算屬性）。比如訪問一個計算屬性，會取得對應計算屬性的 Watcher，然會從 watcher 中取得對應的值。其中 watcher 的 dirty 與快取有關。
Tip：有關 Water 的介紹可以看 偵測資料的變化
initWatch
用法如下：
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
}
}
initWatch() 會依次迭代我們傳入的 watch，並通過 createWatcher 建立 Watcher。請看原始碼：
function initWatch (vm: Component, watch: Object) {
for (const key in watch) {
const handler = watch[key]
if (Array.isArray(handler)) {
for (let i = 0; i < handler.length; i++) {
createWatcher(vm, key, handler[i])
}
} else {
createWatcher(vm, key, handler)
}
}
}
createWatcher() 的本質是 vm.$watch()。
function createWatcher (
vm: Component,
expOrFn: string | Function,
handler: any,
options?: Object
) {
if (isPlainObject(handler)) {
options = handler
handler = handler.handler
}
if (typeof handler === 'string') {
handler = vm[handler]
}
// hander 是函式
// vm.$watch() 方法賦予我們監聽例項上資料變化的能力
return vm.$watch(expOrFn, handler, options)
}
initProvide
provide 就是提供給子孫元件注入屬性或方法。就像這樣：
// 父級元件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
initProvide 與上文的 initInjections 對應。
initProvide() 主要就是將使用者傳入的 provide 儲存到 vm._provided，後續給 inject 使用。請看原始碼：
export function initProvide(vm: Component) {
const provide = vm.$options.provide
// 存起來，供子孫元件使用
if (provide) {
vm._provided = typeof provide === 'function'
? provide.call(vm)
: provide
}
}
vm.$mount
_init() 的末尾就是掛載（vm.$mount()）：
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
擴充套件
props、data、methods、computed 的 key 為什麼不能相同
因為這些 key 最後都繫結在 vm 上，所以不能相同。請看原始碼：
// props
proxy(vm, `_props`, key)
// data
proxy(vm, `_data`, key)
// methods
vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)
// compued
defineComputed(vm, key, userDef)
data 中可以使用 props嗎
在 initState() 中有如下程式碼：
// 初始化 props
if (opts.props) initProps(vm, opts.props)
...
// 初始化 data
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
由於 props 先初始化，所以在 data 中可以使用 props。請看示例：
// 父元件
<welcome-button name="peng"></welcome-button>
// WelcomeButton.vue
<template>
<div>
name={{ name }} <br />
myName={{ myName }}
</div>
</template>
<script>
export default {
props: ['name'],
data () {
return {
myName: this.name + 'jiali'
}
}
}
</script>
瀏覽器輸出：
name=peng
myName=pengjiali
Tip：props 中使用 data 卻是不可以的，因為 data 初始化在 props 後面。
computed 和 watch 誰先執行
請問下面這段程式碼，控制檯輸出什麼：
<template>
<div>
<!-- 讀取三個屬性 -->
{{ doubleAge }} {{ age }} {{ name }}
</div>
</template>
<script>
export default {
data () {
return {
age: 18,
name: 'peng'
}
},
computed: {
doubleAge: function (vm) {
const result = this.age * 2
console.log('computed')
return result
}
},
watch: {
age: {
handler: function (val, oldVal) {
console.log('watch age')
},
immediate: !true
},
name: {
handler: function (val, oldVal) {
console.log('watch name')
},
// 立即執行
immediate: true
}
},
created () {
setTimeout(() => this.age++, 5000)
}
}
</script>
watch name
computed
// 過5秒
watch age
computed
雖然在 initState() 中先初始化 computed，再初始化 watch，但在這個例子中，卻是先執行 watch，後執行 computed。
// computed
if (opts.computed) initComputed(vm, opts.computed)
// watch
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
其他章節請看：