美文网首页
Vue每个生命周期做了什么

Vue每个生命周期做了什么

作者: sc8816 | 来源:发表于2021-08-05 17:56 被阅读0次
  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每个生命周期做了什么

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

  • vue生命周期

    vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么?...

  • Vue 生命周期

    vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么?...

  • vue实例对象--的生命周期

    创建vue基本操作 执行这段代码时vue到底做了什么 什么是生命周期 什么是生命周期钩子 生命周期函数 befor...

  • Vue生命周期

    Vue生命周期详解 一、Vue生命周期 与 作用 (生命周期钩子就是生命周期函数) (1)Vue生命周期:每个Vu...

  • Vue生命周期详解

    什么是Vue的生命周期 先看一看官方文档对Vue生命周期的说明: 每个 Vue 实例在被创建时都要经过一系列的初始...

  • 2020-08-04

    一、vue的生命周期是什么 vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化...

  • 2021-02-24

    vue合集 1.new vue做了些什么 init和$mount: init 主要是合并配置,初始化生命周期,初始...

  • vue

    一、 vue 有多少个生命周期,每个作用是什么? demo | 二、 vue路由有多少个钩子,每个作用是什么? 1...

  • 2021-12-10vue面试题整理

    v-if会触发父子组件那些生命周期 vue都有哪些生命周期,都做了什么? vuex如何实现action异步操作?v...

网友评论

      本文标题:Vue每个生命周期做了什么

      本文链接:https://www.haomeiwen.com/subject/nztvvltx.html