学习vue源码（16）初探生命周期之各阶段都在干嘛，2024必看

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钩子，则它们将会被相同的错误逐个唤起。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-ZA9KGNoX-1711854753668)]

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】