vue生命周期的详细说明

在vue源代码中,生命周期函数的最终执行是调用callHook方法。callHook函数的逻辑非常简单。根据传入的生命周期类型钩子,获取vm对应的回调函数数组。$options[hook],然后遍历执行,以vm作为函数执行的上下文。

1.新建Vue(选项):创建一个vm实例;

2.合并选项(解析构造函数(VM。Constructor)、options、VM):将Vue构造函数中的选项与传入选项合并,或者将父项和子项的选项合并。例如,在mergeOptions函数中,将调用mergeHook方法来合并生命周期的Hook函数。mergeHook方法的原则是只有当它是父数组时才返回父数组,只有当它是子数组时才返回子数组。当父元素和子元素都存在时,在父元素后添加子元素以返回组合数组。这也是为什么父子都有钩子函数时,先执行父亲,再执行人;

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

4.callHook(vm,' beforeCreate '):在Create之前调用生命周期钩子函数;

5.initInjections(vm)、initState(vm)和initProvide(vm):初始化数据:注入、声明和提供。initState的作用是初始化props、data、methods、watch、computed等属性;

6.callHook(vm,' created '):调用创建的生命周期钩子函数;

7.VM。$ mount (VM。$ options . El):$ mount方法在多个文件中定义,如“src/platform/web/entry-runtime-with-compiler . js”、“src/platform/web/runtime/index . js”、“src/platform/week/。因为$mount方法的实现与平台和构造模式有关。以“entry-runtime-with-compiler.js”为例,关键步骤是检查vm中是否有render方法。$options,如果没有,最终的模板字符串将根据el和template属性来确定。然后调用compileToFunctions方法将模板字符串转换成render方法,最后在原原型上调用$mount方法,即开始执行“lifecycle.js”中的mountComponent方法;

8.callHook(vm,' beforeMount '):调用beforeMount生命周期钩子函数;

9.vm。_ render()= & gt;vm。_ update()= & gt;Vm。__patch__():执行虚拟机。_render方法第一,就是调用createElement生成虚拟DOM,也就是VNode,每个VNode都有子节点,子节点的每个元素也是?一个VNode,这是怎么形成的?vnodetree然后调用虚拟机。_更新第一次渲染的方法。虚拟机的核心。_update方法是调用vm。补丁方法,和vm一样与平台相关。$mount。虚拟机。patch方法是根据生成的VNode树递归createElm方法创建一棵真实的Dom树并挂载到Dom上。

10.callHook(vm,' mount '):调用挂载生命周期钩子函数:VNode补丁到Dom后,会执行' invokeInsertHook '函数,再次执行保存在insertedVnodeQueue中的挂载钩子函数。insertedVnodeQueue队列中的钩子函数是在根据VNode Tree递归createElm方法创建真实Dom树的过程中生成的钩子函数的顺序队列,所以挂载的钩子函数的执行顺序是先子后父;

11.数据变更:数据更新,在nextTick中执行flushSchedulerQueue方法,将执行watcher队列中的watcher;

12.Callhook (VM,' beforeUpdate '):执行watcher时,会执行watcher的Before方法,即调用BeforeUpdate生命周期钩子函数;

13.虚拟DOM重渲染和修补:重渲染生成新的虚拟DOM,并将其修补到DOM上;

14.callHook(vm,' updated '):调用更新的生命周期钩子函数;

15.vm。$destroy():启动卸载和销毁过程;

16.Callhook (VM,' beforeDestroy '):调用before destroy的生命周期钩子函数;

17.拆卸观察器、子组件和事件监听器:执行一系列销毁操作。在执行$destroy期间,它将执行vm。__patch__(虚拟机。_vnode,null)来触发其子组件的销毁钩子函数,逐层递归调用。因此,销毁的钩子函数的执行顺序是先子后父。

18.Callhook (VM,' destroyed '):调用销毁的生命周期钩子函数。