vue3.0规范学习记录

组合式函数使用use+name进行命名，例如useMouse；

自定义指令使用v + name进行命名，例如vFocus；

在组件使用v-model实现“双向绑定”时，子组件默认通过emits(‘update:modelValue’, params)触发更新；

setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

1. 需要在非单文件组件中使用组合式 API 时。
2. 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时.

对于结合单文件组件使用的组合式 API，推荐通过 <script setup> 以获得更加简洁及符合人体工程学的语法。

通过PascalCase（大驼峰）格式引入组件，模板也使用PascalCase（大驼峰）；

import MyInput from '../component/MyInput.vue'
// 模板
<MyInput />

defineProps 和 defineEmits 都是只能在<script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉;

单文件组件<script setup>语法，接收props值：

• 非TS组件：props接收参数时使用defineProps，如下：

<script setup lang="ts">
import { defineProps } from "vue";
const props = defineProps({
  name: {
    type: String,
    default: "张三"
  },
  labels: {
    type: Array,
    default: () => ["姓名", "年龄"]
  }
});
</script>

<template>
  <div>{{ props.name }}</div>
  <div>{{ props.labels }}</div>
</template>

• TS组件：使用接口 + defineProps声明，如需设置默认值，使用withDefaults编译器宏，如下：

interface Props {
	msg: string,
	labels?: string []
}
const props = withDefaults(defineProps<Props>(), {
	msg: "特点",
	labels: () => ["上进", "应变能力不错"]
})

单文件组件<script setup>语法，声明emit事件：

1. 非TS：使用defineEmits声明，如下：

const emits = defineEmits(["input", "change"])
emits('input')

2. TS：使用接口+defineEmits声明，如下：

interface Emits {
	(e: 'change', id: number): void,
	(e: 'update', value: string): void
}
const emits = defineEmits<Emits>()
emits('change', 1)

// 3.3+：另一种更简洁的语法
const emit = defineEmits<{
  change: [id: number] // 具名元组语法
  update: [value: string]
}>()