vue3的逻辑复用抽离

介绍:

在vue中,为了实现项目可维护性与复用的功能,会将代码单独分离出一个功能组件,但是vue2和vue3分离方式并不相同

vue2:

  • vue2不支持逻辑的抽离,如果想实现抽离必须要将所有html代码与逻辑代码全部抽离,会增加父子组件的通信成本,如果数据过多维护起来会比较头疼

vue3:

  • vue3支持逻辑的抽离,可以更好的增加项目的可维护性,由于抽离的只是逻辑代码 ,所以没有增加通信成本,就算数据再多,维护起来也非常方便
  • 而且vue3中的 setup 这个函数里面不应该出现大量的逻辑代码,不仅看起来不优美,而且维护起来也有些不方便
  • 在vue3中,一般会将抽离的逻辑代码放进service的文件夹中,然后在父组件中导入使用

 未分离写法:

  
    // 直接使用即可
  • {{ item.title }}

    {{ item.alt }}

...... // 导入 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

  
    // 直接使用即可
  • {{ item.title }}

    {{ item.alt }}

...... // 先导入 import { useHot } from './service/useHot' export default { setup () { // 固定写法 const { hotData } = useHot() // 记得 return return { hotData } }

你可能感兴趣的:(vue.js,javascript,前端)