Vue生命周期

前言

1. 组件创建时运行

在Vue中，组件的生命周期可以分为四个阶段。第一个阶段是组件创建时运行的生命周期钩子函数。

1.1 beforeCreate

在组件实例被创建之初，beforeCreate钩子函数会被调用。此时，组件的数据和方法都还未初始化，无法访问到props、data、computed和methods等属性。

export default {
  beforeCreate() {
    console.log("beforeCreate");
  },
};

1.2 created

在组件实例被创建后，created钩子函数会被调用。此时，组件的数据和方法已经初始化完成，可以访问到props、data、computed和methods等属性。

export default {
  created() {
    console.log("created");
  },
};

2. 挂载在DOM时运行

第二个阶段是组件挂载在DOM时运行的生命周期钩子函数。

2.1 beforeMount

在组件挂载到DOM之前，beforeMount钩子函数会被调用。此时，组件的模板已经编译完成，但还未挂载到DOM中。

export default {
  beforeMount() {
    console.log("beforeMount");
  },
};

2.2 mounted

在组件挂载到DOM后，mounted钩子函数会被调用。此时，组件已经被渲染到页面上，并且可以访问到DOM元素。

export default {
  mounted() {
    console.log("mounted");
  },
};

3. 响应数据修改时运行

第三个阶段是组件响应数据修改时运行的生命周期钩子函数。

3.1 beforeUpdate

在组件数据更新之前，beforeUpdate钩子函数会被调用。此时，组件的数据发生了改变，但DOM尚未重新渲染。

export default {
  beforeUpdate() {
    console.log("beforeUpdate");
  },
};

3.2 updated

在组件数据更新之后，updated钩子函数会被调用。此时，组件的数据已经更新完成，并且DOM已经重新渲染。

export default {
  updated() {
    console.log("updated");
  },
};

4. 元素销毁前执行

第四个阶段是组件元素销毁前执行的生命周期钩子函数。

4.1 beforeDestroy

在组件实例被销毁之前，beforeDestroy钩子函数会被调用。此时，组件实例仍然可用，可以执行一些清理工作。

export default {
  beforeDestroy() {
    console.log("beforeDestroy");
  },
};

4.2 destroyed

在组件实例被销毁之后，destroyed钩子函数会被调用。此时，组件实例已经被销毁，无法再访问到组件的数据和方法。

export default {
  destroyed() {
    console.log("destroyed");
  },
};

通过使用Vue的生命周期钩子函数，我们可以在不同阶段执行相应的操作，例如初始化数据、发送网络请求、监听事件等。这样可以更好地控制组件的行为，并且方便调试和排查问题。

Vue2和Vue3的生命周期区别

1. 组件创建阶段

1.1 Vue2中的生命周期钩子函数

在Vue2中，组件的生命周期钩子函数包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。

export default {
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
  },
};

1.2 Vue3中的生命周期钩子函数

在Vue3中，组件的生命周期钩子函数发生了一些改变。beforeCreate和created保持不变，但beforeMount和mounted被合并为onBeforeMount和onMounted，beforeUpdate和updated被合并为onBeforeUpdate和onUpdated，beforeDestroy和destroyed被合并为onBeforeUnmount和onUnmounted。

export default {
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  onBeforeMount() {
    console.log("onBeforeMount");
  },
  onMounted() {
    console.log("onMounted");
  },
  onBeforeUpdate() {
    console.log("onBeforeUpdate");
  },
  onUpdated() {
    console.log("onUpdated");
  },
  onBeforeUnmount() {
    console.log("onBeforeUnmount");
  },
  onUnmounted() {
    console.log("onUnmounted");
  },
};

2. 组件更新阶段

2.1 Vue2中的生命周期钩子函数

在Vue2中，组件的更新阶段包括beforeUpdate和updated。

export default {
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
};

2.2 Vue3中的生命周期钩子函数

在Vue3中，组件的更新阶段被拆分成了更细粒度的钩子函数。新增了onBeforeUpdate和onUpdated，分别在更新之前和更新之后被调用。

export default {
  onBeforeUpdate() {
    console.log("onBeforeUpdate");
  },
  onUpdated() {
    console.log("onUpdated");
  },
};

3. 组件卸载阶段

3.1 Vue2中的生命周期钩子函数

在Vue2中，组件的卸载阶段包括beforeDestroy和destroyed。

export default {
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
  },
};

3.2 Vue3中的生命周期钩子函数

在Vue3中，组件的卸载阶段被拆分成了更细粒度的钩子函数。新增了onBeforeUnmount和onUnmounted，分别在卸载之前和卸载之后被调用。

export default {
  onBeforeUnmount() {
    console.log("onBeforeUnmount");
  },
  onUnmounted() {
    console.log("onUnmounted");
  },
};

通过对比Vue2和Vue3的生命周期钩子函数的变化，我们可以看到Vue3在生命周期的设计上更加灵活和精细化，提供了更多的钩子函数来满足不同的需求。这些改变使得开发者能够更好地控制组件的行为，并且有助于提高应用的性能。