vue的生命周期
含义
指一个组件从创建->运行->销毁的整个时间段,强调的是一个时间段。
生命周期函数
含义
vue框架提供的内置函数,会伴随组件的生命周期,自动按次序运行。
分类
-
组件创建阶段
-
组件运行阶段
-
组件销毁阶段
1. 组件创建阶段
最多只执行一次
new Vue() ——> beforeCreate ——> created ——> beforeMount(渲染之前) ——> mounted ——>
2. 组件运行阶段
执行0——n次
——> beforeUpdate ——> undated ——>
3. 组件销毁阶段
最多只执行一次
——> beforeDestory ——> destoryed
图示实例的生命周期
一个组件从创建到销毁的过程
webpack从main.js开始打包,发现main.js里面用到了App,然后把App的实例创建出来,App里面又用到了child,child里又用到了count;以树的形式嵌套。webpack把整个树解析,转换,编译成js代码以src形式放到index.html内。浏览器再解析编译这个代码,渲染到页面上。
图解
解释
-
new Vue():创建组件的实例对象
-
init Events&Lifecycle:初始化事件和生命周期函数
-
beforeCreate:组件的props/data/methods尚未被创建,都处于不可用状态
-
init injections&reactivity:初始化props/data/methods
-
created:组件的props/data/methods已创建好,都处于可用的状态,但是组件的模板结构尚未生成!,这个阶段非常重要,可以发起ajax请求。
常用的生命周期钩子函数:
-
beforeCreate:在实例被创建之前调用,此时组件的数据、事件等还未初始化。
-
created:在实例创建完成后调用,此时组件的数据、事件等已经初始化完成,可以进行数据的获取和处理。
-
beforeMount:在组件挂载到 DOM 之前调用,此时组件的模板已经编译完成,但尚未挂载到页面。
-
mounted:在组件挂载到 DOM 后调用,此时组件已经被添加到页面中,可以进行 DOM 操作和异步请求等操作。
-
beforeUpdate:在组件更新之前调用,当组件的数据发生变化时会触发该钩子函数。
-
updated:在组件更新完成后调用,当组件的数据变化导致重新渲染时会触发该钩子函数。
-
beforeDestroy:在组件销毁之前调用,可以进行一些清理工作,比如清除定时器、解绑事件等。
-
destroyed:在组件销毁后调用,此时组件实例已经被销毁,不再可用。
另外还有一些较少用到的钩子函数,如 activated 和 deactivated,它们是用于配合 Vue Router 中的路由切换过渡效果的。
需要注意的是,Vue 3.x 版本中的生命周期钩子函数发生了一些变化,具体的钩子函数名称和调用时机可能有所不同,详细信息可以参考 Vue 官方文档。
在使用生命周期钩子函数时,你可以在组件内部通过在 methods
中定义相应的函数来实现特定的逻辑。每个生命周期钩子函数都会传入一个参数,代表当前的生命周期上下文,你可以在函数中访问和操作组件的数据、方法等。
综合示例
<template>
<div class="test-container">
<h3 id="myh3">Test.vue 组件 ---