vue生命周期的钩子函数理解

vue总共有8个生命周期3个阶段：

初始化阶段

• beforeCreate：组件实例化在创建之前，属性绑定之前，只是一个空壳，无法访问到数据和真实的dom和data。
• created：组件实例创建完成，属性绑定完成，但是dom未绑定。可以获取到初始数据，可以使用数据，也可以更改数据，但是不会触发updated函数。
• beforeMount：模块编译，事件挂载之前，变异模块将虚拟dom放在render函数中准备渲染，可以更改数据，但不会触发updated函数。
• mounted：模块开始编译，事件也挂载好了，组件，数据，真实的dom都渲染执行。

运行中阶段

• beforeUpdate：组件更新之前，vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。
• updated：组件更新后，数据已经更改完成，

• dom也重新render完成*。

注销阶段

• beforeDestory：组件销毁之前，做一些善后工作，例如清除计时器、清除非指令绑定的事件等等。
• destoryed：组件销毁后，数据的绑定，事件监听等全部去除。

如下：

//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");