当前位置：首页 > news >正文

Vue图解！！！Vue的生命周期管理【7】

news 2025/8/22 10:32:38

Vue的生命周期管理

1.图解：
2.生命周期解读
- - 1.创建阶段
  - 2.挂载阶段
  - 3.更新阶段：
  - 4.销毁阶段：
3.案例演示：

1.图解：

2.生命周期解读

1.创建阶段

 `beforeCreate`：- 在实例初始化之后，数据观测和事件配置之前被调用。
- 此时不能访问 `data`、`computed` 和 `methods` 中的数据和方法。`created`：- 在实例创建完成后被立即调用。
- 此时可以访问 `data`、`computed` 和 `methods`，但 DOM 尚未挂载，无法访问到 DOM 元素。
- 通常可以在此阶段进行一些数据初始化、发送 Ajax 请求获取数据等操作。

2.挂载阶段

`beforeMount`：- 在挂载开始之前被调用。
- 此时模板已经编译完成，但尚未挂载到 DOM 中。`mounted`：- 实例被挂载后调用。
- 此时可以访问到 DOM 元素，可以进行一些 DOM 操作、初始化第三方插件等。

3.更新阶段：

beforeUpdate：

- 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
- 可以在这个钩子中获取更新前的状态。

updated：

- 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
- 可以在此钩子中执行依赖于 DOM 的操作，但要注意避免无限循环的更新

4.销毁阶段：

`beforeDestroy`：- 在实例销毁之前调用。
- 可以在此处解绑一些全局事件、清除定时器等操作，以防止内存泄漏。`destroyed`：- 实例销毁后调用。
- 此时组件的所有数据观测、事件监听器和子组件都已被销毁。

3.案例演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root"><h2>count:{{count}}</h2><button @click="count++">count++</button><button @click="destroy">销毁</button>
</div>
<!--1.引入Vue js 文件-->
<script src="./js/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {count:99}},methods:{destroy(){this.$destroy();}},beforeCreate(){console.log("beforeCreate 无法通过VM访问到data中的数，methods中的方法 不能使用的")},//数据代理  数据监测created(){console.log("created 可以通过VM访问到data中的数，methods中的方法能使用")},//形成虚拟DOM ......beforeMount(){console.log("beforeMount 页面显示的时 未经编译的DOM结构")//     所有对DOM的操作 都是无效的},//将虚拟DOM 转换为展示DOMmounted(){console.log("mounted  页面完全展示 ")//所有对真实DOM的操作 都是奏效// 发起请求 订阅消息 绑定 事件.....//比如 ： 定义了 定时器},beforeUpdate(){console.log("beforeUpdate  数据是新的，但是页面是旧的")},// 生成新的虚拟DOM  与 旧的虚拟DOM 进行比对// 最终完成页面的更新updated(){console.log("updated 数据是新的 页面也是新的");},beforeDestroy(){console.log("beforeDestroy  此时vm中所有的 数据  方法  指令 等等 都是可用状态")console.log("马上要执行 销毁过程 开始释放资源 取消订阅 清除定时器.....")},destroyed(){console.log("destroyed 结束")}}).$mount("#root");
</script>
</body>
</html>