vue生命周期

千锋逆战班，Rayson.Jin学习打卡！
今天给大家介绍一下vue生命周期。
主要从几个方面来讲：

vue的生命周期是什么

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有一下几种：

初始化阶段：
beforeCreate
created
beforeMount
mounted

运行中阶段：
beforeUpdate
updated

销毁阶段：
beforeDestroy
destroyed

英文不好看图，更好理解

代码理解

<div id="app"> 
        <my-component></my-component>
    </div>
    <!--定义组件的模板结构-->
    <template id="my-component">
        <div>
            <h1 id="title">hello---------{{msg}}</h1>
            <p><input type="text" v-model="msg"></p>
        </div>
    </template>
    <script>
        /*
            组件从创建到销毁的一系列过程叫做组件的声明周期
        */
        
        //初始化阶段
        //1.一个组件或者实例的生命周期都是通过new开始的   
        //2.实例化之后，内部会做一些初始化事件与生命周期相关的配置 
        Vue.component("my-component",{
            template:"#my-component",
            data(){
                return {
                    msg:1
                }
            },
            //3.这个钩子函数初始化的时候立马执行,此钩子函数里面是获取不到数据的
            //同时页面中的真实dom节点也没有挂载出来，null
            beforeCreate(){
                console.log("beforeCreate....")
                console.log(this.msg,document.getElementById("title"))
            },
            //4.created钩子函数内部的数据已经被挂载了，但是真实dom节点还是没有渲染出来
            //在这个钩子函数里面，如果同步的去更改数据的话，运行中钩子函数是不会执行的。
            //通常会在此钩子函数里面进入ajax的异步操作，另外还可以做一些初始化事件的绑定
            created(){
                // this.msg = 222222222222222
                console.log("created...")
                console.log(this.msg,document.getElementById("title"))
            },
            //5.接下来的过程，就是组件或者实例去查找各自的模板，让后将其编译成虚拟dom，即将放入render函数中做初始化渲染的操作。
            //6.beforeMount代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来
            //此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作
            beforeMount(){
                console.log("beforeMount....")
                console.log(this.msg,document.getElementById("title"))
            },
            //生成好了虚拟dom，然后在render函数里面替换对应的el，渲染成真实dom节点
            //相当于在render函数里面做了一个初始化渲染的操作
            // render(){ //相当于把组件内部的render函数覆盖了。自己的render是将虚拟dom渲染成真实dom的操作
            //     console.log("render.....")
            // }
            //7.mounted钩子函数是初始化阶段的最后一个钩子函数
            //数据已经挂载完毕了，真实的dom也已经渲染出来了
            //这个钩子函数可以用来做一些实例化的相关操作 ===> 拖拽
            mounted(){
                console.log("mounted.....")
                console.log(this.msg,document.getElementById("title"))
            },
            //8.运行时钩子函数初始化阶段是不会主动执行的
            //只有dom挂载完毕了，然后再去当数据发生变化的时候，beforeUpdate这个钩子函数才会执行
            beforeUpdate(){
                console.log("beforeUpdate....")
            }
        })

       
        new Vue({}).$mount("#app");
    </script>

总结

vue 的生命周期，总得来说就是实例的创建和销毁这段时间的一个机制。也是vue框架的数据间的交互通信。