Vue生命周期

一、含义：

1、beforeCreate:

在这个阶段，实例已经初始化，但是数据观测和事件还未被设置。可以用来进行一些初始化的工作，例如设置一些初始的数据。

2、created:

在这个阶段，实例已经创建完成，数据观测和事件都已经被设置。可以在这里进行一些数据的获取和初始化操作。

3、beforeMount:

在挂载开始之前被调用。相关的 render 函数首次被调用。可以在这里进行一些 DOM 操作之前的准备工作。

4、mounted:

在这个阶段，el 被新创建的 vm.$el 替换，并挂载到实例上去。可以在这里进行一些需要 DOM 元素的操作，例如获取元素的尺寸、绑定事件等。

5、beforeUpdate:

在数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这里进行一些数据更新前的准备工作。

6、updated:

在数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。可以在这里进行一些 DOM 更新后的操作。

7、beforeDestroy:

在实例销毁之前调用。可以用来做一些销毁前的清理工作，例如清除定时器、取消订阅等。	

8、destroyed:

在实例销毁之后调用。可以在这里进行一些销毁后的清理工作，例如解绑事件、释放资源等。

二、实例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('Before create: The message is', this.message);
  },
  created() {
    console.log('Created: The message is', this.message);
    this.getMessageFromAPI();
  },
  mounted() {
    console.log('Mounted: The message is', this.message);
  },
  beforeUpdate() {
    console.log('Before update: The message is', this.message);
  },
  updated() {
    console.log('Updated: The message is', this.message);
  },
  beforeDestroy() {
    console.log('Before destroy: The message is', this.message);
  },
  destroyed() {
    console.log('Destroyed: The message is', this.message);
  },
  methods: {
    getMessageFromAPI() {
      // Simulate getting message from API
      setTimeout(() => {
        this.message = 'Hello, Vue! (updated)';
      }, 2000);
    }
  }
};
</script>

三、@click 和 @tab-click的区别

@click:
用于监听元素的点击事件，即当用户点击该元素时触发相应的逻辑。
在 Vue 中，可以将 @click 直接绑定到元素上，例如：<button @click=“handleClick”>Click me，表示当用户点击按钮时调用 handleClick 方法。
@tab-click:
这是一个自定义事件名称，用于监听一个自定义的 tab-click 事件。
在 Vue 中，可以使用 @tab-click 来监听组件内部触发的名为 tab-click 的自定义事件，例如：<custom-component @tab-click=“handleTabClick”>，表示当 custom-component 组件内部触发了名为 tab-click 的自定义事件时，调用 handleTabClick 方法。
总的来说，@click 用于监听元素的点击事件，而 @tab-click 是一个自定义事件的监听方式，用于监听自定义事件的触发。