Vue – 生命周期与函数
简介
生命周期(Life Cycle)是指一个组件从创建 -> 运行-> 销毁的整个阶段,强调的是一个时间段。 生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。
注意:生命周期强调的是时间段,生命周期函数强调的是时间点。
创建阶段
beforeCreate
在此阶段为Vue的初始化状态,在这期间 props/data/methods 都还没被创建,此时将不可调用各种数据。该方法声明在与 methods 同级位置上。
export default {
props:{},
methods:{},
beforeCreate() {
...
}
}
created
这个阶段的组件的 props/data/methods 都已经创建好了,可以访问数据类型,但是组件的模板结构尚未生成。该方法声明在与 methods 同级位置上。该方法通常用于页面加载 Axios 数据使用,非常常用。
export default {
props:{},
methods:{},
created() {
...
}
}
编译渲染
在执行 created 方法后,Vue将开始对模板结构的渲染,将会有下面的流程
1.是否有 el 参数(传入外部模板元素)
1).如果有,则是否有 template 参数 (Vue中的属性 template)
如果存在 template 参数,则取 template 中的模板数据进行渲染
如果不存在 template 参数,则使用 el 或 $mount 外部模板进行渲染
2).如果没有 el 参数,则是否有调用 $mount 涵数
如果存在 template 参数,则取 template 中的模板数据进行渲染
如果不存在 template 参数,则使用 $mount 外部模板进行渲染
渲染基于数据和模板在内存中编译生成 HTML 结构
beforeMount
在此阶段,HTML 结构已经编译生成完成,但只存在内存中,还没有挂载到页面中,此时浏览器中还没有当前组件的 DOM 结构,所以此阶段还不能直接操作读取 DOM 元素,此阶段比较少用,可以选择在此阶段进行Axios操作。
export default {
props:{},
methods:{},
beforeMount() {
...
}
}
mounted
此时已经把内存中的 HTML 结构,成功的渲染到了浏览器之中。此时浏览器中已然包含了当前组件的 DOM 结构。
export default {
props:{},
methods:{},
mounted() {
...
}
}
运行阶段
beforeUpdate
这个阶段会被多次执行,指在将要根据变化过后,最新的数据,重新渲染组件的模板结构,但页面上的数据还是旧的,因为此时还没有更新到页面上。
export default {
props:{},
methods:{},
beforeUpdate() {
...
}
}
updated
已经根据最新的数据,完成了组件 DOM 结构的重新渲染。
export default {
props:{},
methods:{},
updated() {
...
}
}
销毁阶段
beforeDestroy
将要销毁此组件,但是此时尚未销毁,组件还处于正常工作的状态,在这个过程中,Vue 会销毁当前组件的数据监听器、子组件、事件监听等
export default {
props:{},
methods:{},
beforeDestroy() {
...
}
}
destroyed
组件已经销毁,且组件中的 DOM 也已经全部移除。
export default {
props:{},
methods:{},
destroyed() {
...
}
}
共有 0 条评论