关于前端:请阐述vue生命周期

📌 new Vue 之后，产生了什么？数据扭转后，又产生了什么？

• 创立 vue 实例和创立组件的流程根本一样

1. 首先做一些初始化的操作，次要是设置一些公有属性到实例中，例如：_结尾 的的属性以及 $ 结尾 的属性
2. 运行申明周期钩子函数beforCreate
3. 进入注入流程：解决属性、computed、methods、data、provide、inject，最初应用代理模式将它们挂载到实例中
4. 运行生命周期钩子函数 created
5. 生成 render 函数：如果有配置，间接应用配置的 render，如果没有，应用运行时编译器，把模板编译为 render

1. 运行生命周期钩子函数beforMount

2. 生成实在 dom，对于如何生成实在 dom，具体过程能够瞅瞅我的上一篇文章：请论述 vue 的 diff 算法，它会创立一个 Watcher 进行察看，传入一个函数 updateComponent， 该函数会运行 _render，失去以后组件虚构 dom 的根节点（vnode），而后把失去 vnode 再传入_updata 函数执行。

   在执行 _render 函数的过程中，会收集所有依赖，未来依赖变动时会从新运行 updataComonent 函数

   在执行 _update 函数的过程中，触发 patch 函数，如果以后没有旧树，阐明这是第一次渲染，它会间接为以后的虚构 dom 树的每一个一般节点生成 elm 属性，也就是实在 dom。如果存在旧树，阐明之前曾经渲染过了，而后会触发 patch 函数，进行新旧两棵树比照更新解决，随后让新树的节点对应适合的实在 dom，这里就先假如它是第一次渲染。

   如果遇到创立一个组件的 vnode，那么它会进入组件实例化流程，这个流程和创立 vue 实例流程基本相同，也就是相当于递归循环以上步骤，最终会把创立好的组件实例挂载 vnode 的 componentInstance 属性中，不便复用。

   这一步实现后，页面上曾经能够看到货色了。

3. 运行生命周期钩子函数mounted

• 重渲染

1. 数据变动后，所有依赖该数据的 Watcher 都会从新运行，这里只思考 updateComponent 函数对应的Watcher
2. Watcher会被调度器放到 nextTick 中运行，也就是微队列中，这样是为了防止多个依赖的数据同时扭转后被屡次执行。
3. 运行生命周期钩子函数beforeUpdate

4. updateComponent函数从新执行

   在执行_render 函数的过程中，会去掉之前的依赖，毕竟也要思考 v-if 的感触，从新收集所有依赖，未来依赖变动时会从新运行 updateCompontent 函数

   在执行_updata 函数的过程中，触发 patch 函数，而后新旧两棵树进行比照：

   • 一般 html 节点 的比照会导致实在节点被创立、删除、挪动、更新
   • 组件 节点的比照同样会导致组件被创立、删除、挪动、更新

   当新组件须要 被创立 时，进入实例化流程，从第一条再走一遍流程就能够了

   当旧组件须要 被删除 时，会调用组件的 $destroy 办法，而后触发生命周期钩子函数destroyed

   当组件属性更新时，相当于组件的 updataComponent 函数被从新触发执行，进入重渲染流程，走一遍重渲染流程就行了

5. 运行生命周期钩子函数updated

😊 好了，以上就是我的分享，大家对于 vue 生命周期 还有其它了解的话能够在评论区探讨鸭～

心愿小伙伴们点赞 👍 反对一下哦～ 😘，我会更有能源的 🤞