首先created和mounted里面的代码都是同步执行的,所以在哪个钩子里面执行ajax都不影响页面渲染。
在渲染的过程中程序先执行同步任务,如alert('created'),alert('mounted') ,执行完同步任务后再执行异步任务。
created=>api请求=>组件重新渲染
=>mounted=>组件首次渲染
created=>mounted=>组件首次渲染=>api请求=>组件重新渲染
mounted=>api请求
//如果放在created渲染,分支会一次,会多渲染一次,所以建议放在mounted。
data(){
return {
list:[]
}
}
created(){
console.log ('created')
alert('created')
this.getData()
},
mounted(){
console.log('mounted')
alert('mounted')
const ulRef=this.$refs.ulRef /获取当前组件
console.log(ulRef)
}
methods:{
async getData() {
const { data } = await axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
this.list = data
}
}
updated(){
console.log('updated')
const ulRef=this.$refs.ulRef /获取当前组件
console.log(ulRef)
}