【VUE知识点】——Vue的生命周期

Vue的生命周期

   Vue实例有一个完整的生命周期：也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。简单来说，一个Vue实例从创建到销毁,称为这个Vue的生命周期。
官网给出的生命周期流程如图所示：

   根据上图可知在Vue从创建到销毁一共有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed八个生命周期钩子。（其实还有keep-alive缓存组件的钩子函数activated、deactivated）

beforeCreate()

顾名思义为Vue实例创建前调用的钩子函数。在这之前一般会做三件事情：

• initLifecycle()：初始化Vue的生命周期,主要为Vue实例中的属性设置默认值。例如：设置isMounted=false、isDestoryed=false、_isBeingDestoryed=false。

export function initLifecycle(vm: Component) {
   
  const options = vm.$options  // 之前合并的属性
  
  let parent = options.parent;
  if (parent && !options.abstract) {
    //  找到第一个非抽象父组件
    while (parent.$options.abstract && parent.$parent) {
   
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }
  
  vm.$parent = parent  // 找到后赋值
  vm.$root = parent ? parent.$root : vm  // 让每一个子组件的$root属性都是根组件
  
  vm.$children = []
  vm.$refs =