Vue 写法规范

SFC顺序

script

import 导入语句
- 建议按照以下依赖顺序:
  1. vue
  2. vue-router
  3. pinia
  4. @vueuse/core
  5. UI库
  6. 其他依赖
  7. 项目内部依赖(monorepo)
  8. 别名导入
  9. 相对路径导入
- 类型单独使用 import type 导入，并在相同依赖的下面
  例如：
  ts
```
import { ref } from 'vue';
import type { Ref } from 'vue';
```
defineOptions

Props 类型定义

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

defineProps

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

Emits 类型定义

interface Emits {
  emit1: (arg1: string) => void;
  emit2: (arg1: number) => void;
}

// 或者
interface Emits {
  emit1: [arg1: string];
  emit2: [arg1: number];
}

defineEmits

defineEmits();
const emit = defineEmits(); // 用到emit时

导入的hooks函数

例如：useRouter, useRoute, 以及自行封装的hooks

const router = useRouter();
const route = useRoute();
const appStore = useAppStore();
const { loading, startLoading, endLoading } = useLoading();

组件逻辑定义

const count = ref(0);
const increment = () => {
  count.value++;
};

const visible = ref(false);
const toggleVisible = () => {
  visible.value = !visible.value;
};

必要的init函数，所有的初始化逻辑都放在这里
ts
```
async function init() {
  await fetchData();
}
```

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);

Vue 写法规范 ​

SFC顺序 ​

script ​

Vue 写法规范

SFC顺序

script