vue学习（三）vue的生命周期

最新推荐文章于 2025-05-09 11:19:58 发布

dream21st

最新推荐文章于 2025-05-09 11:19:58 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习文章标签： vue学习

本文链接：https://blog.youkuaiyun.com/qq_36305027/article/details/83690812

vue学习专栏收录该内容

19 篇文章

订阅专栏

本文详细解析了Vue.js的生命周期，包括beforeCreate、created、beforeMount、mounted等关键阶段，并通过示例代码展示了各阶段的执行时机，帮助开发者深入理解Vue组件的运行流程。

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

1，vue的生命周期图

2，生命周期的方法

3，生命周期测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">{{content}}</div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue'
            },
            beforeCreate:function () {
                 console.log("beforeCreate")
            },
            created:function () {
                console.log("created")
            },
            beforeMount:function () {
                console.log("beforeMount")
            },
            mounted:function () {
                console.log("mounted")
            },
            beforeUpdate:function () {
                console.log("beforeUpdate")
            },
            updated:function () {
                console.log("updated")
            },
            beforeDestroy:function () {
                console.log("beforeDestroy")
            },
            destroyed:function () {
                console.log("destroyed")
            }
        })
    </script>
</body>
</html>

在浏览器中操作：

页面渲染的时候回执行：

执行修改数据 app.content='1111',会触发

执行app.$destroy()，会触发