vue2生命周期
2020-10-26 18:57:44 0 举报
vue2生命周期
作者其他创作
大纲/内容
provide组件数据
类型1:主动加入的函数,直接执行
beforeUpdate
执行 flushCallbasks
冲洗队列阶段
调用 vm.$destroy(),执行销毁
EventLoop
beforeMount 之前处理的事情
created
keepAlive
在文档上移除当前元素节点,removeAndInvokeRemoreHook(ch)
更新
挂载阶段
将冲洗队列 flushSchedulerQueue 方法加入 callbacks 数组中
实例化阶段
将当前组件的watcher放入queue中
置入队列阶段
创建更新函数
mounted 之前处理的事情
数据拦截,通知更新 dep.notify()
child = createComponentInstanceForVnode(vnode)
否
更新组件,调用更新函数 updateComponent()
vm.$forceUpdate()
created 之前处理的事情
在diff过程中,oldCh有多余的vnode
包含处理子组件逻辑
beforeCreate
设置新props
执行watcher.run()
重要:patch、diff的内容在这里面
inject父组件数据
queue.sort(),按照组件id递增排序,然后遍历queue
activated
调用updateComponent,执行render函数时,收集依赖,最后生成vnode,根据vnode生成dom,挂在$el上
是
关联 $parent、$root、$children
创建Watcher实例
当所有同步操作完成,立即冲洗callbacks数组
child.$mount()
事件监听
当前dep关联的所有watcher放入queue
deactivated
初始化
检测:若没有渲染函数,挂一个渲染空元素的函数
销毁 vm._watcher 和 vm._watchers
root.$mount(el)
以el < template < render的优先级,若存在,生成渲染函数,挂在$options上
root = new Vue(options)
触发销毁钩子函数,invokeDestroyHook(ch)
失效所有子组件
$options.el
Vue 2 生命周期
数据初始化,包括 props/methods/data/computed/watch
移除监听器,vm.$off(),移除vue引用,移除父元素引用
执行watcher.before()
设置新data
$slots、_c、$createElement 、$attrs、$listeners
beforeCreate 之前处理的事情
destroyed
合并生成 $options
类型2:冲洗队列函数 flushSchedulerQueue
beforeDestroy
销毁
移除vm._data.__ob__引用,vm._data.__ob__.vmCount--
mounted
beforeMount
updated
0 条评论
下一页
为你推荐
查看更多