Vue组件中提取data函数可复用逻辑，除mixin外有哪些更优方案？

以下是几种比Mixin更易维护、更灵活的实现方案，可根据你当前的技术栈版本选择： #

1. Composition API（Vue 3 / Vue 2.7 优先推荐） #

这是目前官方首推的逻辑复用方案，彻底解决了Mixin存在的命名冲突、依赖来源不透明、不可 tree-shaking 等问题，你可以把通用的结构和逻辑封装成独立的组合式函数：

// 封装通用逻辑的组合式函数 composables/usePageCommon.js
import { reactive } from 'vue'
export function usePageCommon(customConfig = {}) {
  // 合并通用基础结构和组件传入的自定义配置
  const tableInfo = reactive(Object.assign({
    headers: [],
    contents: [],
    pagination: { page: 1, pageSize: 10, total: 0 }
  }, customConfig.tableInfo))
  const url = reactive(Object.assign({
    searchUri: '',
    detailsUri: ''
  }, customConfig.url))
  const searchInfo = reactive(Object.assign({
    label: '',
    searchText: ''
  }, customConfig.searchInfo))
  // 还可以封装通用的搜索、分页切换等公共方法
  const handleSearch = () => {
    // 通用搜索请求逻辑
  }
  return {
    tableInfo,
    url,
    searchInfo,
    handleSearch
  }
}

业务组件中直接引入使用即可：

// 业务组件代码
import { usePageCommon } from '@/composables/usePageCommon'
export default defineComponent({
  setup() {
    // 仅传入当前组件特有的配置项，通用结构会自动继承
    const { tableInfo, url, searchInfo, handleSearch } = usePageCommon({
      url: {
        searchUri: '/api/menu/list',
        detailsUri: '/api/menu/detail'
      },
      tableInfo: {
        headers: ['菜单名称', '权限标识', '创建时间']
      }
    })
    // 定义组件自身独有的变量和逻辑
    const customFlag = ref(false)
    return {
      tableInfo,
      url,
      searchInfo,
      handleSearch,
      customFlag
    }
  }
})

2. extends 基础组件继承（Vue 2 旧版本适用） #

如果仍在使用不支持Composition API的低版本Vue，可以用extends配置项替代Mixin，它的继承逻辑更清晰，优先级高于Mixin，适合选项式API的逻辑复用：

// 抽离的公共基础组件 BasePage.js
export default {
  data() {
    return {
      tableInfo: {
        headers: [],
        contents: [],
        pagination: { page: 1, pageSize: 10, total: 0 }
      },
      url: {
        searchUri: '',
        detailsUri: ''
      },
      searchInfo: {
        label: '',
        searchText: ''
      }
    }
  },
  methods: {
    handleSearch() {
      // 通用搜索逻辑
    }
  }
}

业务组件继承基础组件后，直接覆盖或扩展特有配置即可：

// 业务组件代码
import BasePage from './BasePage'
export default {
  extends: BasePage,
  data() {
    return {
      // 组件自有特有变量
      customVar: ''
    }
  },
  created() {
    // 覆盖通用配置为当前组件的专属值
    this.url.searchUri = '/api/menu/list'
    this.tableInfo.headers = ['菜单名称', '权限标识', '创建时间']
  }
}

3. 其他可选方案 #

• 高阶组件（HOC）：将通用逻辑封装在高阶组件中，接收业务组件作为参数返回增强后的组件，适合需要统一封装页面布局、权限校验等外层逻辑的场景
• Provide/Inject 依赖注入：如果通用结构需要跨多层子组件共享，可以在页面根节点Provide通用配置，后代组件直接Inject使用，无需逐层透传

方案选择建议 #

• 优先选Composition API方案，灵活性、可维护性最高，完全规避Mixin的所有缺点
• 低版本Vue2环境优先选extends方案，比多Mixin的维护成本低
• 跨层级共享通用逻辑选Provide/Inject
• 需要统一封装页面外壳逻辑选HOC方案

内容的提问来源于stack exchange，提问作者learningMonk