vue生命周期

最新推荐文章于 2025-04-08 16:48:53 发布

昵称已存在lxttttt

最新推荐文章于 2025-04-08 16:48:53 发布

阅读量180

点赞数

分类专栏：前端 vue

本文链接：https://blog.youkuaiyun.com/weixin_43238931/article/details/116074704

版权

前端同时被 2 个专栏收录

21 篇文章

订阅专栏

vue

13 篇文章

订阅专栏

本文详细介绍了Vue.js中组件的生命周期，从beforeCreate到destroyed，包括每个阶段的主要任务和开发者可以进行的操作。重点讲解了created、mounted、updated和destroyed等关键阶段，并提供了代码示例和生命周期图示，帮助理解Vue组件的完整生命周期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue的生命周期分为以下几个部分

beforeCreate ->初始化事件和生命周期
created ->初始化data和methods
befroeMount ->完成模板实例化
mounted ->渲染数据到页面上
beforeUpdate ->更新Model层的data
update ->更新View层的data
beforeDestroy ->进入销毁状态
destroyed ->销毁掉组件中的数据、过滤器、函数、指令等

图示如下：
在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1 id="h3">{{msg}}</h1>
        <input type="button" value="修改数据" @click="msg = 'change'">
    </div>
    <script>
        // 创建vue实例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods: {
                show(name) {
                    console.log(name + " 执行了show方法");
                }
            },
            beforeCreate() {
                console.log("beforeCreate " + this.msg);  // 未被打印出来。无法获取到数据
                this.show("beforeCreate ");    // [Vue warn]: Error in beforeCreate hook: "TypeError: this.show is not a function"
                /**
                 *  在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化
                 */
            },
            created() {
                console.log("created " + this.msg);  // data被初始化
                this.show("created ");    // 函数被初始化
                /**
                 * 在created中，dataUImethods被初始化
                 */
            },
            beforeMount() {
                console.log("beforeMount " + document.getElementById("h3").innerText);   // 输出{{msg}},msg的值未被渲染到页面中
                /**
                 * 此时模板已经在内存中编译完成，但并没有将模板渲染到页面中
                 */
            },
            mounted() {
                console.log("mounted " + document.getElementById("h3").innerText);  // 输出ok
                /**
                 * 内存中的模板已经挂载到页面中，用户可以看到渲染好的页面数据
                 * mounted是实例创建的最后一个函数，当执行完mounted就表示，实例已经完全被创建好了，
                 */
            },
            beforeUpdate() {
               console.log("界面上的元素内容:" + document.getElementById("h3").innerText);  // 界面上的元素内容:ok
               console.log("data中的msg数据是:" + this.msg);     // data中的msg数据是:change
                /**
                 * 此时data数据已经改变，但页面还未更新
                 */
            },
            updated() {
                console.log("界面上的元素内容:" + document.getElementById("h3").innerText);  // 界面上的元素内容:change
                console.log("data中的msg数据是:" + this.msg);     // data中的msg数据是:change
                /**
                 * 此时页面和data中的数据保持同步
                 */
            }
        });
    </script>
</body>
</html>

开发顺序

name
data
props
components
beforeRouteEnter
beforeRouteUpdate (路由变化，组件被复用时调用)
beforeRouteLeave
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destroyed
watch
computed
directive
filter
methods