介绍:
在vue中,为了实现项目可维护性与复用的功能,会将代码单独分离出一个功能组件,但是vue2和vue3分离方式并不相同
vue2:
- vue2不支持逻辑的抽离,如果想实现抽离必须要将所有html代码与逻辑代码全部抽离,会增加父子组件的通信成本,如果数据过多维护起来会比较头疼
vue3:
- vue3支持逻辑的抽离,可以更好的增加项目的可维护性,由于抽离的只是逻辑代码 ,所以没有增加通信成本,就算数据再多,维护起来也非常方便
- 而且vue3中的 setup 这个函数里面不应该出现大量的逻辑代码,不仅看起来不优美,而且维护起来也有些不方便
- 在vue3中,一般会将抽离的逻辑代码放进service的文件夹中,然后在父组件中导入使用
未分离写法:
<ul class="goods-list">
// 直接使用即可
<li v-for="item in newData" :key="item.id">
<RouterLink to="/">
<img :src="item.picture" alt="" />
<p class="name">{{ item.title }}</p>
<p class="desc">{{ item.alt }}</p>
</RouterLink>
</li>
</ul>
......
// 导入 api 接口
import { findNew } from '@/api/home'
import { ref } from 'vue'
export default {
setup () {
// 获取的数据
const newData = ref([])
async function loadNewData () {
const res = await findNew()
newData.value = res.data.result
}
loadNewData()
// 不要忘记 return
return {
newData
}
分离写法:
功能组件:src/views/Home/service/useHot.js
// 功能组件
import { ref } from 'vue'
// 导入 api 接口
import { findHot } from '@/api/home'
export function useHot () {
const hotData = ref([])
async function loadhotData () {
const res = await findHot()
hotData.value = res.data.result
}
loadhotData()
// 注意要 return
return {
hotData
}
}
父组件:src/views/Home/index.vue
<ul class="goods-list">
// 直接使用即可
<li v-for="item in hotData" :key="item.id">
<RouterLink to="/">
<img :src="item.picture" alt="" />
<p class="name">{{ item.title }}</p>
<p class="desc">{{ item.alt }}</p>
</RouterLink>
</li>
</ul>
......
// 先导入
import { useHot } from './service/useHot'
export default {
setup () {
// 固定写法
const { hotData } = useHot()
// 记得 return
return {
hotData
}
}