Q1. Vue3 setup语法糖写法给组件添加name属性
- 新增一个
script标签，在这个script标签定义一个name属性（在 3.2.34 或以上的版本中，使用<script setup>的单文件组件会自动根据文件名生成对应的name选项，无需再手动声明。Link）- 使用
unplugin-vue-define-option插件- 使用
vite-plugin-vue-setup-extend插件
Q2. 官方文档中defineProps和defineEmitsAPI可以直接使用，但eslint可能报错
// .eslintrc.cjs文件中增加
module.exports = {
// ...
env: {
node: true,
'vue/setup-compiler-macros': true
},
// ...
}关于配置文件是
.cjs而不是.js的补充说明
>* 因为项目被定义为ESM，eslint --init会自动识别为type，并生成兼容的配置文件名称 >* 如果改回.js结尾，再运行eslint会报错，出现这个问题是eslint内部使用了require()语法读取配置 >* ESM（EcmaScript Module）规范需要在package.json文件里设置"type": "module"
Q3. 选项式api与组合式api
- 选项式api就是用包含多个选项的对象来描述组件的逻辑，比收说，data，methods，mounted，updated等等。在这些选项内定义的属性都会暴露在函数内部的this上，其中的this会指向组件实例
- 组合式api与选项式api不同，他通常会跟
<script setup>一起搭配使用，并且组合式api的可复用性比选项式api要好很多，所以，组合式api适合使用在那些大型项目中，代码的灵活性也比较高，而选项式api对于初学者来说更加友好
Q4. ref 和 reactive 使用选择
reactive可以转换对象成为响应式数据对象，但是不支持简单数据类型
ref可以转换简单数据类型为响应式数据对象，也可以支持复杂数据类型，但是操作的时候需要使用到.value
如果确定数据类型是对象，且字段和名称也确定，可以使用reactive转换成响应式数据，其他都使用ref