vue3的script setup特性

本文主要是讲解 

• 在 3.0.0-beta.21 版本中增加了 

  2、优势

  与组件选项 setup 函数对比， 

  若需要使用 TypeScript，则将 lang 属性添加到 

  注意：

  • 每个 *.vue 文件最多可同时包含一个 

    TS 版本：

    从代码中可以发现 TS 写法里 props 没有定义默认值。

    Vue3 为我们提供了 withDefaults 这个编译器宏，给 props 提供默认值。

    一个需要注意的地方：在顶层声明一个和props的属性同名的变量，会有些问题。

    所以，和组件选项一样，不要定义和 props 的属性同名的顶层变量。

    5.2 defineEmits

    一样的，在 

    使用组件：

    TS 版本：

    // ./components/HelloWorld.vue
    
    
    
    
    

    使用组件：

    5.3 defineExpose

    在 Vue3 中，默认不会暴露任何在 

    使用组件：

    TS 版本：

    // ./components/HelloWorld.vue
    
    
    
    
    

    使用组件：

    6、辅助函数

    在 

    // ./components/HelloWorld.vue
    
    
    
    
    

    6.2 useSlots

    在模板中使用 $slots 来访问 slots 数据。

    在 

    6.3 useCssModule

    在 Vue3 中，也是支持 CSS Modules 的，在 

    注意，同名的CSS Module，后面的会覆盖前面的。

    7、使用组件

    在组件选项中，模板需要使用组件（除了全局组件），需要在 components 选项中注册。

    而在 

    8、组件name

    使用：

    注意：如果你设置了 lang 属性，

    ./components/HelloWorld.vue

    10、顶层await支持

    注意：async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性，其 API 可能随时会发生变动，建议暂时不要使用。

    11、命名空间组件

    在 vue3 中，我们可以使用点语法来使用挂载在一个对象上的组件。

    // components/Form/index.js
    import Form from './Form.vue'
    import Input from './Input.vue'
    import Label from './Label.vue'
    // 把Input、Label组件挂载到 Form 组件上
    Form.Input = Input
    Form.Label = Label
    
    
    export default Form
    

    // 使用：
    
    
    
    
    

    命名空间组件在另外一种场景中的使用，从单个文件中导入多个组件时：

    // FormComponents/index.js
    import Input from './Input.vue'
    import Label from './Label.vue'
    
    
    export default {
        Input,
        Label,
    }
    

    // 使用
    
    
    
    
    

    12、状态驱动的动态css

    Vue3 中 

    13、指令

    全局指令：

    自定义指令：

    导入的指令：

    更多关于指令，见官方文档

    14、Composition Api类型约束

    总结

    此语法诸多的特性，使单个文件组件更简单！只需要给 script 标签添加一个 setup 属性，那么整个 script 就直接会变成setup函数，所有顶级变量、函数，均会自动暴露给模板使用（无需再一个个 return了），开发效率将大大的提高！