我们在之前学习过了vue对象的生命周期分为四个阶段，一共八个，分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted,
在使用组合API时，生命周期也是这么几个，但是写法不一样，我们来拿mounted这个生命周期学习一下，因为它最常用了
要是这个生命周期时，首先要导入它
import { onMounted } from 'vue'
我们看到名字有点不一样，在原来的mounted之前加了一个on，其他的生命周期函数也都是同样的方式
onMounted是一个方法，它接受一个回调函数，在页面挂载时，就会调用这个回调函数，
现在我们就可以在setup中使用它了
<script>
import { onMounted } from 'vue'
export default {
name: 'App',
setup() {
onMounted(() => {
console.log('组件挂载完成')
})
},
}
</script>
给onMounted函数传递了一个箭头函数，这个箭头函数打印了一段话，我们打开浏览器，发现控制台里打印了
组件挂载完成
说明我们的回调函数被调用了。
下面我们做一个小例子，模拟在页面挂载后，加载一个数组，显示在页面上
1）要有一个响应式的对象，来存放我们的数组
const data = reactive({
list: [],
})
2）来写一个模拟获取数据的方法，getList
const getList = () => {
setTimeout(() => {
data.list = ['苏格拉底', '柏拉图', '亚里士多德']
}, 1000)
}
3）最后在mounted回调中调用它
onMounted(() => {
console.log('组件挂载完成')
getList()
})
完整的代码
<template>
<ul>
<li v-for="item in data.list" :key="item">{{ item }}</li>
</ul>
</template>
<script>
import { reactive, onMounted } from 'vue'
export default {
name: 'App',
setup() {
const data = reactive({
list: [],
})
const getList = () => {
setTimeout(() => {
data.list = ['苏格拉底', '柏拉图', '亚里士多德']
}, 1000)
}
onMounted(() => {
console.log('组件挂载完成')
getList()
})
return {
data,
}
},
}
</script>
总结一下：
1）跟之前学习的生命周期一样，只不过前面添加了on
2）在使用时要先导入
3）可以写多个mounted回调，跟以前不一样，比如
onMounted(() => {
console.log('组件挂载完成')
getList()
})
onMounted(() => {
console.log('第二次调用mounted')
})
两个都会调用，更加方便了我们把业务逻辑代码分块来写
这节课就到这里，还是建议小伙伴们自己动手写一写，才能真正学会。
