学习vue源码(16)初探生命周期之各阶段都在干嘛

564 阅读7分钟

一、概述

每个Vue.js实例在创建时都要经过一系列初始化,例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。

同时,也会运行一些叫作生命周期钩子的函数,给在不同阶段添加自定义代码的机会。

二、生命周期

Vue.js生命周期可以分为4个阶段:初始化阶段、模板编译阶段、挂载阶段、卸载阶段。

初始化阶段

new Vue()到created之间的阶段叫作初始化阶段。

这个阶段的主要目的是在Vue.js实例上初始化一些属性、事件以及响应式数据,如props、methods、data、computed、watch、provide和inject等。

模板编译阶段

在created钩子函数与beforeMount钩子函数之间的阶段是模板编译阶段。

这个阶段的主要目的是将模板编译为渲染函数,只存在于完整版中。如果在只包含运行时的构建版本中执行new Vue(),则不会存在这个阶段。

当使用vue-loader或vueify时,*.vue文件内部的模板会在构建时预编译成Javascript,所以最终打好的包里是不需要编译器的,用运行时版本即可。由于模板这时已经预编译成了渲染函数,所以在生命周期中并不存在模板编译阶段,初始化阶段的下一个生命周期直接是挂载阶段。

挂载阶段

beforeMount钩子函数到mounted钩子函数之间的是挂载阶段。

在这个阶段,Vue.js会将其实例挂载到DOM元素上,通俗地讲,就是讲模板渲染到指定的DOM元素中。

在挂载的过程中,Vue.js会开启Watcher来持续追踪依赖的变化。

在已挂载状态下,Vue.js仍会持续追踪状态的变化。当数据(状态)发生变化时,Watcher会通知虚拟DOM重新渲染视图,并且会在渲染视图前出发beforeUpdate钩子函数,渲染完毕后触发updated钩子函数。

通常,在运行时的大部分时间下,Vue.js处于已挂载状态,每当状态发生变化时,Vue.js都会通知组件使用虚拟DOM重新渲染,也就是常说的响应式。这个状态会持续到组件被销毁。

卸载阶段

应用调用vm.$destroy方法后,Vue.js的生命周期会进入卸载阶段。

**vm.$destroy**我们在上一篇文章中实现过:学习vue源码(15)手写destroy方法

在这个阶段,Vue.js会将自身从父组件中删除,取消实例上所有依赖的追踪并且移除所有的事件监听器。

小结

生命周期可以在整体上分为两部分

1、第一部分是初始化阶段、模板编译阶段与挂载阶段。

2、第二部分是卸载阶段。

三、从源码角度了解生命周期

卸载阶段的内部原理就是vm.$destroy方法的内部原理。模板编译阶段和挂载阶段(mount)的原理已述过,见前面文章。现在主要介绍初始化阶段的内部原理。

new Vue()被调用时发生了什么

当new Vue()被调用时,会首先进行一些初始化操作,然后进入模板编译阶段,最后进入挂载阶段。

function Vue(optipons){
 if(process.env.NODE_ENV !== 'production'&&
  !(this instanceof Vue)
 ){
  warn('Vue is a constructor and should be called with the 'new' keyword')
 }
 this._init(options);
}
export default Vue;

1、首先进行安全检查。在非生产环境下,如果没有使用new调用Vue,则会在控制台抛出错误警告:Vue是构造函数,应该使用new关键字来调用。

2、然后调用this._init(options)来执行生命周期的初始化流程。即生命周期的初始化流程在this._init中实现。

四、_init方法的定义

(1)Vue.js通过调用initMixin方法将_init挂载到Vue构造函数的原型上。

import { initMinxin }  from './init'
function Vue(optipons){
 if(process.env.NODE_ENV !== 'production'&&
  !(this instanceof Vue)
 ){
  warn('Vue is a constructor and should be called with the 'new' keyword')
 }
 this._init(options);
}
initMinxin(Vue);
export default Vue;

(2)将init.js文件导出的initMixin函数导入后,通过调用initMixin函数向Vue构造函数的原型中挂载一些方法。

export function initMixin(Vue){
 Vue.prototype._init = function(options){
  <!-- 做些什么 -->
 }
}

在Vue构造函数的prototype属性上添加了一个_init方法。即_init方法方法的定义与前面介绍的Vue.js实例方法的挂载方式是相同的。

五、_init方法的内部原理

当new Vue()执行后,触发的一系列初始化流程都是在_init方法中启动的。

(1)实现

