FE-Note组件更新
我们之前分析Vue实现组件化挂载的源码分析，知道了组件是怎么一步一步创建到挂载到真实的DOM中。现在，我们结合Vue的响应式原理，看看当状态发生变化时，组件是怎么进行更新操作的。
一个例子
其实，Vue的虚拟DOM的更新是模仿snabdom实现的，对于两个节点的对比过程基本一样。所以对于diff算法的分析，可以参考VirtualDOM 的简单实现，我们用一个例子来跑下整个过程：
// App.vue
<template>
<div class="app">
<p>I am App</p>
<Hello :list="list"></Hello>
<button @click="handleClick">change</button>
</div>
</template>
<script>
import Hello from './Hello';
export default {
name: 'app',
data() {
return {
list: ['A', 'B', 'C', 'D']
};
},
methods: {
handleClick() {
this.list.reverse().splice(2, 0, 'E');
}
},
components: {
Hello
}
};
</script>
Hello组件：
// Hello.vue
<template>
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
props: ['list']
};
</script>
这个例子App组件传递一个list作为props给Hello组件，并且显示ABCD。当我们点击按钮的时候，列表的渲染内容会改变，最终渲染成DCEBA。你或许有个疑问，就是list是App组件的状态，当它改成的时候只会触发App的渲染watcher，那Vue是怎么通知到子组件，并让他也触发渲染watcher的呢？
props的监听
我们知道Vue组件会对data状态在初始化时进行响应式处理，其实对prop也进行了getter/setter的设置，并且发生在data初始化之前，先来看下组件状态的初始化顺序：
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
初始化状态的顺序是props,methods,data,computed和watch，这个顺序是必要的。因为我们在data中能用到prop，在watch中能监听到所有状态，所以它必须在最后。在initProps方法就是对props的处理：
function initProps (vm: Component, propsOptions: Object) {
const propsData = vm.$options.propsData || {}
const props = vm._props = {}
// cache prop keys so that future props updates can iterate using Array
// instead of dynamic object key enumeration.
const keys = vm.$options._propKeys = []
const isRoot = !vm.$parent
// root instance props should be converted
if (!isRoot) {
toggleObserving(false)
}
for (const key in propsOptions) {
keys.push(key)
// 获取props对应key的值
const value = validateProp(key, propsOptions, propsData, vm)
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
const hyphenatedKey = hyphenate(key)
if (isReservedAttribute(hyphenatedKey) ||
config.isReservedAttr(hyphenatedKey)) {
warn(
`"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
vm
)
}
defineReactive(props, key, value, () => {
if (!isRoot && !isUpdatingChildComponent) {
warn(
`Avoid mutating a prop directly since the value will be ` +
`overwritten whenever the parent component re-renders. ` +
`Instead, use a data or computed property based on the prop's ` +
`value. Prop being mutated: "${key}"`,
vm
)
}
})
} else {
defineReactive(props, key, value)
}
if (!(key in vm)) {
proxy(vm, `_props`, key)
}
}
toggleObserving(true)
}
这段代码主要是循环props，通过validateProp方法获取对应prop的值并且会校验类型，最后调用defineReactive将其转为响应式的，并且把props代理到实例上。propsData是属性的数据对象，它是在创建组件节点是就已经处理好了，在createComponent方法中：
// 从vnode的data中提取props数据
const propsData = extractPropsFromVNodeData(data, Ctor, tag)
所以在我们例子的Hello组件中list发生变化，会触发自身的渲染watcher。现在就来看看App是怎么通知到Hello组件的。
组件虚拟节点更新
当我们list发生变化，会通知App组件的渲染watcher，然后进行render后更新操作。和处理挂载不同是，在执行vm._update()时候，因为我们之前vnode是存在的，所以会执行下面代码:
// src/core/instance/lifecycle.js
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
const prevVnode = vm._vnode
if (!prevVnode) {
// ...
} else {
// 状态发生变化，对比新老节点
vm.$el = vm.__patch__(prevVnode, vnode)
}
}
然后调用patch方法，这个时候的oldVnode不是真实的DOM节点并且和vnode是同一个节点，所以会走下面的逻辑:
const isRealElement = isDef(oldVnode.nodeType) // 是否为dom节点，首次挂载为true
if (!isRealElement && sameVnode(oldVnode, vnode)) {
// patch existing root node
// 同一个节点进行diff
patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
}
sameVnode方法判断两个虚拟节点是否同一个节点：
function sameVnode (a, b) {
return (
a.key === b.key && (
(
a.tag === b.tag &&
a.isComment === b.isComment &&
isDef(a.data) === isDef(b.data) &&
sameInputType(a, b)
) || (
isTrue(a.isAsyncPlaceholder) &&
a.asyncFactory === b.asyncFactory &&
isUndef(b.asyncFactory.error)
)
)
)
}
首先两个节点的key必须全等，如果没有设置两个undefiend也是成立的。然后如果是同步的节点，判断tag，isComment相等，并且是同一种类型的input。如果是异步节点，判断两个异步工厂函数是否相等。我们例子中App组件的是同一个节点，所以会调用patchVnode方法进行两个节点的对比：
function patchVnode (
oldVnode,
vnode,
insertedVnodeQueue,
ownerArray,
index,
removeOnly
) {
if (oldVnode === vnode) {
return
}
if (isDef(vnode.elm) && isDef(ownerArray)) {
vnode = ownerArray[index] = cloneVNode(vnode)
}
const elm = vnode.elm = oldVnode.elm
if (isTrue(oldVnode.isAsyncPlaceholder)) {
if (isDef(vnode.asyncFactory.resolved)) {
hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
} else {
vnode.isAsyncPlaceholder = true
}
return
}
// 静态节点的处理
if (isTrue(vnode.isStatic) &&
isTrue(oldVnode.isStatic) &&
vnode.key === oldVnode.key &&
(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
) {
vnode.componentInstance = oldVnode.componentInstance
return
}
let i
const data = vnode.data
// 组件占位节点调用prepatch钩子
// 更新组件实例的props和listener等，触发组件的prop的setter
if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
i(oldVnode, vnode)
}
const oldCh = oldVnode.children
const ch = vnode.children
if (isDef(data) && isPatchable(vnode)) {
for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
}
if (isUndef(vnode.text)) {
if (isDef(oldCh) && isDef(ch)) {
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
} else if (isDef(ch)) {
if (process.env.NODE_ENV !== 'production') {
checkDuplicateKeys(ch)
}
if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
} else if (isDef(oldCh)) {
removeVnodes(oldCh, 0, oldCh.length - 1)
} else if (isDef(oldVnode.text)) {
nodeOps.setTextContent(elm, '')
}
} else if (oldVnode.text !== vnode.text) {
nodeOps.setTextContent(elm, vnode.text)
}
// 调用postpatch钩子
if (isDef(data)) {
if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
}
}
这个方法主要分成3部分，第一部分是调用prepatch钩子，前提是这个vnode是一个组件占位节点：
let i
const data = vnode.data
if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
i(oldVnode, vnode)
}
这带代码就是通知子组件进行更新的关键。我们来看下prepatch钩子函数的定义：
prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
const options = vnode.componentOptions
const child = vnode.componentInstance = oldVnode.componentInstance
updateChildComponent(
child,
options.propsData, // updated props
options.listeners, // updated listeners
vnode, // new parent vnode
options.children // new children
)
}
prepatch钩子的作用是修改子组件实例的props，listeners和slot。在updateChildComponent函数中有这么一段代码:
// update props
if (propsData && vm.$options.props) {
toggleObserving(false)
const props = vm._props
const propKeys = vm.$options._propKeys || []
for (let i = 0; i < propKeys.length; i++) {
const key = propKeys[i]
const propOptions: any = vm.$options.props // wtf flow?
props[key] = validateProp(key, propOptions, propsData, vm)
}
toggleObserving(true)
// keep a copy of raw propsData
vm.$options.propsData = propsData
}
很显然，这个时候我们的Hello组件的list已经修改成了新的状态。由于Vue对prop也进行了响应式监听，所以这个时候Hello组件的渲染watcher会被通知，并且在App的渲染watcher执行完后再执行。也就是说父组件先patch更新DOM完后子组件才会更新。
子组件更新
因为我们组件的patch过程是一个深度优先遍历的过程，当父组件更新完后，子组件才开始自己的patch流程，并且执行的工作和父组件一样。在我们例子中，由于list状态发生变化，所以会重新渲染。在渲染过程中，会调用updateChildren方法进行子节点的对比更新：
if (isDef(oldCh) && isDef(ch)) {
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
}
因为updateChildren方法和snabdom实现的原理一致，就不做分析。我们来结合例子看下整个过程：
第一步，oldStartIdx和newEndIdx都是A节点，在进行A节点patch后把移动到为处理节点的后面，也就是oldEndIdx节点的后面：
第二步，发现oldStartIdx和newEndIdx都是B节点,过程和第一步一样：
第三步，oldEndIdx和newStartIdx都是D节点，更新后把D节点移动后未处理节点的前面，也就是oldStartIdx的前面：
第四步，oldStartIdx和newStartIdx都是C节点，不用进行移动
第五步，这时候发现oldStartIdx已经大于oldEndIdx，也就是说如果新的节点还有为处理，那么都是新增的节点，对应我们的E节点。这个时候把所有未处理的节点插入到newEndIdx后面一个节点的前面，也就是把E插在B节点的前面：
总结
到此，结合前面的文章，我们就从源码的角度分析完Vue组件状态的改变到视图更新的全部流程，可以总结成下面一张图：