vue生命周期 vue生命周期8个钩子函数

其实vue生命周期的问题并不复杂，但是又很多的朋友都不太了解vue生命周期8个钩子函数，因此呢，今天小编就来为大家分享vue生命周期的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

vue生命周期是多少

Vue的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

1、beforeCreate（创建前）

表示实例完全被创建出来之前，vue实例的挂载元素$el和数据对象 data都为 undefined，还未初始化。

2、created（创建后）

数据对象 data已存在，可以调用 methods中的方法，操作 data中的数据，但 dom未生成，$el未存在。

3、beforeMount（挂载前）

vue实例的$el和 data都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message未替换。

4、mounted（挂载后）

vue实例挂载完成，data.message成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted就表示，实例已经被完全创建好了，DOM渲染在 mounted中就已经完成了。

5、beforeUpdate（更新前）

当 data变化时，会触发beforeUpdate方法。data数据尚未和最新的数据保持同步。

6、updated（更新后）

当 data变化时，会触发 updated方法。页面和 data数据已经保持同步了。

7、beforeDestory（销毁前）

组件销毁之前调用，在这一步，实例仍然完全可用。

8、destoryed（销毁后）

组件销毁之后调用，对 data的改变不会再触发周期函数，vue实例已解除事件监听和 dom绑定，但 dom结构依然存在。

vue生命周期详解

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.$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.$options中是否有render方法，如果没有则会根据el和template属性确定最终的template字符串，再调用 compileToFunctions方法将template字符串转为render方法，最后，调用原先原型上的$mount方法，即开始执行"lifecycle.js"中 mountComponent方法；

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

9. vm._render()=> vm._update()=> vm.__patch__()：先执行vm._render方法，即调用createElement生成虚拟DOM，即VNode，每个VNode有children，children每个元素也是⼀个 VNode，这样就形成了⼀个 VNode Tree；再调用vm._update方法进行首次渲染，vm._update方法核心是调用vm. patch方法，这个方法跟vm.$mount一样跟平台相关；vm. patch方法则是根据生成的VNode Tree递归createElm方法创建真实Dom Tree挂载到Dom上；

10. callHook(vm,'mount')：调用mount生命周期钩子函数：VNode patch到 Dom之后会执行'invokeInsertHook'函数，把 insertedVnodeQueue中保存的mount钩子函数执行一遍，insertedVnodeQueue队列中的钩子函数是在根据VNode Tree递归createElm方法创建真实Dom Tree过程生成的钩子函数顺序队列，因此mounted钩子函数的执行顺序是先子后父；

11. data changes：数据更新，nextTick中执行 flushSchedulerQueue方法，该方法会执行watcher队列中的watcher；

12. callHook(vm,'beforeUpdate')：执行watcher时会执行watcher的before方法，即调用beforeUpdate生命周期钩子函数；

13. Virtual DOM re-render and patch：重新render生成新的Virtual DOM，并且patch到DOM上；

14. callHook(vm,'updated')：调用updated生命周期钩子函数；

15. vm.$destroy()：启动卸销毁过程；

16. callHook(vm,'beforeDestroy')：调用beforeDestroy生命周期钩子函数；

17. Teardown watchers, childcomponents and event listeners：执行一系列销毁动作，在$destroy的执行过程中，它又会执行 vm.__patch__(vm._vnode, null)触发它子组件的销毁钩子函数，这样一层层的递归调用，所以 destroyed钩子函数执行顺序是先子后父，和 mounted过程一样。

18. callHook(vm,'destroyed')：调用destroyed生命周期钩子函数。

vue生命周期是什么

Vue实例有一个完整的生命周期。

也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

vue生命周期功能总结：

beforecreate：可以在这加个loading事件。

created：在这结束loading，还做一些初始化，实现函数自执行。

mounted：在这发起后端请求，拿回数据，配合路由钩子做一些事情。

beforeDestory：确认删除vue实例。

destoryed：当前实例已被销毁，解绑相关指令和事件监听器。

vue生命周期和vue生命周期8个钩子函数的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！