Vue学习之Vue的生命周期详细解释

概览

这里把Vue的官网贴出来：Vue的生命周期钩子

Vue组件的生命周期可以分为以下八个阶段：

1. beforeCreate：组件实例刚被创建，属性和方法还未初始化，不能访问到data、props、computed等数据。

2. created：组件实例创建完成，属性和方法已经初始化，但是DOM还未渲染出来。可以访问到data、props、computed等数据，并进行一些初始化操作。

3. beforeMount：组件将要被挂载到页面上，此时DOM还未渲染出来。

4. mounted：组件已经被挂载到页面上，此时DOM已经渲染出来，可以进行一些DOM操作和数据请求等操作。

5. beforeUpdate：组件更新之前被调用，此时DOM还未被更新。

6. updated：组件更新完毕后被调用，此时DOM已经被更新，可以进行一些DOM操作和数据请求等操作。

7. beforeDestroy：组件将要被销毁，此时组件还可以访问到data、props、computed等数据，可以进行一些清理操作。

8. destroyed：组件已经被销毁，此时组件已经无法访问到data、props、computed等数据。

在每个生命周期阶段，Vue提供了对应的钩子函数，程序员可以在这些钩子函数中编写代码来处理相应的操作。同时，在每个生命周期阶段，程序员可以通过访问组件实例来获取和操作相应的数据和方法。

详细解释每个生命周期的应用

Vue 组件的生命周期可以分为8个阶段，程序员可以在每个阶段执行一些特定的操作。这里详细介绍一下每个阶段的具体说明、可以获取到的 API 以及程序员可以做的事情。

beforeCreate(创建前)

beforeCreate（创建前） 在组件实例化之前被调用，此时程序员可以获取到组件的配置对象（options），但是无法访问到组件的数据和方法。此时的组件还没有初始化完成，因此也没有 DOM 元素。在这个阶段，程序员可以做一些初始化工作，例如加载外部数据、初始化事件等操作。 可以获取到的 API：

• this.$options：访问组件的配置对象。

• 程序员可以做的事情：

  • 加载外部数据。

  • 初始化事件。

created(创建后)

created（创建后） 在组件实例化完成后被立即调用，此时程序员可以访问到组件的数据和方法，但是无法访问到 DOM 元素。此时的组件还没有被挂载到页面上。在这个阶段，程序员可以做一些组件初始化的工作，例如对数据进行操作、访问服务器等操作。 可以获取到的 API：

• this：访问组件的数据和方法。

• 程序员可以做的事情：

  • 对数据进行操作。

  • 访问服务器。

beforeMount(挂载前)

beforeMount（挂载前） 在组件被挂载到页面之前调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。在这个阶段，程序员可以对组件进行一些初始化操作，例如修改 DOM 元素的样式、添加事件监听器等操作。 可以获取到的 API：

• this：访问组件的数据和方法。

• this.$el：访问组件的 DOM 元素。

• 程序员可以做的事情：

  • 修改 DOM 元素的样式。

  • 添加事件监听器。

mounted(挂载后)

mounted（挂载后） 在组件被挂载到页面之后调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。在这个阶段，程序员可以进行一些需要访问 DOM 元素的操作，例如获取 DOM 元素的宽度和高度、添加第三方库等操作。 可以获取到的 API：

• this：访问组件的数据和方法。

• this.$el：访问组件的 DOM 元素。

• 程序员可以做的事情：

  • 获取 DOM 元素的宽度和高度。

  • 添加第三方库。

beforeUpdate(更新前)

beforeUpdate（更新前） 在组件更新之前调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。在这个阶段，程序员可以进行一些数据准备工作，例如计算需要更新的数据、清空某些数据等操作。 可以获取到的 API：

• this：访问组件的数据和方法。

• this.$el：访问组件的 DOM 元素。

• 程序员可以做的事情：

  • 计算需要更新的数据。

  • 清空某些数据。

updated(更新后)

updated（更新后） 在组件更新之后调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。在这个阶段，程序员可以进行一些 DOM 操作，例如修改 DOM 元素的样式、添加事件监听器等操作。 可以获取到的 API：

