Vue 写法规范

下面的大纲为 Vue 组件的推荐写入顺序。

import 导入顺序

建议按照以下依赖顺序：

1. 先引入所有 type 类型（按照导入规范顺序引入，不允许类型和函数的引入混杂在一起）
2. 引入第三方依赖（Vue 相关生态优先，如 vue、vue-router、pinia、vue-i18n、@vueuse，然后是组件库如 ElementPlus，@element-plus/icons-vue，最后是第三方插件）
3. 引入项目目录的其他依赖（如 @/composables，路径按照目录结构顺序引入）
4. 引入项目目录的其他组件（如 @/components/index.vue，路径按照目录结构顺序引入）
5. 引入相对路径的依赖（如 ./types）
6. 引入相对路径的组件（如 ./Demo.vue）
7. 直接引入第三方库（如 import "vue-cropper/dist/index.css"）
8. 直接引入绝对路径（如 import "@/common/styles/common/var.scss"）
9. 直接引入相对路径（如 import "./index.scss"）

如：

<script setup lang="ts">
import type { xx } from "xx";
import { xx } from "xx";
import { xx } from "@/xx";
import { xx } from "@/xx.vue";
import { xx } from "../xx";
import { xx } from "../xx.vue";

import "xxx";
import "@/xxx";
import "./xxx";
</script>

Props 类型定义

使用 TypeScript 语法：

interface Props {
  prop1: string;
  prop2: number;
}

defineProps<Props>();
const props = defineProps<Props>(); // 用到 props 时

Emits 类型定义

使用 TypeScript 语法：

interface Emits {
  emit1: [];
  emit2: [arg1: string, arg2: number];
}

defineEmits<Emits>();
const emit = defineEmits<Emits>(); // 用到 emit 时

导入组合式函数

例如：useRouter，useRoute, 以及自行封装的组合式函数

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

const { loading, startLoading, endLoading } = useLoading();

自定义组合式函数

首先不建议按照 ref、computed、watch 等方式自上而下写逻辑，而是将各自的逻辑封装成组合式函数

推荐

const { count, ratio, increase } = useCount();
const { http, request } = useRequest();

function useCount() {
  const count = ref(0);

  const ratio = computed(() => count.value / 100);

  function increase() {
    count.value++;
  }

  return {
    count,
    ratio,
    increase,
  };
}

function useRequest() {
  const http = useHttp();

  watch(http.state, () => {
    console.log(http.state);
  });

  function request(url: string) {
    return (data = http.get(url));
  }

  return {
    http,
    request,
  };
}

不推荐

const count = ref(0);

const ratio = computed(() => count.value / 100);

const http = useHttp();

function increase() {
  count.value++;
}

function request(url: string) {
  return (data = http.get(url));
}

watch(http.state, () => {
  console.log(http.state);
});

自定义函数

const init = () => {};

const handleClick = () => {};

watch 和 watchEffect

watchEffect(() => {
  console.log(count.value);
});

watch(
  () => count.value,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  }
);

生命周期钩子

// 相当于在 `created` 钩子中执行
init();

// 或者
onMounted(() => {
  init();
});

defineExpose

const exposed = {
  count,
  increment,
};

defineExpose(exposed);