vue生命周期

<template>
  <div>
    <h1>vue生命周期</h1>
    <h2 @click="data = data + '--已点击'">{{ data }}</h2>
  </div>
</template>
<script>
export default {
  data() {
    return { data: "" };
  },
  beforeCreate() {
    console.log("开始第一步：数据初始化");
    // 进行异步请求，获取数据等操作 this.data = '数据初始化成功';
  },
  created() {
    console.log("开始第二步：数据处理");
    // 对数据进行处理，例如进行格式化或者加工
    this.data = this.data + "-数据处理成功";
  },
  beforeMount() {
    console.log("开始第三步：准备数据");
    // 渲染组件之前，对数据进行进一步的处理
    this.data = this.data + "-数据准备完成！";
  },
  mounted() {
    console.log("开始第四步：操作DOM"); // 操作DOM，例如获取元素的宽度或者高度等信息
  },
  beforeUpdate() {
    console.log("开始第五步：备份数据");
    // 对需要更新的状态进行备份，以便进行比较和校验
  },
  updated() {
    console.log("开始第六步：更新状态");
    // 根据DOM更新后的状态进行状态的更新
  },
  beforeUnmount() {
    console.log("开始第七步：清理定时器");
    // 清理组件中的定时器等占用内存的资源
  },
  unmounted() {
    console.log("开始第八步：释放内存");
    // 释放组件中占用的内存和资源
  },
};
</script>
 

第一次运行结果

点击文字运行结果