vue中的生命周期及钩子函数

Vue 是一款流行的前端框架，它的设计理念是数据驱动视图。在 Vue 中，每个组件都有一组生命周期钩子函数。钩子函数是指在组件的某个时刻会被调用的函数。Vue 的生命周期分为四个阶段：创建、挂载、更新和销毁阶段。

创建阶段的生命周期钩子函数

在创建阶段，Vue 将会创建组件的实例，并先后调用以下生命周期钩子函数：

beforeCreate

在实例被创建之前，beforeCreate 将被调用。在这个阶段，组件实例还未创建，所以我们无法访问到 this 对象中的数据和方法，此时最好不要进行复杂的 DOM 操作。下面是一个示例：

export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
};

created

created 将在实例被创建后立即调用。在这个阶段，组件实例已经被创建，可以访问到 this 对象中的数据和方法，但是组件还没有被挂载到文档中。下面是一个示例：

export default {
  created() {
    console.log('created');
  },
};

挂载阶段的生命周期钩子函数

在挂载阶段，Vue 将会将组件挂载到文档中，并先后调用以下生命周期钩子函数：

beforeMount

在挂载之前，beforeMount 将被调用。在这个阶段，组件已经被创建，但是还没有被挂载到文档中。此时可以对组件进行一些 DOM 操作。下面是一个示例：

export default {
  beforeMount() {
    console.log('beforeMount');
  },
};

mounted

在挂载后，mounted 将被调用。在这个阶段，组件已经被挂载到文档中，可以访问到 this 对象中的数据和方法，可以进行一些与 DOM 相关的操作。下面是一个示例：

export default {
  mounted() {
    console.log('mounted');
  },
};

更新阶段的生命周期钩子函数

在更新阶段，Vue 将会根据数据的变化，更新组件的状态，重新渲染组件，并先后调用以下生命周期钩子函数：

beforeUpdate

在数据更新时，beforeUpdate 将被调用。在这个阶段，组件的状态已经发生了变化，但是还没有重新渲染，此时可以对数据进行一些处理。下面是一个示例：

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  },
};

updated

在组件更新之后，updated 将被调用。在这个阶段，组件已经被重新渲染，可以访问到更新后的 DOM。此时应该避免更新数据，可能会导致死循环。下面是一个示例：

export default {
  updated() {
    console.log('updated');
  },
};

销毁阶段的生命周期钩子函数

在销毁阶段，Vue 将会销毁组件的实例，并先后调用以下生命周期钩子函数：

beforeDestroy

在组件销毁之前，beforeDestroy 将被调用。在这个阶段，组件还未被销毁，此时可以对组件进行一些清理工作，比如取消事件监听器和定时器。下面是一个示例：

export default {
  beforeDestroy() {
    console.log('beforeDestroy');
  },
};

destroyed

在组件销毁后，destroyed 将被调用。在这个阶段，组件已经被彻底销毁，无法访问到组件的数据和方法。下面是一个示例：

export default {
  destroyed() {
    console.log('destroyed');
  },
};

以上就是 Vue 中的生命周期及钩子函数的完整攻略。

示例1：

下面是一个简单的计时器组件，当组件被挂载和更新时，将会调用 setInterval 自动更新计时器的状态，而在组件被销毁时清除计时器。

<template>
  <div>{{ timer }}</div>
</template>

<script>
export default {
  data() {
    return {
      timer: 0,
      intervalId: null,
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      this.timer++;
    }, 1000);
  },
  updated() {
    this.intervalId = setInterval(() => {
      this.timer++;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
};
</script>

示例2：

下面是一个简单的表格组件，当组件更新时，将判断表单数据是否发生变化，如果有变化，则弹出确认弹窗。

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      prevProps: [],
    };
  },
  beforeUpdate() {
    this.prevProps = this.props.items;
  },
  updated() {
    if (JSON.stringify(this.props.items) !== JSON.stringify(this.prevProps)) {
      this.showConfirm();
    }
  },
  methods: {
    showConfirm() {
      if (confirm('The form data has been changed. Do you want to save it?')) {
        // save form data
      }
    },
  },
};
</script>