前言：

最近工作上没怎么碰Vue，但新接手的项目里频繁用到了Vue的生命周期钩子，感觉有点儿生疏了。所以，我想借此机会仔细回顾一下Vue中那些重要的生命周期钩子函数，确保自己能熟练运用，提升开发效率和代码质量。毕竟，在Vue开发中，正确利用生命周期钩子处理组件的不同阶段是非常关键的。

函数的介绍：

Vue.js 的生命周期钩子函数允许你在组件的特定阶段执行代码：

beforeCreate():

此阶段发生在Vue实例刚被创建，数据观测(data observer) 和 event/watcher 事件配置之前。这时，我们不能访问到数据、computed 属性、methods等实例属性，适合做一些初始化的设置。

Created():

这个阶段的实例已经创建完成，数据观测和event/watch事件配置也已完成，但操作还没有载到DOM上。在这个阶段，我们可以访问到data、computed等属性，并且可以修改它们。此阶段适合进行数据请求、初始化设置等操作。

beforeMount():

这个阶段在完成响应式数据创建完成后，挂载到DOM之前被调用。这里虽然还没有真实的DOM，但是render函数已经被执行，数据即将被挂载在DOM树上，页面也将开始渲染，适合做最后一次数据修改。

Mountd():

这个阶段组件已经被挂载到DOM树中，同时页面也已经渲染完成，这时可以通过this.$el访问到DOM元素。适合进行DOM操作、初始化插件、获取DOM节点信息等。

beforeUpdate():

这个阶段用户进行DOM操作，将数据进行更改前，数据变化导致虚拟DOM重新渲染和打补丁之前调用。在这个阶段，我们可以访问现有的DOM元素，但下一个虚拟DOM树还未生成，适合在更新前对现有DOM进行一些清理操作。

Updated():

这个阶段已完成用户的DOM操作，使得数据更新，可以在这个阶段对用户进行的操作来监视修改的数据。

beforeDestroy：

Vue实例销毁之前调用。在这一步，实例仍然完全可用，可以做一些清理工作，如取消定时器、解绑全局事件等。

destroyed:

Vue实例已被销毁，所有的子实例和监听器也被移除，此时组件已经完全被卸载，相应的DOM节点也已经被删除。这个阶段通常用于释放外部资源，比如清除缓存、断开WebSocket连接等。

而在这之中只要Vue实例没有被销毁，且用户继续与应用交互或有异步数据更新等情况发生，Vue的响应式机制会持续监控数据变化，并在每次数据变化后自动执行更新DOM的过程。这意味着组件会周期性地从beforeUpdate进入updated阶段，这个过程可以形象地描述为在这两个钩子函数之间"循环"，直到应用生命周期结束或遇到特定停止条件（如组件卸载）。

为了大家更好理解，上图：

timeline title hook function运行过程和作用 beforeCreate : 初始化状态 created : 实例已经创建完成 beforeMount: 模板编译完成，即将挂载到DOM上 mounted: 实例已挂载到DOM，完成了首次数据渲染 beforeUpdate: 执行更新前的准备工作 updated: 可以执行依赖于DOM的操作 beforeDestory: 清理工作，如解绑事件、取消网络请求等 destoryed: 最终的清理工作，释放资源

实验实例：

虽然这些方法是可以直接调用，但是实际上，Vue的生命周期钩子函数并不是直接挂载在Vue构造函数上供你随意调用的。这些钩子函数需要在组件的定义中声明，Vue会在组件实例生命周期的相应阶段自动调用它们。

由于beforeUpdate()和Updated()需要添加DOM操作，所以这里我们先实验前四个阶段：

xml 复制代码

 <div class="hook"></div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app=new Vue({
      el:'.hook',
      data:{
        msg:'hello world'
      },
      beforeCreate(){
        console.log('1.beforCreate,响应式数据准备前');
        console.log('-----------------------------');
      },
      created(){
        console.log('2.beforCreate,响应式数据准备之后');
        console.log('-----------------------------');
      },
      beforeMount(){
        console.log('3.beforMounte,挂载前');
        console.log('-----------------------------');
      },
      mounted(){
        console.log('4.beforMounte,挂载后');
        console.log('-----------------------------');
      },

返回结果：

接下来我们再实验beforeUpdate()和Updated():

xml 复制代码

  <div class="hook">
    <button @click="increment()">+</button>
    {{count}}
    <button @click="decrement()">-</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
  const app = new Vue({
    el: '.hook',
    data: {
      count: 10 
    },
    methods: {
      increment() {
        this.count++; 
      },
      decrement() {
        this.count--; 
      }
    },
    beforeUpdate(){
      console.log('2.beforCreate,DOM操作前');
      console.log('-----------------------------');
    },
    updated(){
      console.log('3.beforCreate,DOM操作后');
      console.log('-----------------------------');
    }
    })

在进行加减操作时：

由于销毁Vue实例一般会伴随着玩也的关闭，因此Vue中为我们提供了一个语法：

app.$destroy()

Vue实例被销毁完成后，当然就是undefine这个好理解对吧。实例都销毁了你怎么获取实例对象中的属性，这个undefine就类似去对象身上找一个没有的属性，也会是undefine,并不会是null。

实际开发中的应用：

1.从后台获取数据。 在created()阶段用于初始化那些不需要依赖DOM的操作，比如从服务器获取数据、设置初始状态等。

csharp 复制代码

const app=new Vue({
el:'#app',
data:{
    list:[]
},
async created(){
//发送请求，获取数据
    const res=await axios.get('url')
//将获取到的数据新给data中的list
    this.list=res.data.data
}
})

2.让搜索栏光标自动或焦 利用mounted自动聚焦输入框，提升用户体验。

javascript 复制代码

    mounted(){
      document.querySelector('#inp').focus()
    }

3.资源管理和清理 在**beforeDestroy()** : 在组件销毁前做一些清理工作，比如清除定时器、取消网络请求、解绑事件监听器等。

javascript 复制代码

beforeDestroy() {
  clearInterval(this.intervalId); // 清除定时器
  this.$bus.$off('event-name'); // 移除全局事件监听
}

总之，Vue的生命周期钩子设计旨在帮助开发者更好地组织代码逻辑，提高应用的可维护性和性能，是构建高质量前端应用不可或缺的一部分。在Vue实例结束并销毁时，确保正确地清理和释放资源是一项重要的最佳实践。这不仅有助于避免内存泄漏，还能提升应用的整体性能和用户体验。

生命周期八大钩子函数（hook function）详解

前言：

函数的介绍：

实验实例：

实际开发中的应用：