乐趣区

关于前端:介绍一下-Vue-Conf-21-大会上尤大提到-script-setup-语法

jiezi

作者：Matt Maribojoc
译者：前端小智
起源：stackabuse

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

如果你最近应用 Vite 和 Vue3 工作，你会留神到，在 Vue 组件中会应用这种 <srcript> 语法。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
// 这个模板应用的是 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 办法，而后返回咱们想要公开货色，如下所示：

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

如果应用 <script setup> 语法，咱们能够用上面的代码来实现与下面的一样性能：


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

不仅是数据，计算的属性和办法，甚至是指令和组件也能够在咱们的 template 中主动取得。

<template>
     <component-b />
</template>
<script setup>
import ComponentB from './components/ComponentB.vue' // really that's it!
</script>

这个很魔法。

那么，这有什么意义呢？

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

用 RFC 的里的原话来说，“该提案的次要指标是通过将 <script setup> 的上下文间接裸露给模板来缩小 SFC 外部 Composition API 应用的简短性。”

这就是咱们刚刚看到的，无需关怀在 setup 办法返回的值(因为有时应该会遗记在 setup 返回咱们须要的值，导致模板获取不到对应的值)，咱们能够简化代码。

<script setup>的更高级用法

当初咱们晓得 <script setup> 到底是什么，以及为什么它有用，接着，咱们看一下它的一些更高级的性能。

拜访 props, emit 事件 等

首先，你可能想晓得如何执行规范的 Vue 操作，例如：

  • 拜访 props
  • 怎么收回自定义事件
  • 拜访上下文对象

在 Composition API 中，这些放在了setup 办法中的参数

setup (props, context) {// context has attrs, slots, and emit}

然而，在 script setup 语法中，咱们能够通过从 Vue 导入 3 次对应的 API 来拜访这些雷同的选项。

  • defineProps – 顾名思义，它容许咱们为组件定义 props
  • defineEmits – 定义组件能够收回的事件
  • useContext – 能够拜访组件的槽和属性
<template>
 <button @click="$emit('change')"> Click Me </button>
</template>
<script setup>
  import {defineProps, defineEmit, useContext} from 'vue'

  const props = defineProps({foo: String,})
  const emit = defineEmit(['change', 'delete'])

  const {slots, attrs} = useContext()
  
</script>

通过这 3 种导入，咱们能够取得传统设置办法所习用的性能。

创立异步 setup 办法

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

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

咱们所要做的就是让咱们的 setup函数是异步的，在咱们的 script setup 中应用一个顶级的await。

例如，如果咱们应用的是 Fetch API，咱们能够像这样应用await

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

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

应用 <script setup> 和一个一般的<script>

<script setup>为其顶级绑定创立本人的脚本作用域。然而在某些状况下，必须在模块范畴内执行代码。

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

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

这能够通过在 script setup 旁边增加一个一般的 <script> 块来实现，如下所示。

<script>
  performGlobalSideEffect()

  // this can be imported as `import {named} from './*.vue'`
  export const named = 1
</script>

<script setup>
  // code here
</script>

总结

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

要理解无关 script setup的更多信息，请点击此处，链接到残缺的 RFC 及其动机，确切的语法和更多的技术实现。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://learvue.co/2021/05/ex…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版