Vue--》Vue3的setup语法糖到底香不香？你来看看就知道了

目录

setup语法糖

创建Vue3项目

setup语法糖的使用

快速生成setup语法糖模板

setup语法糖新增的API

useSlots()和useAttrs()

顶层await

setup语法糖

相信在了解过这篇文章的 setup函数讲解 人会觉得Vue3处理数据变得繁琐了，所有的变量都必须return出来才能使用，为了简化这种书写方式，Vue方法提供了setup语法糖，使用语法糖之后，只需要在 script 标签上加上 setup 属性，无需 return ， template 便可直接使用，引入的组件也无需在注册，大大提高了程序员的编程效率。

相比于普通的<script>语法，它具有更多优势：

1）更少的样板内容，更简洁的代码。

2）能够使用纯 TypeScript 声明 props 和自定义事件。

3）更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。

4）更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

因为Vue3.2版本才开始能使用语法糖，所以我们就需要创建最新版本的Vue框架，这里我就借助轻量级的Vite进行讲解吧。

创建Vue3项目

在文件下新建cmd，输入以下命令，来创建 Vue3中最新版本的Vue：

npm init vite@latest

选择要创建的框架，我这里选择Vue

选择开发语言，我这里就选择JS了，Vue3创建TS项目，后期再讲解吧。

选择完成后下载依赖包即可，下载完成用编译器打开文件就可以进行开始编程了。

setup语法糖的使用

要启用该语法，需要在 <script> 代码块上添加 setup，里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。setup语法糖和setup()函数之间的区别在于以下几点：

setup语法糖不需要将对象return出去就可以使用：

当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用

<template>
  <div>
    <h2>num的值是：{{num}}</h2>
    <button @click="add">+1</button>
    <br>
    <h2>个人信息：姓名{{person.name}}，年龄{{person.age}}</h2>
    <button @click="change">修改个人信息</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const num = ref(0)
const person = reactive({
  name:'张三',
  age:18,
})
// 修改数值
function add(){
  num.value++
}
// 修改个人信息
function change(){
  person.name = '李四',
  person.age = 20
}
</script>

import 导入的内容也会以同样的方式暴露。这意味着我们可以在模板表达式中直接使用导入的 add 函数，而不需要通过 methods 选项来暴露它

<template>
  <div>{{ add(2) }}</div>
</template>

<script setup>
import { add } from './index.js'
</script>

引入组件无需注册即可使用：

组件的引用应当被理解为像是在引用一个变量，由于组件是通过变量引用而不是基于字符串组件名注册的，在 <script setup> 中要使用动态组件的时候，应该使用动态的 :is 来绑定：

<template>
  <div>
    <component :is="istrue == true ? Count : Person"></component>
    <br>
    <button @click="changeIstrue">切换组件的显示</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
// 引入组件
import Count from './components/Count.vue'
import Person from './components/Person.vue'
const istrue = ref(true)
function changeIstrue(){
  istrue.value = !istrue.value
}
</script>

快速生成setup语法糖模板

为了能够快速使用setup语法糖这里提一下配置语法糖的模板，点击设置，找到配置用户代码片段

点击现有片段，如果之前没有配置过代码片段的人，点击新代码片段即可。

进入配置文件后，将以下代码粘贴进去即可。

"Vue3.2": {
	"prefix": "v3",
	"body": [
		"<template>",
		"\\t<div class=\\"\\">",
		"\\t\\t$3",
		"\\t</div>",
		"</template>\\n",
		"<script setup>",
		"import { ref, reactive } from 'vue'",
		"\\t$2",
		"</script>\\n",
		"<style lang=\\"less\\" scoped>",
		"\\t$4",
		"</style>"
	],
	"description": "Vue3.2"
}

配置完成后，输入我们设置的快捷键即可快速生成模板，不需要我们再手动去输setup了，是不是很方便！！！

setup语法糖新增的API

Vue3官网给我们提供了3个新增的API，官网地址为：官网地址 。

因为是setup内置的API，所以我们不需要像ref、reactive一样还得导入，直接使用即可。这里我简单的说一下，这几个新增的API的使用：

defineProps()：子组件接收父组件中传来的props。

可以看到我们在修改父组件的 msg 值时，子组件的值也是跟着发送改变的。

上面的是官方的写法，当然新增的API也可以采用如下写法，我个人也是比较推荐， 简洁明了。

defineEmits()：子组件向父组件共享数据方法。

defineExpose()：子组件暴露属性，可以在父组件中拿到。

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

useSlots()和useAttrs()

在 <script setup> 使用 slots 和 attrs 的情况应该是相对来说较为罕见的，因为可以在模板中直接通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用：

useSlots函数：可以获取父组件中插槽传递的虚拟dom对象

useAttrs函数：用来获取父组件中非props的传递到子组件的参数/方法。

我现在将msg设置为props属性，来看看接下来的效果：

顶层await

<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()：async setup() 必须与 Suspense 内置组件组合使用，Suspense 目前还是处于实验阶段的特性，会在将来的版本中稳定。

总结：

总体来说，setup语法糖还是提供了比较便捷的书写规范，简省了以前许多比较冗余的代码，还是比较香的哈，而setup语法糖我也是看着官方给出的文档来学习的，也是将自己的一些学习上感悟分享给大家，也是希望大家平时能多多阅读一下官方文档，比较权威嘛！如果大家觉得还是有收获的话，希望给个一键三连吧，您的支持就是博主创作的最大动力！