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