美文网首页VUE学习To Do List
VUE学习----vue生命周期

VUE学习----vue生命周期

作者: 扮猪老虎吃 | 来源:发表于2020-10-31 09:30 被阅读0次

生命周期

从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!

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

主要的生命周期函数分类:
  • 创建期间的生命周期函数:
    • beforeCreate
        实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
    • created
        实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板
    • beforeMount
        此时已经完成了模板的编译,但是还没有挂载到页面中
    • mounted
        此时,已经将编译好的模板,挂载到了页面指定的容器中显示
  • 运行期间的生命周期函数:
    • beforeUpdate
        状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
    • updated
        实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
  • 销毁期间的生命周期函数:
    • beforeDestroy
        实例销毁之前调用。在这一步,实例仍然完全可用。
    • destroyed:
        Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。


      vue生命周期.png

相关文章

  • vue生命周期

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

  • vue生命周期

    vue生命周期详: vue生命周期详解图: vue生命周期详解代码展示:

  • vue生命周期图(探究源码之路)

    学习主线:从vue2生命周期图出发,找出背后的源码实现,来探索vue成长之路! [TOC] 生命周期图 vue2....

  • vue生命周期

    学习vue的生命周期 什么是生命周期函数? vue的生命周期函数(又称为钩子函数)是一个vue实例从开始创建,到初...

  • Vue生命周期

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

  • vue3较vue2的特别之处 - 生命周期

    vue2 生命周期 vue3 生命周期 将 Vue2 的生命周期钩子代码更新到 Vue3 参考地址:https:/...

  • vuejs - (v-for、v-model、$event)-

    系统学习vuejs中的生命周期、循环性能、自定义组件思想、vue-cli、vue-loader(*.vue)...

  • vue生命周期

    vue1--》 一 vue的生命周期如下图所示 二 vue生命周期的例子 注意触发vue的created事件以后,...

  • Vue—钩子

    vue的生命周期: 在new vue()创建一个vue实例后,先初始化vue本身默认的生命周期和事件,此时vue的...

  • vue学习记录

    vue全家桶 vue生命周期 生命周期的理解 新建项目 ①:cnpm install vue-cli -g (全...

网友评论

    本文标题:VUE学习----vue生命周期

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