当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. m o u n t ( v m . mount(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方法，进入后面的生命周期阶段。
（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);
}
扫一扫
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
