vue3: setup语法糖

官网链接

1. setup中声明的任何顶级绑定（变量和导入）都可以在模板中直接使用

2. 组件和动态组件

setup范围内的值也可以直接用作自定义组件标记名
setup中使用动态组件时，我们应该使用dynamic:is绑定

3. 指令

注册指令，需要以小写v开头。详情请看上面官网链接

5. 使用props

const props = defineProps<{msg: string}>()

<template>
  <h1 ref="title">
    {{ props.msg }}
  </h1>
</template>

3. 给props设置默认值

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello'
})

4. 使用事件
   
5. 在不导入defineEmits等方法时，eslint要是报错可以加上这一段代码
   

  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  }

6. slots和attrs
   

7. 顶层中使用await ，内部会自动为setup加上async

8. 与普通的script一起使用。只有在按需导出时才被使用

9. 定义选项api

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

<script setup>
  // script setup logic
</script>

10. 缺点

volar插件已经支持这种语法
更多的缺点可以看文档