vue之生命周期函数

//今天学习一下vue的几个生命周期函数

一、vue生命周期官方的构图

总结:上图所示有beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestory, destoryed8个函数

//记住这八个函数有个很快的方法:一共有四对

• beforeCreate, created(数据初始化)
• beforeMount, mounted(dom元素挂载渲染)
• beforeUpdate, updated(数据变化)
• beforeDestory, destoryed(数据销毁)

二、各个生命周期函数作用

第一对:beforeCreate, created(数据初始化)

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

---

第二对:beforeMount, mounted(dom元素挂载渲染)

//beforeMount   代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来
            //此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作
            beforeMount(){
                console.log("beforeMount....")
                console.log(this.msg,document.getElementById("title"))
            },
           
//mounted   这是数据初始化的最后一个钩子函数
            //数据已经挂载完毕了，真实的dom也已经渲染出来了
            //这个钩子函数可以用来做一些实例化的相关操作 ===> 拖拽
            mounted(){
                console.log("mounted.....")
                console.log(this.msg,document.getElementById("title"))
            },

---

第三对:beforeUpdate, updated(数据变化)

//beforeUpdate.运行时钩子函数初始化阶段是不会主动执行的
            //只有dom挂载完毕了，然后再去当数据发生变化的时候，beforeUpdate这个钩子函数才会执行
            beforeUpdate(){
                console.log("beforeUpdate....")
            }
        })
//updated 只有当数据全部更新完毕时才会触发该函数
            updated(){
                console.log("updated....")
            }
        })

---

第四对:beforeDestory, destoryed(数据销毁)

//beforeDestory  当组件被销毁之前触发
//destoryed	当组件销毁完毕时触发
//具体的销毁方式需要根据业务需求自定义
  /*beforeDestory(){
                console.log("销毁前：");
            },
            destoryed(){
                console.log("销毁完成：");
            }*/

好好学习，天天向上。中国加油，武汉加油，千峰加油！