前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >请阐述vue生命周期

请阐述vue生命周期

作者头像
程序员法医
发布2022-08-11 16:08:25
2700
发布2022-08-11 16:08:25
举报
文章被收录于专栏:vue全家桶vue全家桶

📌 new Vue之后,发生了什么?数据改变后,又发生了什么?

  • 创建vue实例和创建组件的流程基本一样
  1. 首先做一些初始化的操作,主要是设置一些私有属性到实例中,例如:_开头的的属性以及$开头的属性
  2. 「运行声明周期钩子函数beforCreate
  3. 进入注入流程:处理属性、computed、methods、data、provide、inject,最后使用代理模式将它们挂载到实例中
  4. 「运行生命周期钩子函数created」
  5. 生成render函数:如果有配置,直接使用配置的render,如果没有,使用运行时编译器,把模板编译为render
  6. 「运行生命周期钩子函数beforMount
  7. 生成真实dom,关于如何生成真实dom,详细过程可以瞅瞅我的上一篇文章:请阐述vue的diff算法,它会创建一个Watcher进行观察,传入一个函数updateComponent,该函数会运行_render,得到当前组件虚拟dom的根节点(vnode),然后把得到vnode再传入_updata函数执行。 在执行_render函数的过程中,会收集所有依赖,将来依赖变化时会重新运行updataComonent函数 在执行_update函数的过程中,触发patch函数,如果当前没有旧树,说明这是第一次渲染,它会直接为当前的虚拟dom树的每一个普通节点生成elm属性,也就是真实dom。如果存在旧树,说明之前已经渲染过了,然后会触发patch函数,进行新旧两棵树对比更新处理,随后让新树的节点对应合适的真实dom,这里就先假设它是第一次渲染。 如果遇到创建一个组件的vnode,那么它会进入组件实例化流程,这个流程和创建vue实例流程基本相同,也就是相当于递归循环以上步骤,最终会把创建好的组件实例挂载vnode的componentInstance属性中,方便复用。 这一步完成后,页面上已经可以看到东西了。
  8. 「运行生命周期钩子函数mounted
  • 重渲染
  1. 数据变化后,所有依赖该数据的Watcher都会重新运行,这里只考虑updateComponent函数对应的Watcher
  2. Watcher会被调度器放到nextTick中运行,也就是微队列中,这样是为了避免多个依赖的数据同时改变后被多次执行。
  3. 「运行生命周期钩子函数beforeUpdate
  4. updateComponent函数重新执行 在执行_render函数的过程中,会去掉之前的依赖,毕竟也要考虑v-if的感受,重新收集所有依赖,将来依赖变化时会重新运行updateCompontent函数 在执行_updata函数的过程中,触发patch函数,然后新旧两棵树进行对比: 当新组件需要被创建时,进入实例化流程,从第一条再走一遍流程就可以了 当旧组件需要被删除时,会调用组件的$destroy方法,然后触发生命周期钩子函数destroyed 当组件属性更新时,相当于组件的updataComponent函数被重新触发执行,进入重渲染流程,走一遍重渲染流程就行了
    • 普通html节点的对比会导致真实节点被创建、删除、移动、更新
    • 组件节点的对比同样会导致组件被创建、删除、移动、更新
  5. 「运行生命周期钩子函数updated

😊 好了, 以上就是我的分享,大家对于vue生命周期还有其它理解的话可以在评论区讨论鸭~

希望小伙伴们点赞 👍 支持一下哦~ 😘,我会更有动力的 🤞

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-05-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端猎手 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 📌 new Vue之后,发生了什么?数据改变后,又发生了什么?
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档