首页 > 其他分享 >生命周期

生命周期

时间:2024-04-28 22:13:14浏览次数:10  
标签:生命周期 函数 render 钩子 updateComponent 组件

  1. 创建vue实例和创建组件的流程基本一致
    1. 首先做一些初始化的操作,主要是设置一些私有属性到实例中

    2. 运行生命周期钩子函数****beforeCreate

    3. 进入注入流程:处理属性、computed、methods、data、provide、inject,最后使用代理模式将它们挂载到实例中

    4. 运行生命周期钩子函数****created

    5. 生成render函数:如果有配置,直接使用配置的render,如果没有,使用运行时编译器,把模板编译为render

    6. 运行生命周期钩子函数****beforeMount

    7. 创建一个Watcher,传入一个函数updateComponent,该函数会运行render,把得到的vnode再传入_update函数执行。

      在执行render函数的过程中,会收集所有依赖,将来依赖变化时会重新运行updateComponent函数

      在执行_update函数的过程中,触发patch函数,由于目前没有旧树,因此直接为当前的虚拟dom树的每一个普通节点生成elm属性,即真实dom。

      如果遇到创建一个组件的vnode,则会进入组件实例化流程,该流程和创建vue实例流程基本相同,最终会把创建好的组件实例挂载vnode的componentInstance属性中,以便复用。

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

  2. 重渲染?
    1. 数据变化后,所有依赖该数据的Watcher均会重新运行,这里仅考虑updateComponent函数对应的Watcher

    2. Watcher会被调度器放到nextTick中运行,也就是微队列中,这样是为了避免多个依赖的数据同时改变后被多次执行

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

    4. updateComponent函数重新执行

      在执行render函数的过程中,会去掉之前的依赖,重新收集所有依赖,将来依赖变化时会重新运行updateComponent函数

      在执行_update函数的过程中,触发patch函数。

      新旧两棵树进行对比。

      普通html节点的对比会导致真实节点被创建、删除、移动、更新

      组件节点的对比会导致组件被创建、删除、移动、更新

      当新组件需要创建时,进入实例化流程

      当旧组件需要删除时,会调用旧组件的$destroy方法删除组件,该方法会先触发生命周期钩子函数****beforeDestroy,然后递归调用子组件的$destroy方法,然后触发生命周期钩子函数****destroyed

      当组件属性更新时,相当于组件的updateComponent函数被重新触发执行,进入重渲染流程,和本节相同。

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

标签:生命周期,函数,render,钩子,updateComponent,组件
From: https://www.cnblogs.com/shmillly959/p/18164599

相关文章

  • vue之生命周期钩子
    一、简单理解生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们可以通过生命周期钩子函数,在特定的生命周期阶段执行特定的操作。二、常见的生命周期钩子1.beforeCreate:实例创建之初,此阶段仅有一......
  • 产品生命周期管理系统(PLM)
    产品生命周期管理系统(ProductLifecycleManagementSystem,简称PLM系统):一、定义产品生命周期管理系统是一种全面管理产品从概念到退役的整个生命周期的方法和框架。它涵盖了产品的设计、开发、制造、销售、服务和废弃等各个阶段,并通过系统化的流程和信息管理来提升企业的竞争力......
  • [Java]线程生命周期与线程通信
    【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)https://www.cnblogs.com/cnb-yuchen/p/18162522出自【进步*于辰的博客】线程生命周期与进程有诸多相似,所以我们很容易将两者关联理解并混淆,一些细节之处确有许多不同,因为线程调度与进程调度虽都由CPU完成,但两者并......
  • HarmonyOS 应用生命周期有哪些? 按返回键会调用哪些生命周期?
    UIAbility生命周期:onCreate:页面初始化,变量定义,资源加载。onWindowStageCreate:设置UI界面加载、设置WindowStage的事件订阅。onForeground:切换至前台,申请系统需要的资源,或者重新申请在onBackground()中释放的资源。onBackground:切换至后台,释放UI界面不可见时无用的资......
  • Tomcat生命周期管理
    一、生命周期统一接口Lifecycle:在自定义Mini-Tomcat之动态资源访问实现中已分析tomcat的两个功能,通过server.xml配置可以进行设置。下面看看Tomcat的实际的server.xml配置:从配置结构看,Tomcat内部架构中各个核心组件是包含于被包含的关系,往下层层......
  • springboot源码:容器启动过程(扩展业务对象、bean 生命周期)&动态注册自己的业务对象&
    0.SpringbootRun方法启动org.springframework.boot.SpringApplication#run(java.lang.String...)启动 publicConfigurableApplicationContextrun(String...args){ longstartTime=System.nanoTime(); DefaultBootstrapContextbootstrapContext=createBootstrap......
  • 这是一款全生命周期管理的工程企业项目管理平台
    合伙人1号,是一款集企业内部管理与项目全生命周期管理于一体的工程企业项目管理平台。整个平台采用Saas化云端部署,无需下载,账号即开即用。平台依据国家对于信息化建设若干指导意见,并融合企业管理、项目管理等相关体系认证要求,利用互联网、大数据等新一代信息技术,为工程企业提供数......
  • vue生命周期
    生命周期1是什么:Vue在关键时刻帮我们调研员的一些特殊名称的函数2生命周期的函数名字是不可更改3生命周期函数的this指向是vm或组件的实例对象mounted挂载Vue完成模版的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted页面中呈现的是经过Vue编译的DOM。对......
  • 记录:Flask 框架中,g对象的生命周期
    在Flask框架中,g对象是一个特殊的全局对象,它的设计目的是为了在不同的请求处理函数之间共享数据,但不需要将数据存储在session或数据库中。g对象的生命周期与当前的请求/响应周期紧密相关。以下是g对象生命周期的要点:创建:当一个请求到达Flask应用时,g对象会被创建并初始......
  • 微信小程序中生命周期钩子函数
    微信小程序App的生命周期钩子函数有以下7个:   onLaunch(options):当小程序初始化完成时,会触发onLaunch(全局只触发一次)。   onShow(options):当小程序启动或从后台进入前台显示时,会触发onShow。   onHide():当小程序从前台进入后台时,会触发onHide。   onError(......