1.出现背景

2.defineOptions

2.1 作用

当使用setup语法糖后，它把很多东西都隐藏起来了，让你不需要手动写 export default(Vue2) 或者 setup() 原生函数，但是其它组件选项对象需要 export default 存在才能添加。defineOptions用于在单文件组件（SFC）中声明组件选项。

2.2 示例

2.2.1 Vue2中的写法，设置一些组件级别的选项(name、inheritAttrs...)

<script>
export default {
  name: 'MyComponent',
  inheritAttrs: false,
}
</script>

<script setup>
// 逻辑代码
</script>

2.2.2 Vue3中的写法，使用defineOptions

<script setup>
defineOptions({
  name: 'MyComponent',
  inheritAttrs: false,
})
</script>


<script setup>
// 这是错误的写法
  name: 'MyComponent',
  inheritAttrs: false,
</script>

3.defineModel

3.1 作用

组件在使用v-model绑定时，子组件只需要使用defineModel既可直接在子组件中双向修改，用来简化组件v-model双向绑定的代码。

3.2 示例

3.2.1 传统写法：子组件props手动接收父组件传递过来的数据，然后通过emit再将数据传递回去。

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

<!-- 父组件 -->
<Child v-model="text" />

3.2.2 使用defineModel

<script setup>
const modelValue = defineModel()   // 自动生成 prop + emit，这是一个ref
</script>

<template>
  <input v-model="modelValue" /> <!-- 即可像使用本地变量一样使用modelValue -->
</template>