vue3 中的script setup

script setup

当我们需要引入一个 components 时，不仅需要在文件头部显式 import 进行导入，而且需要 components 字段加入声明。不仅如此，在 setup 中声明的变量如果需要被模板使用，那么需要在 setup 的尾部显式 return 返回，如果你的组件模板使用的变量不多，那么这种情况还可以勉强接受。但是当变量和方法逐渐增加时，每次都要在 setup 后进行 return 返回，这无疑是一件枯燥的事情，在重构代码时，你也会面临巨大挑战。

为了解决这个问题，vue3添加了script setup语法糖提案。

使用了

不仅是数据，计算的属性和方法，甚至是指令和组件也可以在我们的template中自动获得，这个就很魔法

使用它的意义又在哪呢？

长话短说，此语法使单个文件组件更简单。
用RFC的里的原话来说，“该提案的主要目标是通过将

省去了组件的注册步骤，也没有显式的导出变量的动作。

使用props & emit & useContext

• props 需要使用到 defineProps 来定义，用法跟之前的props写法类似

• emit 使用 defineEmit 定义组件可以发出的事件

• useContext 访问组件的槽和属性

• defineProps/defineEmit 会根据传递的值做简单的类型推断

defineProps – 顾名思义，它允许我们为组件定义props；

defineEmits – 定义组件可以发出的事件

useContext – 可以访问组件的槽和属性

指令

指令跟组件是一样导入就自动注册。

inheritAttrs

默认值true,在这种情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上

await

如果使用了 await 那么 需要 与 Suspense 异步组件 搭配使用

/* 父组件 */

   
   

vscode配套插件使用

volar是一个vscode插件，用来增强vue编写体验，使用volar插件可以获得script setup语法的最佳支持。

要了解有关 script setup 的更多信息请点击 ?? 这是个链接