美文网首页
vue实例的生命周期

vue实例的生命周期

作者: moofyu | 来源:发表于2020-03-15 14:44 被阅读0次
  • 生命是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期

  • 生命周期钩子 = 生命周期函数 = 生命周期事件

  • vue 生命周期图


    vue生命周期图
  • 主要的生命周期分类:

    • 创建期间的生命周期函数:
      beforeCreate:刚初始化了一个Vue空的实例对象,这个对象身上,只有默认的一些生命周期函数和默认的事件,datamethods还没有初始化
      createddatamethods已经初始化完成,此时还没有开始编译模板
      beforeMount: 此时已经完成了模板的编译,但是还没有挂载到页面中
      mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
    • 运行期间的生命周期函数: (data变化时执行)
      beforeUpdate:状态更新之前执行此函数,此时data中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有重新渲染DOM节点
      updated:实例更新完毕之后调用此函数,此时data中的状态值和界面上显示的数据都已经完成了更新,界面已经被重新渲染好了
    • 销毁期间的生命周期函数
      beforeDestroy:实例销毁之前调用,在这一步,实例任然完全可用,此时,还没有真正执行销毁的过程:
      destroyedVue实例销毁后调用,实例已经被完全被销毁,此时,组件中所有的数据、方法、指令等都已经不可用了

相关文章

  • Vue.js入门(二):生命周期

    1 生命周期 Vue生命周期是Vue实例从创建到销毁的过程,就是生命周期。在Vue实例的生命周期过程中会运行生命周...

  • vue学习第二课之vue的生命周期

    vue生命周期图解: vue实例的生命周期 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样...

  • vue生命周期

    一 vue生命周期 Vue的生命周期:就是vue实例从创建到销毁的全过程 二 vue生命周期钩子 vue生命周期...

  • 10、Vue_生命周期

    实例的生命周期 实例的生命周期图示(选项/生命周期钩子)实例生命周期 解释1.var v = new Vue{}:...

  • Vue生命周期

    vue生命周期 vue实例的创建到销毁的过程就是vue的生命周期,也就是实例创建-->初始化数据-->编译模板--...

  • 一、vue基础知识点

    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 实例生命周期钩子 每个 Vue 实例...

  • Vue

    Vue框架 一、Vue基础 添加Vue到网页(无需保存到本地) Vue生命周期 二、Vue 实例 创建Vue实例:...

  • VUE实例生命周期钩子

    1、vue实例生命周期钩子的由来 每个vue应用都是通过vue函数创建一个新的vue实例开始的: vue实例再被创...

  • 前端之路-VUE面试题

    vue生命周期面试题vue 生命周期是什么? Vue 实例从创建到销毁的过程,就是生命周期 beforeCreat...

  • 2.Vue实例生命周期

    Vue实例有一个完整的生命周期,顾名思义就是指Vue实例从创建到销毁的过程。下面将借助官网上的Vue实例生命周期示...

网友评论

      本文标题:vue实例的生命周期

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