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 条评论
回复 删除
下一页
