目录
Vue生命周期-介绍
状态图
实例演示
Vue生命周期-介绍
- 生命周期：指一个对象从创建到销毁的整个过程。
- 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。
| 状态 | 阶段周期 |
|---|---|
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 挂载前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
<script>
new Vue({
el:"#app",
data:{
},
mounted(){
console.log("Vue挂载完毕，发送请求获取数据");
},
methods:{
},
})
</script>Vue 的生命周期指的是组件从创建到销毁的整个过程中所经历的一系列阶段，每个阶段都有对应的钩子函数，可以在这些钩子函数中执行特定的操作。
主要的生命周期钩子函数包括：
- beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。
- created：实例已经创建完成，此时组件的数据已经完成了数据观测、属性和方法的运算，但尚未挂载到 DOM 上，此时可以进行一些数据请求等操作。
- beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
- mounted：实例被挂载后调用，此时组件已经出现在页面中，可以操作 DOM 元素。
- beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
- updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：实例销毁后调用，组件的所有数据、方法、指令等都不可用。
状态图
实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
new Vue({
el:"#app",
// 创建一个新的 Vue 实例
// "el" 选项指定了该实例要挂载的 DOM 元素，通过 CSS 选择器 "#app" 来找到对应的元素
data:{
// "data" 选项用于定义 Vue 实例的数据
},
mounted(){
console.log("Vue 挂载完毕，发送请求获取数据");
// "mounted" 是 Vue 实例的生命周期钩子函数
// 当 Vue 实例被挂载到 DOM 上后，这个函数会被自动调用
// 这里只是简单地在控制台输出了一条提示信息，表示挂载完成并可以进行例如发送请求获取数据等操作
},
methods:{
// "methods" 选项用于定义 Vue 实例的方法
}
})
</script>
</html>运行结果：
END
学习自：黑马程序员——JavawWeb课程
