vue基础
vue有完整的生命周期,其中有开始创建、初始化数据、编译到模板、挂载、更新和卸载
生命周期图
生命周期分为三个阶段
分别为:初始化阶段、运行中阶段、销毁阶段
- 初始化阶段钩子函数(beforeCreate,created,beforeMount,mounted)
- 运行中阶段钩子函数(beforeUpdate,updated)
- 销毁阶段钩子函数(beforeDestroy,destroyed)
beforeCreate 组件实例被创建时
beforeCreate钩子函数初始化的时候立马执行,这个钩子函数里面是获取不到数据的,页面中的真实dom节点也没有挂载出来
created 组件实例已经创建完成时
created钩子函数内部的数据已经被挂载了,但是真实dom节点还是没有渲染出来。在这个钩子函数里面,如果更改数据的话,运行中钩子函数不会执行。
beforeMount 组件挂载之前
beforeMount接下来要渲染dom,还没有真正的在页面中渲染。此钩子函数与created钩子函数差不多
mounted 组件挂载之后
mounted 表示数据已经挂载完成,真实的dom也渲染出来了
beforeUpdate 组件数据发生变化,也就是更新前
数据发生变化的时候,beforeUpdate这个钩子函数才会执行。beforeUpdate钩子函数里面,在这里获取的数据都是更新之前的内容
updated 组件数据更新之后
在这里获取到的数据就是更新后的内容了,生成新的虚拟dom,与上一次的虚拟dom结构进行对比,再去进行真实dom的重新渲染操作
beforeDestroy 组件实例销毁之前
当组件销毁的时候,就会触发,组件就会被销毁
destroyed 组件实例销毁之后
activated 缓存的组件激活时
deactivated 缓存的组件停用时调用
errorCaptured 捕获一个来自子组件的错误时被调用