beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
这个的生命周期其实和 update 类似,注销组件我能想到的就是 v-if, component is 这两种办法。
v-if 通过 update 一样的方式触发,只是 patch 当中会调用 unmount 然后判断到是组件,调用 unmountComponent.
component is 方式不清楚,反正肯定需要调用 patch。
1 | const unmountComponent = ( |
这就调用了,
我这边也是通过 v-if 触发 Object.defineProperty, 然后创建响应式的时候,创建了 Dep,通过 Dep 通知 watcher。
触发 patch, 然后对比
1 | if (oldStartIdx > oldEndIdx) { |
然后 remove 流程开始, 最后话触发到 Vue.prototype.$destroy
1 | callHook(vm, 'beforeDestroy') |
Vue3.x 通过 patch => unmount => unmountComponent 触发
Vue2.x 通过 patch => removeVnodes => invokeDestroyHook => Vue.prototype.$destroy 触发
我使用 v-if 测试,所以都是由劫持(Object.defineProperty or proxy) => Dep => watcher or effect => patch => 上面的过程。