前端vue生命周期见解

先放上官方文档的链接

API — Vue.js (vuejs.org)

就我自己来说的话,总结一句话就是vue从创建到销毁的过程,会执行的回调函数.

再详细说一下vue钩子的类别

vue的生命周期钩子分为4个阶段,8个方法.

1.初始阶段：

beforeCreate() {
  /*vue实例创建了，但是el(挂载点)和data(数据)还没有创建 （准备创建data）                                      
  底层原理（初始化vue实例，初始化钩子函数，初始化一些事件和侦听器配置项）*/
 },
 
 created() {
  /*data数据创建了，但是el(挂载点)还没有创建 (准备创建el)                                                
  底层原理：初始化data中的数据和methods中的方法*/ 
  //应用:常用于页面发生ajax请求.
 }

2.挂载阶段：

beforeMount() {
  /*el挂载点创建了，但是data数据还没有渲染（准备渲染中）                                          
  底层：创建el挂载点，并且生成虚拟DOM*/
  },
  
  mounted() {
    /*data数据 第一次 渲染完毕 (完成初始渲染)                                                                               
    底层：将虚拟dom渲染成真实DOM*/
  }

3.更新阶段：

beforeUpdate() {
   /*检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中) `会执行多次*/
  },
  
  updated() {
   /*变化后的data数据 ，完成渲染到页面 （完成重新渲染）`会执行多次*/
   //应用:最早可以操作页面dom元素的钩子
  }

4.销毁阶段

  beforeDestroy() {
    /*vue实例销毁即将销毁(解除data与el的关联),之后修改data，页面不会被渲染     
     底层 ： 解除 事件绑定、侦听器、组件8`destroyed() {}`vue实例已经销毁*/
    // 应用:如页面有setInterval定时器,则移除
   
  },
  
  destroyed() {
    /*vue实例已经销毁*/
  }

上面就是钩子的4个阶段,与8个方法的简单的介绍了.

再借用官方的一句话

所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例，并且this.fetchTodos 将会是 undefined。

所以生命周期钩子不能使用箭头函数.

再把官方的流程图发出来看一下