先简单说说vue中周期函数
- beforeCreate（创建前）
- created（创建后）
- beforeMount（载入前）
- mounted（载入后）
- beforeUpdate（更新前）
- updated（更新后）
- beforeDestroy（销毁前）
- destroyed（销毁后）
<template>
<div>
<p>{{msg}}</p>
<p @click="updateData">修改数据</p>
</div>
</template>
<script>
export default{
data(){
return {
msg:'城市列表'
}
},
beforeCreate(){
console.log("创建前");
console.log(this.msg); //undefined
},
created(){
console.log("创建后"+this);
console.log(this.msg); //城市列表
},
beforeMount(){
console.log("挂载到dom前");
},
mounted(){
console.log("挂载到dom前");
this.get_info();
},
activated(){
console.log("keep-alive组件激活时调用。");
// this.get_info()
},
deactivated(){
console.log("keep-alive组件停用时调用。");
},
beforeUpdate(){
console.log("数据更新前");
},
updated(){
console.log("数据更新后");
console.log("data重新渲染了");
},
beforeDestroy(){
console.log("销毁前");
},
destroyed(){
console.log("销毁后");
},
methods:{
get_info(){
this.axios.get('index.php?g=api&m=api&a=index_class_video_api',{
params: {
is_web:1
}
}).then((res)=>{
if(res.data.status == 1){
console.log("成功")
}else{
console.log("处理数据失败")
}
}).catch((error)=>{
console.log(error);
})
},
updateData(){
this.msg="我是修改以后的"
}
}
}
</script>
<style>
</style>
主要说一下updated
一：什么时候触发updated函数？
只有事先设置好的data变量如msg改变并且要在页面重新渲染{{ msg}}完成之后,才会进updated方法，光改变msg但不渲染页面是不会触发的.
<template>
<div>
<p>{{msg}}</p>
<p @click="updateData">修改数据</p>
</div>
</template>
<script>
export default{
data(){
return {
msg:'城市列表'
}
},
updated(){
console.log("data重新渲染了")
},
methods:{
updateData(){
this.msg="我是修改以后的"
}
}
}
</script>