Vue.prototype._init = function(options){
 vm.$options = mergeOptions(
  resolveConstructorOptions(vm.constructor),
  options || {},
  vm
 )
 
 initLifecycle(vm);
 initEvents(vm);
 initRender(vm);
 callHook(VM,'beforeCreate');
 initInjections(vm);//在data/props前初始化inject
 initState(vm);
 initProvide(vm);//在data/props前初始化provide
 callHook(vm,'created');
 
 //如果用户在实例化Vue.js时传递了el选项,则自动开启模板编译阶段与挂载阶段
 //如果没有传递el选项,则不进入下一个生命周期流程
 //用户需要执行vm.$mount方法,手动开启模板编译阶段与挂载阶段
 
 if(vm.$options.el){
  vm.$mount(vm.$options.el);
 }
}

1、Vue.js会在初始化流程的不同时期通过callHook函数触发生命周期钩子。

2、在执行初始化流程之前,实例上挂载了$options属性。目的是将用户传递的options选项与当前构造函数的options属性及其父级实例构造函数的options属性,合并生成一个新的options并赋值给$options属性。

3、resolveConstructorOptions函数的作用就是获取当前实例中构造函数的options选项及其所有父级的构造函数的options。之所以会有父级,是因为当前Vue.js实例可能是一个子组件,它的父组件就是它的父级。

4、在生命周期钩子beforeCreate被触发之前执行了initLifecycle、initEvents和initRender。

5、在初始化的过程中,首先初始化事件与属性,然后触发生命周期钩子beforeCreate。

6、随后初始化provide/inject和状态,这里的状态指的是props、methods、data、computed以及watch。

7、解这触发生命周期钩子created

8、最后,判断用户是否在参数中提供了el选项,如果是,则调用vm.$mount方法,进入后面的生命周期阶段。

六、callHook函数的内部原理

(1)Vue.js通过callHook函数来触发生命周期钩子。

(2)callHook的作用是触发用户设置的生命周期钩子,而用户设置的生命周期钩子会在执行new Vue()时通过参数传递给Vue.js。也就是说,可以在Vue.js的构造函数中通过options参数得到用户设置的生命周期钩子。

(3)用户传入的options参数最终会与构造函数的options属性合并并生成新的options并赋值到vm.$options属性中,所以可以通过vm.$options得到用户设置的生命周期函数。例如,通过vm.$options.created得到用户设置的created钩子函数。

(4)Vue.js在合并options的过程中会找出options中所有key是钩子函数的名字,并将它转换成数组。

(5)所有生命周期钩子的函数名

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
activated
deactivated
errorCaptured

(6)通过vm.$options.created获取的是一个数组,数组中包含了钩子函数。

console.log(vm.$options.created)//[fn]

数组原因:可能存在多个钩子函数,例如mixin混入的和用户自己设置的。转换成数组后,可以在同一个生命周期钩子列表中保存多个生命周期钩子。

(7)实现原理

只需要从vm.$options中获取生命周期钩子列表,遍历列表,执行每一个生命周期钩子,就可以触发钩子函数。

export function callHook(vm,hook){
 const handlers = vm.$options[hook];
 if(handlers){
  for(let i = 0,j = handlers.length ; i<j;i++){
   try{
    handlers[i].call(vm);
   }catch(e){
    handleError(e,vm,'${hook}hook')
   }
 
  }
 }
}

1、callHook接收vm和hook两个参数,其中前者是Vue.js实例的this,后者是生命周期钩子的名称。

2、使用hook从vm.$options中获取钩子函数列表后赋值给handlers,随后遍历handlers,执行每一个钩子函数。

3、使用try...catch语句捕获钩子函数发生的错误,并使用handleError处理错误。handleError会依次执行父组件的errorCaptured钩子函数与全局的config.errorHandler,这也是为什么生命周期钩子errorCaptured可以捕获子孙组件的错误。

七、errorCaptured与错误处理

(1)作用

捕获来自子孙组件的错误,此钩子函数会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子函数可以返回false,阻止该错误继续向上传播。

(2)传播规则

默认情况下,如果全局的config.errorHandler被定义,那么所有的错误都会发送给它,这样这些错误可以在单个位置报告给分析服务。

如果一个组件继承的链路或其父级从属链路中存在多个errorCaptured钩子,则它们将会被相同的错误逐个唤起。

如果errorCaptured钩子函数自身抛出了一个错误,则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler。

一个errorCaptured钩子函数能够返回false来阻止错误继续向上传播。这本质上是说“这个错误已经被搞定,应该被忽略”。它会阻止其他被这个错误唤起的errorCaptured钩子函数和全局的config.errorHandler。

(3)errorCaptured钩子函数与Vue.js的错误处理有着千丝万缕的关系。Vue.js会捕获所有用户代码抛出的错误,然后使用一个名叫handleError的函数来处理这些错误。

