里面的代码会被编译成组件setup()函数的内容。这意味着与普通的

import导入的内容也会以同样的方式暴露。意味着可以在模板表达式中直接使用导入的helper函数，并不需要通过methods选项来暴露它：

 
{{ capitalize('hello') }}

响应式

响应式状态需要明确使用响应式 API来创建。和从setup()函数中返回值一样，ref值在模板中使用的时候会自动解包：

 {{ count }} 

使用组件

将MyComponent看做被一个变量所引用。如果你使用过 JSX，在这里的使用它的心智模型是一样的。其kebab-case格式的同样能在模板中使用。不过，我们强烈建议使用PascalCase格式以保持一致性。同时也有助于区分原生的自定义元素。

动态组件

由于组件被引用为变量而不是作为字符串键来注册的，在

请注意组件是如何在三元表达式中被当做变量使用的。

递归组件

一个单文件组件可以通过它的文件名被其自己所引用。例如：名为FooBar.vue的组件可以在其模板中用引用它自己。

请注意这种方式相比于 import 导入的组件优先级更低。如果有命名的 import 导入和组件的推断名冲突了，可以使用 import 别名导入：

import { FooBar as FooBarChild } from './components'

命名空间组件

可以使用带点的组件标记，例如来引用嵌套在对象属性中的组件。这在需要从单个文件中导入多个组件的时候非常有用：

 label 

使用自定义指令

全局注册的自定义指令将以符合预期的方式工作，且本地注册的指令可以直接在模板中使用，就像上文所提及的组件一样。

但这里有一个需要注意的限制：必须以vNameOfDirective的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。

 
This is a Heading

defineProps 和 defineEmits

在

• defineProps和defineEmits都是只在

  当父组件通过模板ref的方式获取到当前组件的实例，获取到的实例会像这样{a: number, b: number}(ref会和在普通实例中一样被自动解包)

  
  

  useSlots 和 useAttrs

  在

  useSlots和useAttrs是真实的运行时函数，它会返回与setupContext.slots和setupContext.attrs等价的值，同样也能在普通的组合式 API 中使用。

  与普通的

  警告：该场景下不支持使用render函数。请使用一个普通的

  另外，await 的表达式会自动编译成在await之后保留当前组件实例上下文的格式。

  asyncsetup()必须与Suspense组合使用，Suspense目前还是处于实验阶段的特性。我们打算在将来的某个发布版本中开发完成并提供文档。

  
  

  仅限 TypeScript 的功能

  仅限类型的 props/emit 声明

  props和emits都可以使用传递字面量类型的纯类型语法做为参数给defineProps和defineEmits来声明：

  const props = defineProps()
  
  const emit = defineEmits()
  

  • defineProps或defineEmits只能是要么使用运行时声明，要么使用类型声明。同时使用两种声明方式会导致编译报错。

  • 使用类型声明的时候，静态分析会自动生成等效的运行时声明，以消除双重声明的需要并仍然确保正确的运行时行为。

    • 在开发环境下，编译器会试着从类型来推断对应的运行时验证。例如这里从foo: string类型中推断出foo: String。如果类型是对导入类型的引用，这里的推断结果会是foo: null(与any类型相等)，因为编译器没有外部文件的信息。
    • 在生产模式下，编译器会生成数组格式的声明来减少打包体积(这里的 props 会被编译成['foo','bar'])。
    • 生成的代码仍然是有着类型的 Typescript 代码，它会在后续的流程中被其它工具处理。

  • 截至目前，类型声明参数必须是以下内容之一，以确保正确的静态分析：

    • 类型字面量
    • 在同一文件中的接口或类型字面量的引用

    现在还不支持复杂的类型和从其它文件进行类型导入。理论上来说，将来是可能实现类型导入的。

  
  

  使用类型声明时的默认 props 值

  仅限类型的defineProps声明的不足之处在于，它没有可以给 props 提供默认值的方式。为了解决这个问题，提供了withDefaults编译器宏：

  interface Props {
      msg?: string
      labels?: string[]
  }
  
  const props = withDefaults(defineProps(), {
      msg: 'hello',
      labels: () => ['one', 'two']
  })
  

  上面代码会被编译为等价的运行时 props 的default选项。此外，withDefaults辅助函数提供了对默认值的类型检查，并确保返回的props的类型删除了已声明默认值的属性的可选标志。

  
  

  限制：没有 Src 导入

  由于模块执行语义的差异，中的代码依赖单文件组件的上下文。当将其移动到外部的.js或者.ts文件中的时候，对于开发者和工具来说都会感到混乱。因而不能和src attribute 一起使用。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com