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事件：

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

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

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]
}>()