让面试官赞不绝口！VUE生命周期钩子指南

2024-01-31 19:51:24

VUE生命周期

VUE 生命周期钩子是 VUE.js 中用于响应组件生命周期各个阶段的函数。这些钩子允许您在组件创建、更新、销毁等不同阶段执行特定的操作。VUE 生命周期钩子主要包括：

beforeCreate：在实例初始化之后、数据观测（data observer）和 event/watcher setup 之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的初始化：数据观测、属性和方法的运算，watch/event 事件回调。但是，还没有挂载到 DOM。
beforeMount：在挂载开始之前被调用，此时模板已经被渲染成 HTML，但还没有插入到 DOM 中。
mounted：el 被新创建的 vm 实例替换，并挂载到实例上去之后调用该钩子。此时 DOM 现在更新，以反映数据。可以访问元素的 DOM。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在此生命周期访问更新后的道具和状态。
updated：由于数据更改导致虚拟 DOM 重新渲染和打补丁之后调用该钩子。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用，但已被标记为销毁。可以访问实例的数据和方法。
destroyed：实例销毁后调用。该钩子在服务器端渲染期间不被调用。

如何使用 VUE 生命周期钩子？

要使用 VUE 生命周期钩子，您需要在组件的选项对象中定义它们。例如：

export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    sayHello() {
      alert(this.message)
    }
  },
  mounted() {
    this.sayHello()
  }
}