生命周期（钩子函数） 每个周期发生的变换记录

生命周期每个周期的变化

var vm=new Vue({ el:"#app", data:{ msg:"hello world", res:"" }, beforeCreate:function(){ console.log(this.msg) }, //实例创建之前，这个时候vue的实例上只有一些生命周期函数 // data和methods还不能使用 created(){ console.log(this.msg) // $.ajax("").then(res=>{ // this.res=res; // }) console.log(con.innerHTML) }, //创建结束的时候，vue实例上的data 和 methods就能正常使用了 最早可以在created里使用data和methods beforeMount(){ console.log(con.innerHTML) },//挂载之前 //模板进行编译,把指令循环插值语句都进行执行,生成一个虚拟的dom节点,在挂载之前,这个虚拟的dom被放在内存中 mounted(){ console.log(con.innerHTML) },//挂载完毕 最早在这个生命周期函数里用dom节点 //把上一步生成的虚拟的dom挂载进#app里 //实例已经创建完毕 , 创建阶段的钩子函数 只执行一次 beforeUpdate(){ console.log("数据更新之前====",this.msg) console.log("数据更新之前视图上的数据====",con.innerHTML) },//数据更新之前之后指的是视图上数据的更新前后， // 数据更新之前函数中 data里的数据已经发生变化，视图还没有更新 updated(){ console.log("数据更新之后=====",this.msg) console.log("数据更新之后视图上的数据====",con.innerHTML) }, //数据更新之后函数中 视图也跟着变化了 beforeDestroy(){ console.log("实例销毁之前") }, destroyed(){ console.log("实例销毁之后") }, beforeUpdate(){ console.log("数据更新之前====",this.msg) console.log("数据更新之前视图上的数据====",con.innerHTML) },//数据更新之前之后指的是视图上数据的更新前后， // 数据更新之前函数中 data里的数据已经发生变化，视图还没有更新 updated(){ console.log("数据更新之后=====",this.msg) console.log("数据更新之后视图上的数据====",con.innerHTML) }, //数据更新之后函数中 视图也跟着变化了 beforeUpdate(){ console.log("数据更新之前====",this.msg) console.log("数据更新之前视图上的数据====",con.innerHTML) },//数据更新之前之后指的是视图上数据的更新前后， // 数据更新之前函数中 data里的数据已经发生变化，视图还没有更新 updated(){ console.log("数据更新之后=====",this.msg) console.log("数据更新之后视图上的数据====",con.innerHTML) }, //数据更新之后函数中 视图也跟着变化了 beforeDestroy(){ console.log("实例销毁之前") }, destroyed(){ console.log("实例销毁之后") } // 生命周期函数又叫钩子函数 // 生命周期函数分为三种共八个 // 1.创建阶段的生命周期函数(四个) // 创建之前(beforeCreate) // 创建完成(created) // 挂载之前(beforeMount) // 挂载之后(mounted) // 2.运行阶段的 // beforeUpdate // updated // 3.销毁阶段的 // beforeDestroy // destroyed }) des.onclick=()=>{ vm.$destroy();//销毁vue实例 }