vue3的script-setup新特性如何进行高效开发
在 Vue 3.0 的 .vue 组件里,遵循 SFC 规范要求(注:SFC,即 Single-File Component,.vue 单组件),标准的 setup 用法是,在 setup 里面定义的数据如果需要在 template 使用,都需要 return 出来。
如果你使用的是 TypeScript ,还需要借助 defineComponent 来帮助你对类型的自动推导。
<!-- 标准组件格式 --> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ setup () { // ... return { // ... } } }) </script>
script-setup 的推出是为了让熟悉 3.0 的用户可以更高效率的开发组件,只需要给 script 标签添加一个 setup 属性,那么整个 script 就直接会变成 setup 函数,所有顶级变量、函数,均会自动暴露给模板使用(无需再一个个 return 了)。
Vue 会通过单组件编译器,在编译的时候将其处理回标准组件,所以目前这个方案只适合用 .vue 文件写的工程化项目。
<!-- 使用 script-setup 格式 --> <script setup lang="ts"> // ... </script>
下面来具体说一说对template的操作简化
1、变量无需进行return
标准组件模式下,setup 里定义的变量,需要 return 后,在 template 部分才可以正确拿到:
<!-- 标准组件格式 --> <template> <p>{{ msg }}</p> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ setup () { const msg: string = 'Hello World!'; // 要给 template 用的数据需要 return 出来才可以 return { msg } } }) </script>
在 script-setup 模式下,你定义了就可以直接使用。
<!-- 使用 script-setup 格式 --> <template> <p>{{ msg }}</p> </template> <script setup lang="ts"> const msg: string = 'Hello World!'; </script>
2、子组件无需注册
子组件的挂载,在标准组件里的写法是需要 import 后再放到 components 里才能够启用:
<!-- 标准组件格式 --> <template> <Child /> </template> <script lang="ts"> import { defineComponent } from 'vue' // 导入子组件 import Child from '@cp/Child.vue' export default defineComponent({ // 需要启用子组件作为模板 components: { Child }, // 组件里的业务代码 setup () { // ... } }) </script>
在 script-setup 模式下,只需要导入组件即可,编译器会自动识别并启用。
<!-- 使用 script-setup 格式 -->
<template>
<Child />
</template>
<script setup lang="ts">
import Child from '@cp/Child.vue'
</script>