(4)用户编写的所有函数都是Vue.js调用的,例如用户在代码中注册的事件、生命周期钩子、渲染函数、函数类型的data属性、vm.$watch的第一个参数(函数类型)、nextTick和指令等。

(5)而Vue.js在调用这些函数时,会使用try...catch语句来捕获有可能发生的错误。当错误发生并且被try...catch语句捕获后,Vue.js会使用handleError函数来处理错误,该函数会依次触发父组件链路上的每一个父组件中定义的errorCaptured钩子函数。如果全局的config.errorHandler被定义,那么所有的错误也会同时发送给config.errorHandler。也就是说,错误的传播规则是在handleError函数中实现的。

(6)handleError原理

将所有错误发送给config.errorHandler

export function handleError (err,vm,info){
 <!-- 这里的config.errorHandler就是Vue.config.errorHandler -->
 if(config.errorHandler){
  try{
   return config.errorHandler.call(null,err,vm,info);
  }catch(e){
   logError(e);
  }
 }
 logError(e);
}
function logError(err){
 console.log(err);
}

1、先判断Vue.config.errorHandler是否存在,如果存在,则调用它,并将错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串通过参数的方式传递给它,并且使用try...catch语句捕获错误

2、如果全局错误处理函数也发生错误,则在控制台打印其中抛出的错误。

3、不论用户是否使用Vue.config.errorHandler捕获错误,Vue.js都会将错误信息打印在控制台。

如果一个组件继承的链路或其父级从属链路中存在多个errorCaptured钩子函数,则它们将会被相同的错误逐个唤起。

export function handleError (err,vm,info){
 if(vm){
  let cur = vm;
  while((cur = cur.$parent)){
   const hooks = cur.$options.errorCaptured;
   if(hooks){
    for(let i = 0;i<hooks.length;i++){
     hooks[i].call(cur,err,vm,info);
    }
   }
  }
 }
 globalHandleError(err,vm,info);
}
 
function globalHandleError(err,vm,info){
 <!-- 这里的config.errorHandler就是Vue.config.errorHandler -->
 if(config.errorHandler){
  try{
   return config.errorHandler.call(null,err,vm,info);
  }catch(e){
   logError(e);
  }
 }
 logError(e);
}
function logError(err){
 console.log(err);
}

1、新增globalHandleError函数,将全局错误处理相关的代码放到这个函数中。

2、通过while语句自底向上不停地循环获取父组件,直到根组件。

3、在循环中,通过cur.$options.errorCaptured属性独出errorCaptured钩子函数列表,遍历钩子函数列表并依次执行列表中的每一个errorCaptured钩子函数。

如果errorCaptured钩子函数自身抛出了一个错误,那么这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler。

export function handleError (err,vm,info){
 if(vm){
  let cur = vm;
  while((cur = cur.$parent)){
   const hooks = cur.$options.errorCaptured;
   if(hooks){
    for(let i = 0;i<hooks.length;i++){
     try{
      hooks[i].call(cur,err,vm,info);
     }catch(e){
      globalHandleError(e,cur,"errorCaptured hook");
     }
     
    }
   }
  }
 }
 globalHandleError(err,vm,info);
}

1、只需要使用try...catch语句捕获钩子函数可能发生的错误,并通过执行globalHandleError将捕获到的错误发送给全局错误处理函数config.errorHandler即可。

2、因为这个错误是钩子函数自身抛出的新错误,所以不影响自底向上执行钩子函数的流程。而原有的错误则会在自底向上这个循环结束后,将错误传递给全局错误处理钩子函数。

一个errorCaptured钩子函数能够返回false来阻止错误继续向上传播 1、它会阻止其他被这个错误唤起的errorCaptured钩子函数和全局的config.errorHandler。


export function handleError (err,vm,info){
 if(vm){
  let cur = vm;
  while((cur = cur.$parent)){
   const hooks = cur.$options.errorCaptured;
   if(hooks){
    for(let i = 0;i<hooks.length;i++){
     try{
      const capture = hooks[i].call(cur,err,vm,info) === false;
      if(capture) return;
     }catch(e){
      globalHandleError(e,cur,"errorCaptured hook");
     }
     
    }
   }
  }
 }
 globalHandleError(err,vm,info);
}

2、使用capture保存钩子函数执行后的返回值,如果返回值false,则使用return语句停止程序继续执行。

3、其巧妙地地方在于代码中地逻辑是先自底向上传递错误,之后再执行globalHandleError将错误发送给全局错误处理钩子函数。所以只要再自底向上这个循环中地某一层执行了return语句,程序机会立即停止执行,从而是实现功能。因为一旦钩子函数返回了false,handleError函数将会执行return语句终止程序执行,所以错误向上传递和全局的config.errorHandler都会被停止。

本文使用 mdnice 排版