Vue生命周期的八个钩子

beforeCreate (){} 组件即将创建
任务：初始化事件，位整个生命周期做准备
意义：数据未获取，真实dom未拿到

beforeCreate() {//组件创建之前  初始化事件，为生命周期开始做准备
console.log('1-beforeCreate')
console.log('data',this.msg)//拿不到数据
console.log('p',document.querySelector('p'))//拿不到真实的dom
fetch('./data/data.json')//可以请求数据 可以修改数据
.then(res=>res.json())
.then(data=>{
this.msg=data.name
})
.catch(err=>console.log(err))
},

created(){}组件创建结束
任务：进行数据注入和数据的反应
意义：数据拿到了，真实dom未拿到

created() {//组件创建完成  进行数据注入和数据反映
console.log('2-Create')
console.log('data',this.msg)//拿到数据
console.log('p',document.querySelector('p'))//拿不到真实的dom
fetch('./data/data.json')//可以请求数据
.then(res=>res.json())//可以请求数据 可以修改数据
.then(data=>{
this.msg=data.name
})
.catch(err=>console.log(err))
},

beforeMount(){}组件即将挂载
任务：判断组件el/template选项，如果有使用render函数将template模板中的jsx转换成虚拟dom对象模型，如果没有需要手动挂载
意义：更多的完成内容任务，外部就不用干预了

beforeMount() {//组件挂载之前  判断是否存在el/template选项，不存在就手动挂载$mount
console.log('3-beforeMount')
console.log('data',this.msg)//拿到数据
console.log('p',document.querySelector('p'))//拿不到真实的dom
fetch('./data/data.json')//可以请求数据
.then(res=>res.json())//可以请求数据 可以修改数据
.then(data=>{
this.msg='李四'
})
.catch(err=>console.log(err))
},

mounted(){}组件挂载完成
任务:将虚拟dom渲染成真实dom，然后挂载到页面上，就可以看到页面上存在内容了
意义：操作真实dom[可以进行第三方库实例化]

mounted() {//组件挂载完成  将VDOM渲染到页面上转化成可以看到的内容 拿到了真实dom
console.log('4-mounted')
console.log('data',this.msg)//拿到数据
console.log('p',document.querySelector('p'))//拿到了真实的dom（可以操作dom了）
fetch('./data/data.json')//可以请求数据
.then(res=>res.json())//可以请求数据 可以修改数据
.then(data=>{
this.msg='李四'//拿到真实dom之后，就可以修改真实dom的数据
})
.catch(err=>console.log(err))
},

生命周期初始化总结：一般请求数据在created函数中进行，因为created钩子是第一次获得数据的地方
mounted钩子函数可以进性dom操作【第三方库实例化（静态数据）】

beforeUpdate 组件更新前
触发条件：组件数据发生改变
任务：VDOM重新生成，然后通过diff算法和以前的VDOM比对，生成patch补丁对象【内部进行】

//生命周期进行中
beforeUpdate() {//组件更新前 数据变化
console.log('beforeUpdate')
console.log('data',this.flag)//数据变化
console.log('p',document.querySelector('p'))//拿到真实dom
//一般内部进行，不干预，多次触发
},

updated 组件更新完成
触发条件：组件的数据发生变化
任务：将patch补丁对象进行渲染生成真实dom
意义：可以操作dom【第三方库的实例化（动态数据）】

updated() {//组件更新后 数据发送变化
console.log('beforeUpdate')
console.log('data',this.flag)//数据变化
console.log('p',document.querySelector('p'))//拿到真实dom
//动态数据的获取
},

进行中总结：大家使用updated进行第三方库实例化

销毁阶段：（俩个销毁都差不多，都一样，推荐使用destroyed）
beforedestroy
destroyed