文章的代码和大部分描述转载自:Vue.js 技术揭秘 | 生命周期。感谢大佬总结分析的vue源码。这里做一个笔记学习(二次总结)
文章目录
生命周期
beforeCreate -> created
相关代码:
callHook(vm, "beforeCreate")
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, "created")
initState:
- 作用: 初始化 props、data、methods、watch、computed 等属性
- 限制:beforeCreate
不能获取到 props
,也不能调用 methods
的函数。也不能访问 DOM 因为并没有渲染 DOM - 提示:要使用以上的
props,data,methods,Dom
等要等到created
beforeMount -> mounted
相关代码:
(略)
- 作用:
beforeMount
开始渲染虚拟 dom- 这时候会执行一个
new Watcher
用来监听数据更新的 - mounted 钩子函数的执行顺序也是先子后父(子组件的 mounted 先执行,在渲染父组件的 mounted 方法)。
beforeUpdate -> updated
相关代码:
export function mountComponent(vm: Component, el: ?Element, hydrating?: boolean): Component {
// ...
// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(
vm,
updateComponent,
noop,
{
before() {
if (vm._isMounted) {
callHook(vm, "beforeUpdate")
}
}
},
true /* isRenderWatcher */
)
// ...
}
- 作用:监听更新数据
- 提示:
beforeUpdate
的执行时机是在渲染 Watcher 的 before 函数中- 有个判断
必须在组件挂载后才会执行这个方法
【重点】watch 的挂载是在 beforeMounted 的时候,而实际可以监听则是在 mounted 之后
beforeDestroy -> destroyed
相关代码:
(略)
- 作用:
- 销毁组件 从
parent
的$children
中删掉自身,删除watcher
- 销毁组件 从
- 提示:
- 销毁自己的时候又会触发子组件的销毁,所以 destroy 钩子函数执行顺序是
先子后父
,和 mounted 过程一样
- 销毁自己的时候又会触发子组件的销毁,所以 destroy 钩子函数执行顺序是
activated -> deactivated
eep-alive 组件的时候详细介绍