Vue

Create renderWatcher

_update()方法调用了__patch__函数 TODO：__patch__函数到底做了什么？diff算法？1. __patch__里面又调用了invokeInserHook，收集了被keepAlive的组件，被收集的组件实例，最终在【数据更新过程】，调用activated hooks步骤中，被触发组件的“activated”生命周期2. __patch__ 删除节点vnode时，调用了vnode.destory hook，如果是被keepAlive的组件，触发组件的“deactivated”生命周期

Init Methods

renderWatcher 没有before，故在vm._isMounted是不会调用beforeUpdate生命周期的，会调用的，只会在在数据被修改，触发re-render

更新完毕

否

通知观察者dep.notify()

core/instance/state.jsinitState方法

mounted

beforeCreate

Init initProvide

deactivated

src/platformsweb/runtime/index.js

this.lazy ：目前用在计算属性，在这只是坐下标记（dirty），后面计算属性根据是否为脏数据，来确定是否需要重新计算取值。this.sync：是否同步更新，若同步更新，就立即更新

true

将观察者push到一个异步更新队列（queue）

Init Props

Data（监听器 / Observer）

只有被keepAlive的组件，才会触发组件的“activated”生命周期

vm._render()

beforeUpdate

收集观察者dep.addSub()

当调用 vm.$destory()

数据更新过程

const watcher = queue.shift();

Init Computed

pushTarget => Dep.target = watcher

call component activated hooks

解除绑定销毁子组件以及事件监听器

new Vue()

Trigger re-render

beforeMount

生命周期

updates

创建render watcher，传入了一个更新组件的方法，里面调用了render()方法，触发了re-render。

render

updated

利用 Object.defineProperty() 对属性都加上 `setter` 和 `getter`。

观察者 / Watcher

访问属性值

发布者  Dep

// install platform patch functionVue.prototype.__patch__ = patch

core/instance/lifecycle.jsmountComponent 函数

结束

beforeDestroy

update queue

destroyed

Init injections

是

update () {    if (this.lazy) {      this.dirty = true    } else if (this.sync) {      this.run()    } else {      queueWatcher(this)    }  }

Init Watch

Init initState

Clean up for dependency collection.

Virtual Dom Tree

观察者执行更新方法watcher.update()

Init injections & reactivity

vm._update(vnode) -> vm.__patch()

setter

getter

nextTickFlush both queues and run the watchers.

watcher.run();

created

popTarget => Dep.target = preWatcher

activated

? watcher.before();

call component mounted hooks

Init Data

ComponentRenderFunction

发布订阅模式

vm._isMounted

initial render  ✔

false

队列是否为空

call component updated hooks