组件生命周期
常见应用
不要死记硬背,要根据具体情况灵活处理
加载远程数据
export default {
data(){
return {
news: []
}
},
async created(){
this.news = await getNews();
}
}
直接操作DOM
export default {
data(){
return {
containerWidth:0,
containerHeight:0
}
},
mounted(){
this.containerWidth = this.$refs.container.clientWidth;
this.containerHeight = this.$refs.container.containerHeight;
}
}
启动和清除计时器
export default {
data(){
return {
timer: null
}
},
created(){
this.timer = setInterval(()=>{
...
}, 1000)
},
destroyed(){
clearInterval(this.timer);
}
}