总结
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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方法，进入后面的生命周期阶段。
（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可以捕获子孙组件的错误。
（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){
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){
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语句停止程序继续执行。
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
}
globalHandleError(err,vm,info);
}
2、使用capture保存钩子函数执行后的返回值，如果返回值false，则使用return语句停止程序继续执行。
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-iXqjAwHi-1715532362234)]
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
