介绍一下 Vue Conf 21 大会上:尤大提到 script setup 语法!

开发 前端
script setup类型是Vue的Git RFC中的建议。需要明确的是,这并不是要完全替代任何当前写法。其目的是为开发人员提供更简洁的语法,以编写其单个文件组件。

[[401129]]

 如果你最近使用Vite和Vue3工作,你会注意到,在 Vue 组件中会使用这种<srcript>语法。

  1. <script setup> 
  2. import HelloWorld from './components/HelloWorld.vue' 
  3. // 这个模板使用的是Vue3实验性`<script setup>` SFCs 

你可能会有疑惑三连,“这是什么鬼?这是 Options API ?还是 Composition API?setup方法又在哪里?”

<script setup>类型是Vue的Git RFC中的建议。需要明确的是,这并不是要完全替代任何当前写法。其目的是为开发人员提供更简洁的语法,以编写其单个文件组件。

在本文中,我们仔细研究它的工作原理以及一些有用的方法。

script setup

在<script setup>中,我们不必声明export default和setup方法,这种写法会自动将所有顶级变量声明公开给模板(template)使用。

在 Composition API 中,我们习惯创建setup方法,然后返回我们想要公开东西,如下所示:

  1. <script> 
  2. import { ref, computed } from 'vue' 
  3. export default { 
  4.    setup () { 
  5.       const a = ref(3) 
  6.       const b = computed(() => a.value + 2) 
  7.        
  8.       const changeA = () => { a.value = 4 } 
  9.       return { a, b, changeA } // have to return everything!  
  10.    } 
  11. </script> 

如果使用 <script setup> 语法,我们可以用下面的代码来实现与上面的一样功能:

  1. <script setup> 
  2. import { ref, computed } from 'vue' 
  3. // all of these are automatically bound to the template 
  4. const a = ref(3) 
  5. const b = computed(() => a.value + 2) 
  6.        
  7. const changeA = () => { a.value = 4 }  
  8. </script> 

不仅是数据,计算的属性和方法,甚至是指令和组件也可以在我们的template中自动获得。

  1. <template> 
  2.      <component-b /> 
  3. </template> 
  4. <script setup> 
  5. import ComponentB from './components/ComponentB.vue' // really that's it! 
  6. </script> 

这个很魔法。

那么,这有什么意义呢?

长话短说,此语法使单个文件组件更简单。

用RFC的里的原话来说,“该提案的主要目标是通过将<script setup>的上下文直接暴露给模板来减少SFC内部 Composition API 使用的冗长性。”

这就是我们刚刚看到的,无需关心在setup方法返回的值(因为有时应该会忘记在 setup 返回我们需要的值,导致模板获取不到对应的值),我们可以简化代码。

<script setup>的更高级用法

现在我们知道<script setup>到底是什么,以及为什么它有用,接着,我们看一下它的一些更高级的功能。

访问 props, emit 事件 等
首先,你可能想知道如何执行标准的Vue操作,例如:

  • 访问 props
  • 怎么发出自定义事件
  • 访问上下文对象

在Composition API中,这些放在了setup 方法中的参数

  1. setup (props, context) { 
  2.     // context has attrs, slots, and emit 

但是,在script setup语法中,我们可以通过从Vue导入3次对应的 API 来访问这些相同的选项。

  • defineProps – 顾名思义,它允许我们为组件定义 props
  • defineEmits – 定义组件可以发出的事件
  • useContext – 可以访问组件的槽和属性
  1. <template> 
  2.  <button @click="$emit('change')"> Click Me </button> 
  3. </template> 
  4. <script setup> 
  5.   import { defineProps, defineEmit, useContext } from 'vue' 
  6.  
  7.   const props = defineProps({ 
  8.     foo: String, 
  9.   }) 
  10.   const emit = defineEmit(['change''delete']) 
  11.  
  12.   const { slots, attrs } = useContext() 
  13.    
  14. </script> 

通过这3种导入,我们可以获得传统设置方法所惯用的功能。

创建异步 setup 方法

script setup语法的另一个很酷的功能是创建异步setup非常容易。

这对于在创建组件时加载api,甚至将代码绑定到<suspense>功能很有用。

我们所要做的就是让我们的 setup函数是异步的,在我们的script setup中使用一个顶级的await。

例如,如果我们使用的是Fetch API,我们可以像这样使用await

  1. <script setup>    
  2.    const post = await fetch(`/api/pics`).then((a) => a.json()) 
  3. </script> 

这样setup()函数将是异步的。

使用<script setup>和一个普通的<script>

<script setup>为其顶级绑定创建自己的脚本作用域。但是在某些情况下,必须在模块范围内执行代码。

该RFC中的2个具体示例是:

  • Declaring named exports
  • 创建仅执行一次的全局副作用

这可以通过在 script setup 旁边添加一个普通的<script>块来完成,如下所示。

  1. <script> 
  2.   performGlobalSideEffect() 
  3.  
  4.   // this can be imported as `import { named } from './*.vue'
  5.   export const named = 1 
  6. </script> 
  7.  
  8. <script setup> 
  9.   // code here 
  10. </script> 

总结

目前,这个 script setut是可选的,所以如果你想尝试它,只需在的script标签中添加setup。

要了解有关 script setup的更多信息,请点击此处,链接到完整的RFC及其动机,确切的语法和更多的技术实现。

作者:Matt Maribojoc 译者:前端小智 来源:stackabuse
原文:https://learvue.co/2021/05/explaining-the-ne-script-setup-type-in-vue-3-major-takeaways-from-the-rfc/

 

责任编辑:姜华 来源: 大迁世界
相关推荐

2009-10-16 11:23:53

2011-05-11 13:42:18

谷歌开发者大会谷歌

2010-10-21 16:04:19

RSA大会江永清

2016-12-01 08:00:11

微软技术大会

2014-02-11 09:13:00

华为MWC智能手表

2011-02-18 09:22:11

2016-10-13 11:23:07

阿里云云栖大会云计算

2015-05-05 09:15:08

微软首届Ignite大会

2009-04-22 14:08:12

2012-03-01 11:18:02

2016-10-13 16:10:55

网盘

2021-08-06 09:31:30

Black Hat网络安全威胁情报

2014-07-01 17:16:36

2014-09-12 15:27:48

2023-11-13 09:11:22

GitHub人工智能代码

2009-09-09 09:47:58

Silverlight

2019-09-29 09:30:04

数字经济逻辑

2009-03-19 15:44:37

Sun开源云计算

2017-02-09 13:41:08

2014-08-05 16:32:50

点赞
收藏

51CTO技术栈公众号