Vue生命周期函数

Vue的生命周期函数也叫做生命周期钩子
生命周期示意图见官方

 let vw = new Vue({  
        
        el:"#app",
        data: {
            name: '张三',
            age: 20
        },

beforeCreate()

beforeCreate 周期函数是在数据还没有初始化时触发
在这个函数里面打印 name 和 age 的值为 undefined

created()

created 周期函数执行时，数据已经渲染完成,通常用于管理Vue的数据 比如ajax请求 获取后台数据
这时候data 里面的 name 和 age 的值 为 张三 20

beforeMount()

beforeMount 周期函数挂载之前，模板已经渲染成功了(数据已经渲染到模板里)，但是还没有将内容挂载到页面中(还没有重新渲染页面)

console.log(this.$el); 
打印 可以看见模板已经渲染完成

mounted()

mounted 周期函数挂载完成，模板已经完成渲染，并且已经将模板上的内容挂载到了页面

console.log(this.$el);

beforeUpdate()

beforeUpdate周期函数 修改之前 数据已经修改了，但是没有重新挂载到页面 （页面还没重新渲染）
可以在周期函数 beforeUpdate 最后加入一个断点 debugger 可以更好的观察

updated()

updated周期函数 修改完成数据已经修改，并且也重新挂载

beforeDestroy()

销毁之前
beforeDestroy 周期函数 在这个函数里面做任何数据的修改 都不会重新挂载 （重新渲染页面）

destroyed（）

销毁完成
destroyed 周期函数 不会销毁Vue 实例