【VUE】vuejs2.0 vue实例的生命周期

关注

转载最新推荐文章于 2026-03-09 05:22:00 发布 437 阅读 AI 写同款· GEO 优化 ›

Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0）每个应用程序实例在创建时都有一系列的初始化步骤。例如，创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫做生命周期钩子的函数，通过这些钩子函数可以定义业务逻辑。Vue3.0 是兼容 Vue2.x 版本的也就是说我们再日常工作中可以在 Vue3 中使用 Vue2.x 的相关语法。Vue 3.0 带来了许多新特性和改进，其中包括更强大的组合API。与基于选项的 API 相比，组合 API 中的生命周期钩子函数也发生了变化。阅读详情

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。

例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。

下图展示的就是一个vue实例对象的生命周期。
在这里插入图片描述

从图上我们可以看到vue在生命周期中有这些状态，

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed

Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。

那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子

var vm = new Vue({
    el: "#container",
    data: {
        test : 'hello world'
    },
    beforeCreate: function(){
        console.log(this);
        showData('创建vue实例前',this);
    },
    created: function(){
        showData('创建vue实例后',this);
    },
    beforeMount:function(){
        showData('挂载到dom前',this);
    },
    mounted: function(){
        showData('挂载到dom后',this);
    },
    beforeUpdate:function(){
        showData('数据变化更新前',this);
    },
    updated:function(){
        showData('数据变化更新后',this);
    },
    beforeDestroy:function(){
        vm.test ="3333";
        showData('vue实例销毁前',this);
    },
    destroyed:function(){
        showData('vue实例销毁后',this);
    }

});

function realDom(){
    console.log('真实dom结构：' + document.getElementById('container').innerHTML);
}
function showData(process,obj){
    console.log(process);
     console.log('data 数据：' + obj.test)
     console.log('挂载的对象：')
     console.log(obj.$el)
     realDom();
     console.log('------------------')
     console.log('------------------')
}

在这里插入图片描述
我们可以看到，vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容