Vue钩子生命周期函数

最新推荐文章于 2024-12-08 18:41:16 发布

程序媛霉霉菌

最新推荐文章于 2024-12-08 18:41:16 发布

阅读量102

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/cjmxcc/article/details/112794521

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{msg}} <br>
        <button @click="destroy">Destroy</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip=false;
    new Vue({
        el:"#app",
        data:{
            msg:"hello vue666",
            timer:""
        },
        methods:{
            destroy(){this.$destroy()}
        },

        //初始化阶段
        beforeCreate(){
           //Vue刚刚开始初始化;事件相关的机制已经比较完整了;可以注册事件并触发事件的
           /*this.$on("test",(flag)=>{console.log("test",flag)});
           this.$emit("test",123)*/

            //在beforeCreate钩子中只完成了自定义事件的初始化
            //数据的转绑 数据的响应式都还没有开始执行
            this.msg = "xxx"
        },
        created(){
            //完成了数据的转绑 数据的响应式
            // this.msg = "xxx";
            //最早可以发送ajax请求的地方;
            //在created钩子中所有的挂载相关的工作都还没有开始执行
            //不能进行dom操作;不能相信dom;因为dom还没有被渲染
        },
        beforeMount(){
            //挂载前
            console.log("beforeMount",this.$el);
        },
        mounted(){
            //挂载后 可以进行UI效果的编写
            console.log("mounted",this.$el);
            this.timer = setInterval(()=>{
                console.log("setInterval")
                this.msg+="6"
            },1000)
        },

        //响应式阶段
        beforeUpdate(){
            //响应式前
            console.log("beforeUpdate")
        },
        updated(){
            //响应式后
            console.log("updated")
        },

        //死亡阶段
        beforeDestroy(){console.log("beforeDestroy")},
        destroyed(){
            //收尾!!!
            clearInterval(this.timer)
            console.log("destroyed")
        }
    })
</script>
</html>