<template>
  <div>
   {{ msg }}
   <ChildComponent />
  </div>
</template>

 prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
  const options = vnode.componentOptions
  // 注意 这个child就是ChildComponent组件的 vm 实例，也就是咱们平常用的 this
  const child = vnode.componentInstance = oldVnode.componentInstance
  updateChildComponent(
   child,
   options.propsData, // updated props
   options.listeners, // updated listeners
   vnode, // new parent vnode
   options.children // new children
  )
 },

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
<ul>

<ul>
 <component>1</component>
 <component>2</component>
 <component>3</component>
<ul>

const props = vm._props = {}

 for (const key in propsOptions) {
  // 经过一系列验证props合法性的流程后
  const value = validateProp(key, propsOptions, propsData, vm)
  // props中的字段也被定义成响应式了
  defineReactive(props, key, value)
}

 // update props
 if (propsData && vm.$options.props) {
  toggleObserving(false)
  // 注意props被指向了 _props
  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"_blank" href="https://cn.vuejs.org/v2/api/#vm-forceUpdate" rel="external nofollow" >vm-forceUpdate文档

我们需要知道一个小知识点，vm.$forceUpdate 本质上就是触发了渲染watcher的重新执行，和你去修改一个响应式的属性触发更新的原理是一模一样的，它只是帮你调用了 vm._watcher.update()（只是提供给你了一个便捷的api，在设计模式中叫做门面模式）


slot是怎么更新的？


注意这里也提到了一个细节，也就是 插入插槽内容的子组件：


举例来说


假设我们有父组件parent-comp：




<div>
 <slot-comp>
   <span>{{ msg }}</span>
 </slot-comp>
</div>



子组件 slot-comp：




<div>
  <slot></slot>
</div>



组件中含有 slot的更新 ，是属于比较特殊的场景。


这里的 msg 属性在进行依赖收集的时候，收集到的是 parent-comp 的`渲染watcher。（至于为什么，你看一下它所在的渲染上下文就懂了。）


那么我们想象 msg 此时更新了，




<div>
 <slot-comp>
   <span>{{ msg }}</span>
 </slot-comp>
</div>



这个组件在更新的时候，遇到了一个子组件 slot-comp，按照 Vue 的精确更新策略来说，子组件是不会重新渲染的。


但是在源码内部，它做了一个判断，在执行 slot-comp 的 prepatch 这个hook的时候，会执行 updateChildComponent 逻辑，在这个函数内部会发现它有 slot 元素。




 prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
  const options = vnode.componentOptions
  // 注意 这个child就是 slot-comp 组件的 vm 实例，也就是咱们平常用的 this
  const child = vnode.componentInstance = oldVnode.componentInstance
  updateChildComponent(
   child,
   options.propsData, // updated props
   options.listeners, // updated listeners
   vnode, // new parent vnode
   options.children // new children
  )
 },



在 updateChildComponent 内部




 const hasChildren = !!(
  // 这玩意就是 slot 元素
  renderChildren ||        // has new static slots
  vm.$options._renderChildren || // has old static slots
  parentVnode.data.scopedSlots || // has new scoped slots
  vm.$scopedSlots !== emptyObject // has old scoped slots
 )


然后下面走一个判断




 if (hasChildren) {
  vm.$slots = resolveSlots(renderChildren, parentVnode.context)
  vm.$forceUpdate()
 }



这里调用了 slot-comp 组件vm实例上的 $forceUpdate，那么它所触发的渲染watcher就是属于slot-comp的渲染watcher了。

总结来说，这次 msg 的更新不光触发了 parent-comp 的重渲染，也进一步的触发了拥有slot的子组件 slot-comp 的重渲染。

它也只是触发了两层渲染，如果 slot-comp 内部又渲染了其他组件 slot-child，那么此时它是不会进行递归更新的。（只要 slot-child 组件不要再有 slot 了）。


比起 React 的递归更新，是不是还是好上很多呢？


赠礼 一个小issue


有人给 Vue 2.4.2 版本提了一个issue，在下面的场景下会出现 bug。




let Child = {
 name: "child",
 template:
  '<div><span>{{ localMsg }}</span><button @click="change">click</button></div>',
 data: function() {
  return {
   localMsg: this.msg
  };
 },
 props: {
  msg: String
 },
 methods: {
  change() {
   this.$emit("update:msg", "world");
  }
 }
};

new Vue({
 el: "#app",
 template: '<child :msg.sync="msg"><child>',
 beforeUpdate() {
  alert("update twice");
 },
 data() {
  return {
   msg: "hello"
  };
 },
 components: {
  Child
 }
});




具体的表现是点击 click按钮，会 alert 出两次 update twice。 这是由于子组件在执行 data 这个函数初始化组件的数据时，会错误的再收集一遍 Dep.target （也就是渲染watcher）。


由于数据初始化的时机是 beforeCreated -> created 之间，此时由于还没有进入子组件的渲染阶段， Dep.target 还是父组件的渲染watcher。


这就导致重复收集依赖，重复触发同样的更新
怎么解决的呢？很简单，在执行 data 函数的前后，把 Dep.target 先设置为 null 即可，在 finally 中再恢复，这样响应式数据就没办法收集到依赖了。




export function getData (data: Function, vm: Component): any {
 const prevTarget = Dep.target
+ Dep.target = null
 try {
  return data.call(vm, vm)
 } catch (e) {
  handleError(e, vm, `data()`)
  return {}
+ } finally {
+  Dep.target = prevTarget
 }
}



后记


如果你对于 Dep.target、 渲染watcher等概念还不太理解，可以看我写的一篇最简实现 Vue 响应式的文章，欢迎阅读：

手把手带你实现一个最精简的响应式系统来学习Vue的data、computed、watch源码


本文也存放在我的Github博客仓库中，欢迎订阅和star。