关于VUE的生命周期 以及多组件生命周期执行

流程如下vue源码中最终执行生命周期函数都是调用callHook方法,callHook函数的逻辑很简单,根据传入的生命周期类型 hook,去拿到 vm.$options[hook]对应的回调函数数组,然后遍历执行,执行的时候把 vm作为函数执行的上下文。new Vue(options):创建一个vm实例;mergeOptions(resolveConstructorOptions(vm.constructor), options, vm):合并Vue构造函数里options和传入的optio.
摘要由CSDN通过智能技术生成

在这里插入图片描述
流程如下
vue源码中最终执行生命周期函数都是调用callHook方法,callHook函数的逻辑很简单,根据传入的生命周期类型 hook,去拿到 vm.$options[hook]对应的回调函数数组,然后遍历执行,执行的时候把 vm作为函数执行的上下文。

  1. new Vue(options):创建一个vm实例;

  2. mergeOptions(resolveConstructorOptions(vm.constructor), options, vm):合并Vue构造函数里options和传入的options或合并父子的options。比如:在mergeOptions函数中会调用mergeHook方法合并生命周期的钩子函数,mergeHook方法原理是只有父时返回父,只有子时返回数组类型的子。父、子都存在时,将子添加在父的后面返回组合而成的数组。这也是父子均有钩子函数的时候,先执行父的后执行子的的原因;

  3. initLifecycle(vm)、initEvents(vm)、initRender(vm):在创建的vm实例上初始化生命周期、事件、渲染相关的属性;

  4. callHook(vm, ‘beforeCreate’):调用beforeCreate生命周期钩子函数;

  5. initInjections(vm)、initState(vm)、initProvide(vm):初始化数据:inject、state、provide。initState 的作用是初始化 props、data、methods、watch、computed 等属性;

  6. callHook(vm, ‘created’):调用created生命周期钩子函数;

  7. vm. m o u n t ( v m . mount(vm. mount(vm.options.el): mount方法在多个文件中都有定义,如"src/platform/web/entry-runtime-with-compiler.js"、“src/platform/web/runtime/index.js”、“src/platform/weex/runtime/index.js”。因为mount方法的实现是和平台、构建方式相关的。以"entry-runtime-with-compiler.js"为例,关键步骤是查看vm. o p t i o n s 中 是

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值