【解决方案】【最佳实践】vue2.0生命周期、运行机制（详细讲解+中文图解）

目录

前言

vue2.0生命周期简介

vue2.0生命周期中文图解

vue2.0生命周期函数开发使用场景

beforeCreate()：

created()：

beforeMount()：

mounted()：

beforeUpdate()：

updated()：

beforeDestroy()：

destroyed()：

activated() 和 deactivated()：

errorCaptured(err, vm, info)：

vue2.0生命周期代码实践

结语

---

前言

Vue 2.0是2016年9月30日正式上线。

vue3.0是2020年09月18日正式发布。

        最近对vue2.0和vue3.0的市场做了评判，用了最简单的一个方法，就是去各大招聘网站看了前端招聘信息。所以我可以预估在很长一段时间内，一些新成立的公司或者新开发的项目，会对vue3.0有所要求。而那些已经存在的老项目，因为需要继续的维护和添加加新功能，依然会对vue2.0有大量的需求，而且时间越长，加的功能越多，升级到vue3.0的希望就越渺茫！

想学习了解vue3.0生命周期以及组合式api的同学，可以点击下面链接
【解决方案】【最佳实践】vue3.0生命周期、组合式API（示例代码+详细讲解+中文图解）http://t.csdnimg.cn/axZA1

vue2.0生命周期简介

       Vue.js 是一个用于构建用户界面的渐进式框架，它从一开始就设计得易于上手和使用。Vue 2.0 的生命周期钩子（Lifecycle Hooks）是 Vue 框架中非常重要的概念，它们允许开发者在 Vue 实例的生命周期的不同阶段执行特定的逻辑。

vue2.0生命周期中文图解

vue2.0生命周期函数开发使用场景

在Vue 2.0中，生命周期钩子提供了在组件的不同阶段执行代码的能力。以下是每个生命周期钩子的实际开发使用场景：

1. beforeCreate()：

   • 初始数据获取：在这个阶段，可以进行一些数据的初始化操作，比如从服务端获取初始数据。
   • 初始事件绑定：可以在这里绑定一些全局或局部的事件监听器。

2. created()：

   • 数据处理：可以对data中的数据进行处理或计算，比如根据初始数据设置一些状态。
   • 事件/侦听器注册：在这个阶段可以注册一些自定义的事件侦听器。

3. beforeMount()：

   • 准备DOM操作：在这个阶段，可以进行一些不涉及挂载元素的DOM操作。
   • 异步数据请求：可以发起异步请求以获取数据，但要注意不要在这个阶段进行DOM操作，因为此时$el还未创建。

4. mounted()：

   • DOM操作：由于此时$el已经创建，可以执行依赖于挂载元素的操作。
   • 执行与DOM相关的JavaScript代码：例如，使用this.$nextTick来确保在数据变化之后进行DOM操作。
   • 第三方库集成：可以在这里初始化一些需要访问DOM的第三方库。
   • 网络请求，和服务器进行交互，更新dom。

5. beforeUpdate()：

   • 状态更新前的准备：在数据更新之前，可以进行一些状态的准备工作，比如取消某些副作用。

6. updated()：

   • 响应数据变化：可以对数据变化做出响应，比如更新图表、重新计算布局等。
   • 执行依赖于更新后数据的操作：如根据新数据重新获取内容或重新请求数据。

7. beforeDestroy()：

   • 清理工作：取消计时器、移除自定义事件监听器、API请求的取消等，以避免内存泄漏。

8. destroyed()：

   • 彻底清理：释放资源，如移除自定义指令、销毁子组件等。

9. activated() 和 deactivated()：

   • 这两个钩子主要用于<keep-alive>缓存的组件，可以用来管理组件的激活状态相关的逻辑。

10. errorCaptured(err, vm, info)：

    • 错误处理：捕获并处理组件树中任何组件的错误。

vue2.0生命周期代码实践

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function () {
    //数据监听(data observer) 和 event/watcher 事件。
    console.log('beforeCreate: 实例完全被创建出来之前')
  },
  created: function () {
    //修改data等初始化的数据
    console.log('created: 实例创建完成')
  },
  beforeMount: function () {
    //在挂载开始之前被调用：相关的 render 函数首次被调用。
    console.log('beforeMount: 模板已经在内存中编译完成，但还没挂载到DOM上')
  },
  mounted: function () {
    //网络请求和服务器进行交互
    console.log('mounted: 模板已经挂载到DOM上')
  },
  beforeUpdate: function () {
    //数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程
    console.log('beforeUpdate: 数据更新时调用，但DOM还未更新')
  },
  updated: function () {
    //由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    //当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情 
    //况下，你应该避免在此期间更改状态，
    //因为这可能会导致更新无限循环。
    //该钩子在服务器端渲染期间不被调用。
    console.log('updated: 数据更新并且DOM已经更新完成后调用')
  },
  beforeDestroy: function () {
    //实例销毁之前调用。在这一步，实例仍然完全可用。
    console.log('beforeDestroy: 实例销毁之前调用')
  },
  destroyed: function () {
    //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所 
    //有的子实例也会被销毁。
    //该钩子在服务器端渲染期间不被调用。
    console.log('destroyed: Vue 实例销毁后调用')
  }
})

在vue2.0实际开发中，选择在哪个生命周期钩子中执行代码取决于具体的业务需求。例如，如果你需要在组件加载之后立即获取数据，那么mounted()是一个合适的选择。如果你需要在数据变化之前执行一些逻辑，那么beforeUpdate()可能更适合。正确地使用生命周期钩子可以提高应用的性能和响应性。

       

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~