vue2.0 生命周期图以及栗子_vue2 生命周期-优快云博客

本文链接：https://blog.youkuaiyun.com/scorpio_h/article/details/59180703

本文通过一个完整的示例展示了Vue.js中组件从创建到销毁的整个生命周期过程，并提供了详细的生命周期钩子函数说明及其调用顺序。

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

先上个图。。后面有栗子，可直接复制运行演示。

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期demo</title>
</head>
<body>
    <div id="box">
        <input type="button" value="更新数据" @click="update">
        <input type="button" value="销毁组件" @click="destroy">
        <input type="button" value="组件销毁后更新数据" @click="update2">
        {{msg}}
    </div>

    <script src="//cdn.bootcss.com/vue/2.2.1/vue.common.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:"#box",
                data:{
                    msg:"welcome vue2.0"
                },
                methods:{
                    update(){
                        this.msg="更新数据",
                        console.log("声明组件更新！")
                    },
                    destroy(){
                        console.log("声明销毁组件！")
                        this.$destroy()
                    },
                    update2(){
                        this.msg="组件销毁后更新数据",
                        console.log("声明组件销毁后更新数据！")
                    }
                },
                beforeCreate(){
                    console.log("组件实例刚刚被创建（属性都无）")
                },
                created(){
                    console.log("实例已经创建完成（属性已经绑定，dom还没生成）")
                },
                beforeMount(){
                    console.log("模板编译之前")
                },
                mounted(){
                    console.log("模板编译完成,代替1.0里的ready")
                },
                beforeUpdate(){
                    console.log("组件更新之前")
                },
                updated(){
                    console.log("组件更新完毕")
                },
                beforeDestroy(){
                    console.log("组件销毁之前")
                },
                destroyed(){
                    console.log("组件销毁完成")
                }
            })
        }
    </script>
</body>
</html>