vue学习（四）【生命周期函数】

最新推荐文章于 2025-07-10 17:27:47 发布

原创最新推荐文章于 2025-07-10 17:27:47 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

31 篇文章

订阅专栏

博客主要提及了Vue实例以及生命周期函数相关内容，这些都是前端开发中Vue技术的重要部分，对于理解和运用Vue框架有重要意义。

Vue-实例，生命周期函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例生命周期函数</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">{{message}}</div>
<script>
    /*生命周期函数，就是vue实例在某一个时间点会自动执行的函数*/
    var vm = new Vue({
        el: '#root',
        data:{
            message:"Rachel"
        },
        beforeCreate: function () {/*el实例创建前*/
            console.log("beforeCreate");
        },
        created: function () {/*el实例被创建*/
            console.log("created")
        },
        beforeMount: function () {/*el实例挂载前*/
            console.log(this.$el);
            console.log("beforeMount")
        },
        mounted: function () {/*el实例已经被挂载*/
            console.log(this.$el);
            console.log("mounted")
        },
        beforeDestroy:function () {/*实例销毁前*/
            console.log(this.$el);
            console.log("beforeDestroy")
        },
        destroyed:function () {/*实例完全被销毁*/
            console.log("destroyed")
        },
        beforeUpdate:function () {/*数据的修改前*/
            console.log("beforeUpdate")
        },
        updated:function () {/*数据修改之后*/
            console.log("destroyed")
        }
    })
</script>
</body>
</html>