vue3.0 组合式API(Composition API)
一、setup、ref、onMounted
新的 setup
组件选项在创建组件之前执行
新的 ref
函数使任何响应式变量在任何地方起作用
合式 API 上的生命周期钩子与选项式 API 的名称相同,但前缀为 on
<template>
<div>
<div>
1
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
import Api from '../api'
export default {
setup() {
const list = ref([])
const getList = () => {
Api.list().then(res => {
console.log(res)
if (res.code === 200) {
list.value = res.data
}
})
}
onMounted(getList)
return {
list,
getList
}
},
data() {
return {
}
}
}
</script>
<style>
</style>
二、关注点分离,把相关的代码提取到独立的文件里
List.vue:
<template>
<div>
<div v-for="item in list" :key="item.id">
{{item.title}}
</div>
</div>
</template>
<script>
import useList from './useList'
export default {
setup() {
const { list } = useList()
return {
list
}
},
data() {
return {
}
}
}
</script>
<style>
</style>
useList.js:
import { ref, onMounted } from 'vue'
import Api from '../api'
export default () => {
const list = ref([])
const getList = () => {
Api.list().then(res => {
console.log(res)
if (res.code === 200) {
list.value = res.data
}
})
}
onMounted(() => getList())
return {
list,
getList
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步