Vue3 的 script setup 语法糖是真的的香,学习使我进步

还记得刚体验 script setup 语法糖的时候,编辑器提示我这是一个实验性的提案,要使用的话,需要固定 Vue 版本。

而在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,你可以继续使用但仍会有实验性提案的提示,在 v3.2 中,才会去除提示并移除一些废弃的 API。

script setup 是个啥?

它是 Vue3 的一个新语法糖,在 setup 函数中。所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 setup() 返回对象中。相对于之前的写法,使用后,语法也变得更简单。

使用方式极其简单,仅需要在 script 标签加上 setup 关键字即可。示例:

<script setup></script>
<span class="copy-code-btn">复制代码</span>

组件自动注册

在 script setup 中,引入的组件可以直接使用,无需再通过components进行注册,并且无法指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。示例:

<template>
    <Child />
</template>

<script setup>
import Child from './Child.vue'
</script>
复制代码

如果需要定义类似 name 的属性,可以再加个平级的 script 标签,在里面实现即可。

组件核心 API 的使用

使用 props

通过defineProps指定当前 props 类型,获得上下文的props对象。示例:

<script setup>
  import { defineProps } from 'vue'

  const props = defineProps({
    title: String,
  })
</script>
复制代码

使用 emits

使用defineEmit定义当前组件含有的事件,并通过返回的上下文去执行 emit。示例:

<script setup>
  import { defineEmits } from 'vue'

  const emit = defineEmits(['change', 'delete'])
</script>
复制代码

获取 slots 和 attrs

可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后,废除了这个语法,被拆分成了useAttrsuseSlots。示例:

// 旧
<script setup>
  import { useContext } from 'vue'

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

// 新
<script setup>
  import { useAttrs, useSlots } from 'vue'

  const attrs = useAttrs()
  const slots = useSlots()
</script>
复制代码

defineExpose API

传统的写法,我们可以在父组件中,通过 ref 实例的方式去访问子组件的内容,但在 script setup 中,该方法就不能用了,setup 相当于是一个闭包,除了内部的 template模板,谁都不能访问内部的数据和方法。

如果需要对外暴露 setup 中的数据和方法,需要使用 defineExpose API。示例:

<script setup>
    import { defineExpose } from 'vue'
    const a = 1
    const b = 2
    defineExpose({
        a
    })
</script>
<span class="copy-code-btn">复制代码</span>

属性和方法无需返回,直接使用!

这可能是带来的较大便利之一,在以往的写法中,定义数据和方法,都需要在结尾 return 出去,才能在模板中使用。在 script setup 中,定义的属性和方法无需返回,可以直接使用!示例:

<template>
  <div>
       <p>My name is {{name}}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('Sam')
</script>
复制代码

写在最后

如果文章对你有用,可以选择「收藏」。 如有文章有错误或建议,欢迎评论指正,谢谢你。❤️

欢迎阅读其它文章

Vue3 的 script setup 语法糖是真的的香,学习使我进步的相似文章

vue3 composition api文档,Vue3.2 setup语法糖、Composition API、状态库Pinia归纳总结分析【Vue3官方教程】🎄万字笔记 | 同步导学视频分析Vue3 全家桶 + TS+ Vite2 + element-plus 搭建简洁时尚的博客网站实战及踩坑记分析vue代理服务器proxy配置,Vue3.0里为什么要用 Proxy API 替代 defineProperty API ?分析vite vue3 typescript,vite工程化实践分析compositionapi 详解,Composition-API实操还觉得短吗分析vue3和react,拿下vue3你要做好这些准备分析composition用法,Composition API原理深度剖析分析Vue3丨从 5 个维度来讲 Vue3 变化分析