带你一文了解Vue生命周期钩子

Vue生命周期钩子是指Vue在组件实例化、数据更新、渲染页面等不同阶段执行的方法。这些钩子函数对于理解Vue的生命周期非常重要，因为他们使得我们有机会在特定时间节点执行自己的代码。

Vue生命周期的三个阶段

Vue的生命周期可以分为三个主要的阶段：

创建阶段（Creation）：在这个阶段Vue实例化组件、设置数据观测、初始化事件等操作。
更新阶段（Update）：当组件的数据发生改变时进入此阶段，触发重新渲染页面。
销毁阶段（Destruction）：这个阶段处理组件销毁前的善后工作，比如清理定时器，取消事件绑定等。

Vue生命周期内部钩子函数

每个Vue实例在生命周期内都会自动地运行一些函数，我们被称之为生命周期钩子，下面是Vue生命周期的所有内部钩子函数：

beforeCreate：在Vue实例化组件之后、数据观测之前执行的，此时 this 指向 Vue 实例本身，其他的钩子函数中 this 都指向了组件上下文。
created：在实例化后，数据观测等数据操作完成，可以进行各种操作但是无法进行dom操作和vue组件渲染操作。
beforeMount：在Vue把模板渲染成html ，并将其插入页面之前执行。
mounted：在Vue把模板渲染成html ，并将其插入页面后执行。可以进行各种dom操作，实例已经挂载完成。
beforeUpdate：在数据更新时执行，这个阶段不允许更改数据。
updated：在数据更新完成并且页面已经重新渲染之后执行，这个阶段允许更改页面和状态，但不能发起新的数据请求。
activated：当使用keep-alive的时候，组件使活跃状态时执行。
deactivated：当使用keep-alive的时候，组件使非活跃状态时执行。
beforeUnmount：在组件销毁之前执行。
unmounted：在组件销毁之后和其它清理工作完成后执行。

生命周期钩子的正确使用

使用生命周期钩子可以允许我们做一些有趣的功能。例如，当创建一个Vue实例时，我们也可以在 beforeCreate 阶段发起一个数据请求。

下面是两个简单的生命周期钩子的示例：

1. 示例：在 created 阶段执行操作

代码：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: '',
      };
    },
    created() {
      // 发起请求
      fetch('https://api.example.com/title')
        .then((response) => response.text())
        .then((title) => {
          this.title = title;
        });
    },
  };
</script>

解释：在组件实例化后、数据观测前，Vue会自动调用 created 函数。这个时候我们可以来发起一个数据请求，并且在请求返回后用title属性保存请求结果，最终再在模板中使用。

2. 示例：在 mounted 阶段执行操作

代码：

<template>
  <div>
    <button @click="increaseCount">点击我增加计数器</button>
    <p>计数器的值为 {{ count }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      increaseCount() {
        this.count++;
      },
    },
    mounted() {
      // 在模板渲染到页面上之后，绑定一个事件监听器，当计数器到达20的时候弹出提示框
      document.addEventListener('count-is-20', () => {
        alert('计数器已经到达20了！恭喜！');
      });
    },
    updated() {
      // 在更新阶段时判断计数器是否为20，如果是则触发事件，弹出提示框
      if (this.count === 20) {
        document.dispatchEvent(new Event('count-is-20'));
      }
    },
  };
</script>

解释：在 mounted 阶段，Vue会自动把组件渲染的HTML插入到页面DOM中，这时我们可以来进行各种dom操作。在这个示例中，我们通过向 document 添加事件监听器 count-is-20 来监测计数器的更新，当计数器计数到 20 时弹窗提示。注意，我们在 updated 阶段验证计数器是否达到 20，因为这是一个数据变更的事件钩子。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：带你一文了解Vue生命周期钩子 - Python技术站