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生命周期还有其它了解的话能够在评论区探讨鸭～

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