Vue生命周期及其使用场景

前言

我们先来了解一下什么是生命周期？

从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期

那么生命周期勾子有哪些？

• 初始化阶段
  beforeCreate :实例创建前,还未初始化data和methods，此时无法访问到data数据和methods方法 created : 实例已创建，可以使用数据，更改数据，在这里改函数不会触发updated函数,一般可以在这里做初始数据的获取，也可以访问到data中的数据和methods的方法了

• 挂载阶段
  beforeMount :开始找实例或组件对应模板，虚拟DOM已经创建完成,马上就要渲染，也可以在这里更改数据，是渲染前最后一次更改数据的机会
  mounted :渲染出真实DOM,组件已经出现在页面中，数据，真实Dom已经处理好了,可访问到DOM节点，事件也挂载好了，可以在这里开启定时器，发送网络请求，绑定自定义事件等

• 更新阶段 ‘
  beforeUpdate :页面数据更新之前，监听数据的改变，并且可以获取到最新的数据，但是不会更新页面的数据，数据是新的，页面是旧的。
  updated :数据更新完毕，在这个钩子函数中，我们可以获取当前最新的数据，组件DOM已经完成更新，数据是新的，页面也是新的。请避免在此期间更改数据，因为会导致无限循环的更新。

• 销毁阶段
  beforeDestroy :销毁之前，还是可以使用HTML，在当前阶段实例完全可以被使用，我们进行收尾工作。如清除计时器，清除绑定与监听，取消订阅消息等。
  destroyed :销毁之后,组件已被拆解，数据被卸除，监听被移出，子实例也统统被销毁，剩个空壳。

接下来说一下实际中的应用场景：

1、beforeCreate：由于此时组件实例还未完全创建，通常没有太多实际用途，但在某些高级用法中（如插件开发）可能会用到

new Vue({
  beforeCreate() {
    console.log('This runs before the instance is fully created.');
    // 初始化一些全局的状态，例如插件
    someGlobalPlugin.init();
  },
  // ... 其他选项
});

2、created：这个阶段适合进行一些异步操作、‌初始化数据、‌订阅事件等

<script>  
export default {  
  data() {  
    return {  
      message: 'Hello Vue 3!'  
    };  
  },  
  created() {  
    // 组件实例已创建，可以访问到 data 中的数据  
    console.log('created 钩子被调用', this.message);  
    // 可以在这里发起异步请求或执行初始化操作  
  },  
  // ...  
}  
</script>

3、beforeMount：这个阶段适合执行一些不影响DOM结构的操作，‌比如数据预处理或计算属性的最终确定等

<script>  
export default {  
  beforeMount() {  
    // 模板编译完成，但尚未挂载到页面上  
    console.log('beforeMount 钩子被调用');  
    // 可以在这里对即将被挂载的模板做一些处理  
  },  
  // ...  
}  
</script>

4、mounted：在实例挂载完成后被调用，也就是说，此时 DOM 已经被渲染出来。因此，mounted 常用于以下几种场景
①发送 AJAX 请求：在 mounted 钩子中发送 AJAX 请求，可以确保在数据加载完成后 DOM 已经被渲染，避免因为数据的异步加载导致页面渲染不完整或错误。
②初始化非Vue插件：例如，如果你使用了一个非Vue的JavaScript库，你可能需要在 mounted 钩子中进行初始化，因为此时 DOM 已经准备好了。
③监听DOM事件：在 mounted 钩子中添加事件监听器，可以确保事件监听器绑定在已经存在的DOM元素上。
④操作DOM元素：在 mounted 钩子中进行DOM操作，比如添加事件监听器、动态绑定样式等。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    someData: null
  },
  mounted() {
    axios.get('/some-api')
    .then(response => {
      this.someData = response.data;
    })
    .catch(error => {
      console.error('There was an error!', error);
    });
  }
});

5、beforeUpdate：这个钩子可以用来访问现有的 DOM 元素，数据更新前的特殊处理，响应式数据更新前的监听

<template>
  <div>
    <p ref="message">{{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeUpdate() {
    console.log('更新前的DOM:', this.$refs.message.innerText);
  }
};
</script>

6、updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环

<template>  
  <div>{{ message }}</div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello Vue 3!'  
    };  
  },  
  updated() {  
    // DOM 已更新，可以执行依赖于 DOM 的操作  
    console.log('updated 钩子被调用', this.message);  
    // 可以在这里访问更新后的 DOM 状态，并执行相关的 DOM 操作  
  },  
  methods: {  
    changeMessage() {  
      this.message = 'Hello, updated!';  
    }  
  },  
  // ...  
}  
</script>

7、beforeDestroy：解绑事件监听器和清理资源

<script>  
export default {  
  beforeDestroy() {  
    // 组件即将被卸载  
    console.log('beforeDestroy 钩子被调用');  
    // 可以在这里解绑事件监听器和清理资源等  
  },  
  // ...  
}  
</script>

8、destroyed：当一个组件被销毁时，‌destroyed函数被触发，‌用于执行必要的清理工作。‌这包括释放组件占用的内存以避免内存泄漏。‌例如，‌如果组件在创建时添加了事件监听器、‌定时器或者对DOM进行了某些操作，‌那么在destroyed函数中应该移除这些监听器、‌清除定时器或恢复DOM到初始状态，‌以确保资源的正确释放

<script>  
export default {  
  destroyed() {  
    // 组件即将被卸载  
    console.log('destroyed 钩子被调用');  
    // 可以在这里移除监听器等等
  },  
  // ...  
}  
</script>

总而言之

Vue 3 的生命周期钩子为开发者提供了在组件生命周期的不同阶段执行特定逻辑的能力。通过合理使用这些钩子，我们可以更好地管理组件的状态、DOM 操作和副作用，从而创建出更高效、更健壮的 Vue 应用程序。每个钩子都有其特定的使用场景，了解并正确使用它们可以大大提高我们的开发效率。

文章部分参考自：https://blog.csdn.net/aike13ky/article/details/138473805