• this：访问组件的数据和方法。

• this.$el：访问组件的 DOM 元素。

• 程序员可以做的事情：

  • 修改 DOM 元素的样式。

  • 添加事件监听器。

注意点：更新事件(beforeUpdate以及updated)可以重复触发的

获取更新前后的dom元素

<template>
  <div>
    <h1>{
   
   { message }}</h1>
    <button @click="changeMessage">修改消息</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  updated() {
    console.log('组件更新完成');
    const el = this.$el; // 获取更新后的 DOM 元素
    const instance = this; // 获取更新后的组件实例
    // 可以在这里做一些操作，例如获取更新后的计算属性值、操作子组件等
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!';
    }
  }
}
</script>

在 updated 钩子函数中，我们可以通过 this.$el 获取更新后的 DOM 元素，通过 this 获取更新后的组件实例，并在这里做一些操作，例如获取更新后的计算属性值、操作子组件等。需要注意的是，updated 钩子函数只有在组件的 VNode 更新之后才会被调用，所以在此之前，我们无法获取到更新后的信息。

类似更新的dom元素类似的方法：$nextTick

$nextTick方法常常用于在DOM更新后执行某些操作，例如获取更新后的DOM元素或在更新后设置焦点。$nextTick 方法是异步执行的，因此可以保证在 DOM 更新完成后执行回调函数。

<template>
  <div>
    <h1 ref="title">{
   
   { message }}</h1>
    <button @click="changeMessage">修改消息</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!';
      this.$nextTick(() => {
        console.log(this.$refs.title.innerText); // "Hello, World!"
        this.$refs.title.focus(); // 设置标题元素的焦点
      });
    }
  }
}
</script>

在上面的代码中，我们在 changeMessage 方法中修改了 message 的值，并通过 $nextTick 方法在 DOM 更新完成后获取了更新后的标题元素并设置了其焦点。

类似更新的dom元素类似的方法：$watch

$watch 方法常常用于监听数据的变化，并在数据变化时执行某些操作。

<template>
  <div>
    <h1>{
   
   { message }}</h1>
    <button @click="changeMessage">修改消息</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`message 从 ${oldVal} 变为 ${newVal}`);
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!';
    }
  }
}
</script>

在上面的代码中，我们通过 $watch 方法监听了 message 的变化，并在 message 变化时打印了变化前后的值。

beforeDestroy(销毁前)

beforeDestroy（销毁前） 在组件实例销毁之前调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。在这个阶段，程序员可以进行一些清理工作，例如取消事件监听器、清除定时器等操作。 可以获取到的 API：

• this：访问组件的数据和方法。

• this.$el：访问组件的 DOM 元素。 程序员可以做的事情：

• 取消事件监听器。

• 清除定时器。

destroyed(销毁后)

destroyed（销毁后） 在组件实例销毁之后调用，此时程序员无法访问到组件的数据和方法，也无法访问到 DOM 元素。在这个阶段，程序员可以进行一些清理工作，例如释放内存、取消网络请求等操作。

• 可以获取到的 API：无

• 程序员可以做的事情：

  • 释放内存。

  • 取消网络请求。

代码示例

<template>
  <div>
    <h1>{
   
   { message }}</h1>
    <button @click="changeMessage">修改消息</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  beforeCreate() {
    console.log('组件被创建前');
  },
  created() {
    console.log('组件被创建后');
  },
  beforeMount() {
    console.log('组件被挂载前');
  },
  mounted() {
    console.log('组件被挂载后');
  },
  beforeUpdate() {
    console.log('组件更新前');
  },
  updated() {
    console.log('组件更新后');
  },
  beforeDestroy() {
    console.log('组件销毁前');
  },
  destroyed() {
    console.log('组件销毁后');
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!';
    }
  }
}
</script>

在上面的代码中，我们定义了一个简单的组件，包含一个按钮和一个消息。在组件的生命周期中，我们通过 console.log() 输出了不同阶段的信息。 此外，我们还定义了一个 changeMessage() 方法，用于修改消息。在该方法中，我们更改了组件的数据，并在页面上实时更新了消息。