关于import的使用方式

Question

整体引入

api.js
export default {
    getUserName() {},
    getUserAge() {}
}

a.js
import api from './api'
api.getUserName()

单独引入方法

api.js
export const getUserName = () => {}
export const getUserAge = () => {}

a.js
import {getUserName} from './api'
getUserName()

上面两种方式有性能差异吗？更推荐哪种？

Answer 1

性能方面没什么差异，代码量会有差异。
如果你的api有好几十个，某个地方却只用到其中一两个。第一种方式就是全导进来了，第二种方式按需引入，显然第二种代码冗余度更低。
更推荐哪种还是得看具体情况的，一般单独引用即可，但有些有关联的方法放一起第一种导入更方便，比如许多后台管理系统有增删改查，默认导出很方便引入。

const base = '/api/v1/project';

export default {
  getList: params => axios.get(`${base}`, { params: params }),
  getDetail: id => axios.get(`${base}/${id}`),
  delete: id => axios.delete(`${base}/${id}`),
  add: params => axios.post(`${base}`, params),
  update: params => axios.put(`${base}/${params.id}`, params),
};


import projectModel from '@/api/project';

Answer 2

参考阮一峰的：https://github.com/ruanyf/es6...

写的十分详细