vue生命周期以及能访问到的阶段-CFANZ编程社区

Vue实例从创建到销毁的过程，称为Vue的生命周期。Vue2.x的生命周期钩子主要包括：

创建期间的钩子：

beforeCreate：实例初始化之前，此时不能访问到vm或者data等，常用于插件开发
created：实例创建后，此时可以访问到data，但不能访问到DOM，常用于发送请求，设置事件监听等

挂载期间的钩子：

beforeMount：模板编译之后，在挂载开始之前，此时不能访问到DOM，但可以访问到vm，常用于初始化视图层的DOM结构
mounted：实例挂载到DOM上之后，此时可以访问到DOM，常用于执行一些DOM操作，发送请求，设置定时器等

更新期间的钩子：

beforeUpdate：数据更新之前，此时可以访问到data和DOM，常用于更新data之前进行一些操作
updated：数据更新之后，DOM已经更新，此时可以访问到data和DOM，常用于DOM操作，发送请求等

销毁期间的钩子：

beforeDestroy：实例销毁之前，此时可以访问到data和DOM，常用于清理工作，例如清除定时器，解除事件监听等
destroyed：实例销毁后，此时不能访问到data和DOM，常用于清理工作

下面是一个简单的例子，展示了这些钩子的使用：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate:', this.$data, this.$el);
  },
  created() {
    console.log('created:', this.$data, this.$el);
  },
  beforeMount() {
    console.log('beforeMount:', this.$data, this.$el);
  },
  mounted() {
    console.log('mounted:', this.$data, this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate:', this.$data, this.$el);
  },
  updated() {
    console.log('updated:', this.$data, this.$el);
  },
  beforeDestroy() {
    console.log('beforeDestroy:', this.$data, this.$el);
  },
  destroyed() {
    console.log('destroyed:', this.$data, this.$el);
  }
};
</script>

在实际开发中，可以根据需要合理地使用这些生命周期钩子，例如在created钩子中发送请求获取数据，在mounted钩子中执行DOM操作，在beforeDestroy或destroyed钩子中清理定时器和事件监听等