VUE实例的生命周期与VUE组件的生命周期

最新推荐文章于 2025-11-07 11:48:56 发布

原创最新推荐文章于 2025-11-07 11:48:56 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #生命周期

本文探讨了Vue实例和组件的生命周期，详细介绍了在不同阶段可以进行的操作。在实例的生命周期中，`this`指向vue对象，每个实例都有唯一的uid。而在组件（同样为vue实例）的生命周期中，`this`指向组件对象，组件与实例的生命周期独立，可通过props传递值，组件内部通过局部变量或计算属性处理数据。

1、实例的生命周期：

具体的生命周期图例参考官方文档。

var newVue = new Vue({
    el:"#main",
    data:{},
    beforeCreate:function(){
        console.log(this);
    }，
    created:function(){

    },
    beforeMount:function(){

    },
    mounted:function(){

    },
    beforeUpdate:function(){

    },
    updated:function(){

    },
    beforeDestroy:function(){

    },
    destroyed:function(){

    },
    methods:{

    }
})

实例中的this指的是这个实例vue对象；该对象中有识别属性id为uid，区分不同的vue实例对象。

这里写图片描述

2、组件（也是vue实例）中的生命周期

官方文档说：

这里写图片描述

 Vue.component('my-component',{
    template:"<div>Hello {{name}}!</div>",
    data:function(){
    var data = {
         name:'Lily'
        };
    return  data; //使得每一个组件拥有自己的内部状态
    },
    beforeCreate:function(){
    console.log(this);
    }，
    created:function(){

    },
    beforeMount:function(){

    },
    mounted:function(){

    },
    beforeUpdate:function(){

    },
    updated:function(){

    },
    beforeDestroy:function(){

    },
    destroyed:function(){

    },
    methods:{

    }
})

组件（实际上也是vue实例）中的this指的是这个组件vueComponent；与（常规）实例中的生命周期不同，属于各自的生命周期；
当将组件用于实例化之后的模板域中，这两者的生命周期互不影响。所以可以在组件的生命周期中
对组件中的数据进行操作，而在实例中无法直接对组件中的值进行操作，而只能通过props属性对
组件中进行传值，组件将值存于一个局部变量进行使用，或者定义一个计算属性并将其返回。

这里写图片描述