Vue每个生命周期做了什么

  1. new Vue()初始化我们内部的option配置生成vue的实例,执行init操作
    1.初始化生命周期、初始化事件、initRender等操作

  2. 执行beforeCreated

  3. 初始化依赖注入的,响应式的处理

    1. 初始化 inject
    2. 初始化 state
      1. 初始化 props
      2. 初始化 methods
      3. 初始化 data
      4. 初始化 computed
        5.初始化 watch
    3. 初始化 provide
  4. created完成 (data初始化完成,计算属性,watch/event事件回调完成,dom未挂载)

  5. 执行dom mounted 开始挂载组件到dom节点上

    1. 将我们传入的template 选项,或者 html 文本,通过一系列的编译生成 render 函数,中间过程如下:
      1. 编译我们的模板template,生成ast抽象语法树
      2. 优化ast,标记静态节点
      3. 根据ast生成render函数
  6. beforeMounted调用

       updateComponent = () => {
         vm._update(vm._render(), hydrating)
       }
    
    1. 执行我们生成的render函数 vm._update 方法则会对这个 vnode 进行 patch 操作,
      帮我们把 vnode 通过 createElm函数创建新节点并且渲染到 dom节点 中。
    2. 是由 响应式原理 的一个核心类 Watcher 负责执行这个函数,为什么要它来代理执行呢?
      因为我们需要在这段过程中去 观察 这个函数读取了哪些响应式数据,将来这些响应式数据更新的时候,
      我们需要重新执行 updateComponent 函数。
    3. 如果是更新后调用 updateComponent 函数的话,updateComponent 内部的
      patch 就不再是初始化时候的创建节点,而是对新旧 vnode 进行 diff,最小化的更新到 dom节点 上去。
      new Watcher(vm, updateComponent, noop, {
        before () {
          if (vm._isMounted) {
            callHook(vm, 'beforeUpdate')
          }
        }
      }, true /* isRenderWatcher */)
    
  7. mounted被调用完成

    1. beforeUpdate 数据更新时候调用, 当一个响应式属性被更新后,触发了 Watcher 的回调函数,
      也就是 vm._update(vm._render()),在更新之前,会先调用刚才在 before 属性上定义的函数,也就是
        callHook(vm, 'beforeUpdate')
    

    2.updated

vue生命周期.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 使用Vue在日常开发中会频繁接触和使用生命周期,在官方文档中是这么解释生命周期的: 每个 Vue 实例在被创...
    心_c2a2阅读 2,297评论 1 8
  • 因为最近我们组内有个分享主题,即vue2的源码学习分享,我们几个人分别分享几个不同部分,但是虽然我们的分工是每个人...
    阿go阅读 1,783评论 0 0
  • 使用Vue开发对于Vue生命周期的理解自然少不了,以前在面试时候也被问到过,当时也就只能回答出生命周期的几个钩子函...
    Mstian阅读 359评论 0 3
  • 学习主线:从vue2生命周期图出发,找出背后的源码实现,来探索vue成长之路! [TOC] 生命周期图 vue2....
    scrollHeart阅读 970评论 0 0
  • 1.vue基本生命周期 vue源码中最终执行生命周期函数都是调用callHook方法,callHook函数的逻辑很...
    WHU_GIS_LJ阅读 19,656评论 0 13