vue的生命周期有哪些？

Vue.js组件的生命周期钩子可以分为8个阶段，分别是：

1.beforeCreate：实例刚被创建，属性和方法还未绑定和监听，此时还不能访问到 data、computed、watch、methods等属性和方法。

实例刚被创建，此时还不能访问到 data、computed、watch、methods等属性和方法，主要用于在实例被创建之前进行一些初始化工作，比如设置一些默认值，加载一些外部数据等。例如

export default {
  beforeCreate() {
    console.log('组件实例刚被创建');
    // 设置默认值
    this.count = 0;
    // 加载外部数据
    this.$http.get('/api/data').then(response => {
      this.data = response.data;
    });
  }
}

2.created：实例已经创建完成，属性和方法已经绑定和监听，但是此时还不能访问到 $el属性，因为它还没有被挂载到DOM上。

实例已经创建完成，属性和方法已经绑定和监听，但是此时还不能访问到 $el属性，因为它还没有被挂载到DOM上。主要用于在实例被创建之后进行一些异步操作，比如获取数据、初始化插件等。例如：

export default {
  created() {
    console.log('组件实例已经创建完成');
    // 异步操作
    this.$http.get('/api/data').then(response => {
      this.data = response.data;
    });
    // 初始化插件
    this.$refs.carousel.init();
  }
}

3.beforeMount：在挂载之前被调用，此时已经完成了编译模板的过程，但是还没有把编译后的模板替换到页面中去。

在挂载之前被调用，此时已经完成了编译模板的过程，但是还没有把编译后的模板替换到页面中去。主要用于在模板被挂载到页面之前进行一些操作，比如修改DOM节点、计算一些样式等。例如

export default {
  beforeMount() {
    console.log('模板编译完成，但是还没有被挂载到页面');
    // 修改DOM节点
    this.$el.style.display = 'none';
    // 计算样式
    this.style = {
      width: this.width + 'px',
      height: this.height + 'px',
      backgroundColor: this.color
    };
  }
}

4.mounted：实例已经被挂载到页面中，此时可以访问到 $el 属性，并且 $el已经对应了真实的DOM元素。

实例已经被挂载到页面中，此时可以访问到 $el 属性，并且 $el已经对应了真实的DOM元素。主要用于在模板被挂载到页面之后进行一些操作，比如初始化第三方插件、绑定事件等。例如：

export default {
  mounted() {
    console.log('模板已经被挂载到页面中');
    // 初始化插件
    this.$refs.carousel.init();
    // 绑定事件
    this.$el.addEventListener('click', this.handleClick);
  }
}

5.beforeUpdate：在数据更新之前被调用，此时可以在更新之前访问到数据和DOM。

在数据更新之前被调用，此时可以在更新之前访问到数据和DOM，主要用于在数据更新之前进行一些操作，比如获取最新数据、修改DOM节点等。例如：

export default {
  beforeUpdate() {
    console.log('数据即将更新');
    // 获取最新数据
    this.$http.get('/api/data').then(response => {
      this.data = response.data;
    });
    // 修改DOM节点
    this.$el.style.display = 'none';
  }
}

6.updated：实例已经完成了数据的更新，此时可以访问到更新后的数据和DOM。

实例已经完成了数据的更新，此时可以访问到更新后的数据和DOM，主要用于在数据更新之后进行一些操作，比如修改样式、重新计算属性等。例如：

export default {
  updated() {
    console.log('数据已经更新');
    // 修改样式
    this.$el.style.backgroundColor = this.color;
    // 重新计算属性
    this.total = this.items.reduce((sum, item) => sum + item.price, 0);
  }
}

7.beforeDestroy：在实例销毁之前被调用，此时实例还可以访问到 data、computed、watch、methods等属性和方法。

在实例销毁之前被调用，此时实例还可以访问到 data、computed、watch、methods等属性和方法，主要用于在实例被销毁之前进行一些清理工作，比如取消定时器、解绑事件等。例如：

export default {
  beforeDestroy() {
    console.log('组件实例即将被销毁');
    // 取消定时器
    clearInterval(this.timer);
    // 解绑事件
    this.$el.removeEventListener('click', this.handleClick);
  }
}

8.destroyed：实例已经被销毁了，此时无法再访问到 data、computed、watch、methods等属性和方法。

实例已经被销毁了，此时无法再访问到 data、computed、watch、methods等属性和方法，主要用于在实例被销毁之后进行一些清理工作，比如释放内存、销毁第三方插件等。例如：

export default {
  destroyed() {
    console.log('组件实例已经被销毁');
    // 释放内存
    this.data = null;
    // 销毁第三方插件
    this.$refs.carousel.destroy();
  }
}