vue3的逻辑复用抽离

77 阅读 0 评论 51 点赞

我是靠谱客的博主执着花卷，最近开发中收集的这篇文章主要介绍vue3的逻辑复用抽离，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

介绍：

在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
    }
  }