Vue2生命周期详解：从创建到销毁的完整流程

Vue2生命周期详解：从创建到销毁的完整流程

引用

CSDN

1.

https://blog.csdn.net/weixin_41192489/article/details/136549141

beforeCreate

开始创建

• 在内存中创建出空白的 vue 实例
• data 和 methods 属性还没初始化，不能调用
• 数据观测 (data observer) 和 event/watcher 事件配置还没调用

【执行数据观测 (data observer) 和 event/watcher 事件配置】

created

• vue 实例初始化完成，完成响应式绑定
• data 和 methods 属性初始化完成，可以调用
• 可以进行Ajax请求
• 已完成数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。
• 还没开始编译模板

【在内存中编译模板】

beforeMount

服务器端渲染无此生命周期

• 编译模板，首次调用 render 生成 vdom
• 还没有开始渲染 DOM

【挂载模板到页面】

mounted

结束创建 服务器端渲染无此生命周期

mounted 不保证所有的子组件也都一起被挂载，所以如果希望等到整个视图都渲染完毕，需在 mounted 内部使用 vm.$nextTick

至此，实例结束创建期，进入运行期，等待数据发生变化。

【数据变化】—— 触发 beforeUpdate 和 updated

beforeUpdate

开始更新

• 状态更新时触发
• 此时data 中的状态值是最新的，但是界面上显示的数据还是旧的
• 准备更新 DOM (尚未更新 DOM )

【更新页面】

updated

结束更新

• DOM 更新完成 （此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新 ）
• 不要在 updated 中修改 data，可能会导致死循环

可用于子组件向父组件传递数据的变化

updated(){
    this.$emit('contentChange',this.content)
},

beforeDestroy

开始销毁

常用于清除定时器、解绑全局事件、自定义事件

【销毁实例】

destroyed

结束销毁

• 父组件 created
• 子组件 created （外到内）
• 子组件 mounted
• 父组件 mounted （内到外）
• 子组件 updated
• 父组件 updated （内到外）
• 子组件 destroyed
• 父组件 destroyed （内到外）

范例代码

src\views\index.vue

<template>
  <div>
    <Child :num="num" />
    <button @click="add_num">+1</button>
  </div>
</template>

<script>
import Child from "./child.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    add_num() {
      this.num += 1;
    },
  },
  created() {
    console.log("父组件 created");
  },
  mounted() {
    console.log("父组件 mounted");
  },
  updated() {
    console.log("父组件 updated");
  },
  destroyed() {
    console.log("父组件 destroyed");
  },
};
</script>

src\views\menu\child.vue

<template>
  <div>
    {{ num }}
  </div>
</template>

<script>
export default {
  props: {
    num: Number,
  },

  created() {
    console.log("子组件 created");
  },
  mounted() {
    console.log("子组件 mounted");
  },
  updated() {
    console.log("子组件 updated");
  },
  destroyed() {
    console.log("子组件 destroyed");
  },
};
</script>