个人对于Vue生命周期的理解

个人对于Vue生命周期的理解

生命周期:

组件从创建到销毁的一系列过程叫做组件的声明周期。
vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，
并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发）

生命钩子函数:

vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发）

组件的生命周期中钩子函数在三个阶段,每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁,其分布大概如下：

一. 初始化阶段

1. beforeCreate

<div id="app"> 
        <my-component></my-component>
    </div>
  

    <!--定义组件的模板结构-->
    <template id="my-component">
        <div>
            <h1 id="title">{{msg}}</h1>
            <p><input type="text" v-model="msg"></p>
        </div>
    </template>
    <script>

        Vue.component("my-component",{
            template:"#my-component",
            data(){
                return {
                    msg:1
                }
            },
            //1.这个钩子函数初始化的时候立马执行,此钩子函数里面是获取不到数据的
            //同时页面中的真实dom节点也没有挂载出来，null
            beforeCreate(){
                console.log("beforeCreate....")
                console.log(this.msg,document.getElementById("title"))
            }
       	})

       
        new Vue({}).$mount("#app");

      
    </script>

2. created:

			//created钩子函数内部的数据已经被挂载了，但是真实dom节点还是没有渲染出来
            //在这个钩子函数里面，如果同步的去更改数据的话，运行中钩子函数是不会执行的。
            //通常会在此钩子函数里面进入ajax的异步操作，另外还可以做一些初始化事件的绑定
 created(){
                // this.msg = 222222222222222
                console.log("created...")
                console.log(this.msg,document.getElementById("title"))
            },

3. beforeMount

			//beforeMount代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来
            //此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作
 beforeMount(){
                console.log("beforeMount....")
                console.log(this.msg,document.getElementById("title"))
            },

4. mounted

			//mounted钩子函数是初始化阶段的最后一个钩子函数
            //数据已经挂载完毕了，真实的dom也已经渲染出来了
            //这个钩子函数可以用来做一些实例化的相关操作 ===> 拖拽
            mounted(){
                console.log("mounted.....")
                console.log(this.msg,document.getElementById("title"))
            },

二. 运行阶段

1.beforeCreate

 beforeUpdate(){
                console.log("beforeUpdate....")
            }

2. updated

updated(){
    console.log("updated",this.msg) 
    console.log("updated",document.getElementById("title").innerHTML)
}

三. 销毁阶段

1.beforeDestroy

<template id="aaa">
    <div>
        <h1 id="title">{{msg}}</h1>
        <p><input type="text" v-model="msg"></p>
        <button @click="destroy">销毁组件</button>
    </div>
</template>

methods:{
    destroy(){
        // console.log(122)
        this.$destroy()
    }
}

2. destroyed

destroyed(){
    console.log("destroyed");
}