文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

script setup 语法的使用方法

2024-04-02 19:55

关注

这篇文章主要介绍“script setup 语法的使用方法”,在日常操作中,相信很多人在script setup 语法的使用方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”script setup 语法的使用方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

如果你最近使用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操作,例如:

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

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

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

<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个具体示例是:

这可以通过在 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 setup 语法的使用方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