美文网首页
VUE-5.Vue的生命周期

VUE-5.Vue的生命周期

作者: 笨灬蛋_a210 | 来源:发表于2020-11-12 10:50 被阅读0次

vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。

vue对象核心的四个阶段八个钩子函数:
  • 1)、数据挂载阶段 :把传入的data属性的内容,赋给vue对象。
    前后分别的钩子函数是:beforeCreate、created
  • 2)、模板渲染阶段:把vue对象中data渲染到dom对象上。
    前后分别的钩子函数是:beforeMount、mounted
  • 3)、组件更新阶段:当数据发生变化时,会触发组件的更新。
    前后分别的钩子函数是:beforeUpdate、updated
  • 4)、组件销毁阶段:
    前后分别的钩子函数是:beforeDestroy、destroyed
- 如果组件在<keep-alive></keep-alive>缓存的话,那么,组件切换时,会调用的钩子函数是:
  • activated 和 deactivated


    image.png
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'aaaa'
        },
        beforeCreate() {
            console.log('===beforeCreate===');
            console.log(this.msg);
        },
        created() {
            console.log('===created===');
            console.log(this.msg);
        },
        beforeMount() {
            console.log('===beforeMount===');
            console.log(this.msg);
        },
        mounted() {
            console.log('===mounted===');
            console.log(this.msg);
        },
        beforeUpdate() {
            console.log('===mounted===');
            console.log(this.msg);
        },
        updated() {
            console.log('===mounted===');
            console.log(this.msg);
        }
    })
</script>

相关文章

  • VUE-5.Vue的生命周期

    vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一...

  • Vue生命周期

    什么是生命周期方法?生命周期钩子=生命周期函数=生命周期事件 Vue生命周期方法分类  创建期间的生命周期方法: ...

  • 10,vue生命周期

    生命周期钩子=生命周期函数=生命周期事件 根据生命周期的不同分为三类: 创建阶段的生命周期 运行阶段的生命周期 销...

  • 微信小程序生命周期的记录

    小程序中生命周期分为3类: 应⽤的生命周期 页面的生命周期 组件的生命周期 一、生命周期 1. 应⽤的生命周期[h...

  • Lifecycle 生命周期源码解析

    目录: 什么生命周期 什么是生命周期感知型组件 Activity是如何把生命周期传给生命周期感知组件的 生命周期 ...

  • uni-app微信小程序开发 - 生命周期

    uni-app的生命周期分为应用生命周期和页面生命周期还有组件生命周期。 应用生命周期[https://uniap...

  • Activity,Fragment,Service生命周期图

    Activity生命周期 Fragment生命周期 Service生命周期

  • iOS 生命周期问题

    引言: 生命周期包括:a.程序的生命周期b.控制器的生命周期c.试图的生命周期 程序生命周期 a. 首次启动, 会...

  • Flutter 的生命周期

    Flutter 的生命周期Flutter 的生命周期分为两个部分: Widget 的生命周期App 的生命周期Fl...

  • 详细的分析 Vue生命周期

    Vue 的生命周期 生命周期执行的函数叫法有三种: 生命周期钩子 生命周期函数 钩子函数 生命周期钩子概念: 在v...

网友评论

      本文标题:VUE-5.Vue的生命周期

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