vue 之生命周期简单明了

生命周期what？

钩子函数自动绑定this指向实例化或者组件本身，然后访问数据、属性、方法。

笔者赠送：自己动手试试容易理解和掌握

四个阶段

var app=new Vue({
el:'#out"，
data(){
return{
title:"hello"
}
},
methods:{
tap(){
console.log(1)
}
},
beforeCreate(){
//leading图展示title值不能得到
console.log(‘beforeCreate’) //title值不能获取
}
created(){
console.log('created')//title值得到
}
beforeMounte(){
console.log('beforeMounte')//数据未解析
}
mounted(){
//用来进行数据的请求
console.log('mounted')//数据解析
axios({})
//数据过来关loading
}
beforeUpdate(){
consple.log('beforedate')//条件触发，视图没改
}
updated(){
console.log('updated')//条件触发，视图改了
beforeDestroy(){
console.log('beforedestroy')//销毁调用前，实例可用
}
destroyed(){
console.log('destroyed')//销毁后调用，所有解绑，释放内存
}

})

create

创建之前（beforeCreate）：对象已经创建了，但还没创建完（不能获取数据事件）做loading（加载中）图的展示
创建完成（created）：对象创建好，可以获取数据和事件。实例还没给到DOM节点

mount（挂载）

beforeMount：实列已经给到DOM节点，还没解析

moounted：已经解析，用来进行数据的请求

update（更新）

需要条件去触发

beforeUpdate：数据变更，视图没做最新的渲染
update：DOM操作视图更新

destroy（销毁）

条件触发，实例和数据、事件解绑，视图还在，可以释放内存
beforeDestroy:
destroyed：

其他三个特殊钩子

activated（激活）
deactivated（停止） 需要与keep-alive缓存组件一起使用
errorCaptured（子孙组件错误时调用