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

最新推荐文章于 2025-08-21 21:47:33 发布

Stringzhua

最新推荐文章于 2025-08-21 21:47:33 发布

阅读量216

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue2 文章标签： vue.js 前端 javascript

@Stringzhua

本文链接：https://blog.csdn.net/weixin_60583755/article/details/150580418

Vue2 专栏收录该内容

7 篇文章

订阅专栏

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 转换为展示DOM
    mounted(){
      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>