Vue 组件生命周期

Vue.js 是一个流行的前端JavaScript框架，它提供了一套完整的组件系统。在Vue中，组件的生命周期分为几个不同的阶段，每个阶段都有其特定的钩子函数，允许开发者在这些阶段执行一些操作。

生命周期钩子

以下是一些常见的Vue组件生命周期钩子：

• beforeCreate: 在实例初始化之后、数据观测和事件/watcher 设置之前被调用。
• created: 在实例创建完成后被立即调用。在这一步，实例已完成数据观测、属性和方法的运算、watch/event事件回调。
• beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
• beforeUpdate: 数据更新时调用，发生在虚拟DOM打补丁之前。
• updated: 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用这个钩子。
• beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed: Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

示例

以下是一个简单的Vue组件，展示了生命周期钩子的使用：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  mounted() {
    console.log('mounted');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }
});

扩展阅读

想要了解更多关于Vue生命周期的信息，可以阅读Vue官方文档。

Vue Logo