--- theme: awesome-green --- # 1. 前言本文主要是讲解 ` ``` - 在 **3.0.0-beta.21** 版本中增加了 ` ``` ## 1.2. 优势与组件选项 `setup` 函数对比， ` ``` 若需要使用 `TypeScript`，则将 `lang` 属性添加到 ` ``` ` ``` 注意： - 每个 `*.vue` 文件最多可同时包含一个 ` ``` TS 版本： ```html ``` 从代码中可以发现 `TS` 写法里 `props` 没有定义默认值。 `Vue3` 为我们提供了 `withDefaults` 这个编译器宏，给 `props` 提供默认值。 ```html ``` 一个需要注意的地方：在顶层声明一个和`props`的属性同名的变量，会有些问题。 ```html ``` 所以，和组件选项一样，不要定义和 `props` 的属性同名的顶层变量。 ### defineEmits 一样的，在 ` ``` 使用组件： ```html ``` TS 版本： ```html // ./components/HelloWorld.vue ``` 使用组件： ```html ``` ### defineExpose 在 `Vue3 `中，默认不会暴露任何在 ` ``` 使用组件： ```html ``` TS 版本： ```html // ./components/HelloWorld.vue ``` 使用组件： ```html ``` ## 2.4. 辅助函数在 ` ``` ```html // ./components/HelloWorld.vue ``` ### useSlots 在模板中使用 `$slots` 来访问 `slots` 数据。在 ` ``` ```html ``` ### useCssModule 在 `Vue3` 中，也是支持 `CSS Modules` 的，在 ` ``` 注意，同名的CSS Module，后面的会覆盖前面的。 ## 2.5. 使用组件在组件选项中，模板需要使用组件（除了全局组件），需要在 `components` 选项中注册。而在 ` ``` ## 2.6. 设置组件 name ` ``` 使用： ```html ``` 注意：如果你设置了 `lang` 属性，` ``` ./components/HelloWorld.vue ```html ``` ## 2.8. 顶层await支持 ` ``` 注意：`async setup()` 必须与 `Suspense` 组合使用，`Suspense` 目前还是处于实验阶段的特性，其 API 可能随时会发生变动，建议暂时不要使用。 ## 2.9. 命名空间组件在 `vue3` 中，我们可以使用点语法来使用挂载在一个对象上的组件。 ```javascript // 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 ``` ```html // 使用： ``` 命名空间组件在另外一种场景中的使用，从单个文件中导入多个组件时： ```javascript // FormComponents/index.js import Input from './Input.vue' import Label from './Label.vue' export default { Input, Label, } ``` ```html // 使用 ``` ## 2.10. 状态驱动的动态 CSS `Vue3` 中 ` ``` ## 2.11. 使用指令全局指令： ```html ``` 自定义指令： ```html ``` 导入的指令： ```html ``` 更多关于指令，见官方文档(https://v3.cn.vuejs.org/guide/custom-directive.html#%E7%AE%80%E4%BB%8B、https://v3.cn.vuejs.org/api/application-api.html#directive)。 ## 2.12. Composition Api 类型约束 ```html ``` ## 2.13. 获取组件实例在 `vue2` 中，我们用 `this` 访问组件的实例，在 `vue3` 的 `setup()` 选项或 ` ``` 注意： - 请**不要**把它当作在组合式 API 中获取 `this` 的替代方案来使用。 - `getCurrentInstance` **只能**在 `setup` 或生命周期钩子中调用。 # 3. 参考文档 - [sfc-script-setup](https://v3.cn.vuejs.org/api/sfc-script-setup.html)

{{ msg }}

{{ msg }}

{{ msg }}

{{ msg }}

{{ getToken() }}

{{ msg }}

{{ msg }}

{{ msg }}

{{ msg }}

{{ msg }}

{{ msg }}

{{ msg }}