wiki
Vue 在生命周期过程中,会主动调用一些特殊名函数,可以利用其来实现一些生命周期阶段的操作
1. 生命周期阶段
Init Event & Lifecycle
: 初始化生命周期、事件,但数据代理还未开始,之后调用beforeCreate
函数Init injections & reactivity
: 初始化数据监测、数据代理,之后调用created
函数'el' & 'template' option
: 此阶段开始解析模板,在内存中生成虚拟 DOM ,页面还未能展示解析后内容,之后调用beforeMounte
函数Create vm.$el and replace 'el' with it
: 将内存中的虚拟 DOM 转为真实 DOM 插入页面,之后调用mounted
函数Mounted
: 挂载
5.1. 当数据改变时,接着调用beforeUpdate
5.2. 生成新 DOM 并与旧的进行比较,再重新渲染页面,接着调用updated
When vm.$destroy is called
: 准备销毁阶段,之后调用beforeDestroy
函数Teardown watchers,child components and events listenders
: 销毁监视、子组件、监听器Destroyed
: 销毁 Vue 实例,之后调用destroyed
函数
2. 生命周期函数
beforeCreate
: 无法通过 vm 访问data
和methods
中数据、方法created
: 可以通过 vm 访问data
和methods
中数据、方法beforeMounte
: 此时页面呈现时未经 Vue 编译的 DOM 结构,所有 DOM 操作将不生效mounted
: 页面呈现编译后的 DOM 结构,初始化阶段结束beforeUpdate
: 此时数据是新的,但页面还未被替换updated
: 此时数据与页面保持同步beforeDestroy
: vm 中属性仍可使用destroyed
: 销毁后调用