vue2生命周期初始化流程

最新推荐文章于 2024-09-30 11:04:46 发布

困困的小熊

最新推荐文章于 2024-09-30 11:04:46 发布

阅读量148

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_65491952/article/details/132090543

版权

生命周期

通常也叫生命周期回调函数、生命周期函数、生命周期钩子
vue初始化时在不同的阶段调用的不同函数
生命周期函数的this指向为vue实例，名字不能更改

vue的初始化流程

<body>
    <div id="app" >
        {{myName}}
        <button @click="add">加1</button>
        <button @click="bye">点击摧毁vm</button>
    </div>
    
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data(){
            return{
                myName:1,
                
            }
        },
        methods:{
            add(){
                console.log("add");
                this.myName++
            },
            bye(){
                console.log("摧毁已启动");
                //调用摧毁流程启动
                this.$destroy()
            }
        },
        beforeCreate(){
            console.log("beforCreate",this.myName);
        },
        created(){
            console.log("created",this.myName);
        },
        beforeMount(){
            console.log("beforeMount",this.myName);
        },
        mounted(){
            console.log("mounted",this.myName);
        },
        beforeUpdate(){
            console.log("beforeUpdate",this.myName);
        },
        updated(){
            console.log("updated",this.myName);

        },
        beforeDestroy(){
            console.log("beforeDestroy",this.myName);
        },
        destroyed(){
            console.log("destroyed",this.myName);
        }
    })
</script>

beforeCreate阶段(创建之前)
- vue中data的数据和methods的方法还不能使用
created阶段(创建完成)
- vue中data的数据和methods的方法已可以使用
beforeMount阶段(挂载之前)
- 页面可以展示内容，但是是未编译，最终都是不能操作的DOM结构，展示时间短

mounted阶段(挂载完成)
- 页面显示编译后的DOM
- vue的初始化过程结束
- 此阶段可进行：定时器、网络请求、订阅消息、绑定事件等
beforeUpdate阶段(更新之前)
- 数据是新的，页面还没有更新
Updated阶段(更新完成)
- 数据是新的，页面同步更新
beforeDestroy阶段(销毁之前)
- vm中所有的: data、 methods、指令
  等等，都处于可用状态，
- 马上要执行销毁过程，-般在此阶段:关闭定时器、取消订阅消息
  解绑自定义事件等收尾操作
destroyed阶段(销毁完成)
- 销毁完成