3

Vue3 的 script setup 语法糖是真的爽

 2 years ago
source link: https://www.joynop.com/p/431.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

还记得刚体验 script setup 语法糖的时候，编辑器提示我这是一个实验性的提案，要使用的话，需要固定 Vue 版本。
而在 6 月底，该提案被正式定稿，在 v3.1.3 的版本上，你可以继续使用但仍会有实验性提案的提示，在 v3.2 中，才会去除提示并移除一些废弃的 API。

script setup 是个啥？

它是 Vue3 的一个新语法糖，在 setup 函数中。所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。
使用方式极其简单，仅需要在 script 标签加上 setup 关键字即可。示例：

<script setup></script>
JavaScript

组件自动注册

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

<template>
    <Child />
</template>

<script setup>
import Child from './Child.vue'
</script>
JavaScript

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

组件核心 API 的使用

使用 props

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

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

  const props = defineProps({
    title: String,
  })
</script>
Javacript

使用 emits

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

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

  const emit = defineEmits(['change', 'delete'])
</script>
Javacript

获取 slots 和 attrs

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

// 旧
<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>
JavaScript

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>
JavaScript

属性和方法无需返回，直接使用！

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

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

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

const name = ref('Sam')
</script>
JavaScript

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK