开发者社区> 1091207401930833> 正文

Vue3.x <script setup> 语法糖详解,助力快速上手Vue3.x【值得收藏】

简介: Vue3.x <script setup> 语法糖详解,助力快速上手Vue3.x【值得收藏】
+关注继续查看

哈喽,大家好 我是xy👨🏻‍💻。在上一篇文章中,给大家详细讲解了如何快速使用 Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架;其中也提到了<script setup>语法,这篇文章就来给大家详细的讲讲 <script setup>语法糖,让你在使用 vue3 开发项目时更加得心应手 💪

script setup 有哪些优势

<script setup> 是在单文件组件(SFC)中使用组合式 API 的编译时语法糖。相比于普通的<script>语法,它具有更多优势:

  • 更少的样板内容,更简洁的代码。
  • 能够使用纯Typescript声明 props 和抛出事件。
  • 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数,没有任何的中间代理)。
  • 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。

基本语法

<setup script> 是 vue3 的一个新的语法糖,用起来特别简单。只需要在 script 标签中加上 setup 关键字。

<setup script> 中声明的函数变量以及import引入的内容、组件都能在模板中直接使用:

<template>
  <div>{{ msg }}</div>
  <br />
  <NButton @click="log">点击</NButton>
</template>
<script setup lang="ts">
import { NButton } from 'naive-ui'
const msg = '公众号:前端开发爱好者'
const log = () => {
  console.log(msg)
}
</script>

响应式

响应式状态需要明确使用响应式 APIs 来创建。和从 setup() 函数中返回值一样,ref 值在模板中使用的时候会自动解包:

<template>
  <NButton @click="count++">点击++{{ count }}</NButton>
</template>
<script setup lang="ts">
import { NButton } from 'naive-ui'
import { ref } from 'vue'
const count = ref<number>(0)
</script>

更多响应式 APIs 的使用请查阅官方文档:https://v3.cn.vuejs.org/api/basic-reactivity.html#reactive,本文就不做一一讲解。

动态组件

setup script 中要使用动态组件的时候,用动态的 :is 来绑定:

<template>
  <component :is="isShow ? LoginVue : null" />
  <NButton @click="setIsShow">是否展示:{{ isShow }}</NButton>
</template>
<script setup lang="ts">
import { ref } from "vue"
import LoginVue from "../login/Login.vue";
import { NButton } from 'naive-ui'
let isShow = ref<boolean>(false)
const setIsShow = ()=>{
  isShow.value = !isShow.value
}
</script>

效果如下:image.png

组件数据传递(props 和 emits)

<script setup> 中必须使用 definePropsdefineEmits API 来声明 props 和 emits ,它们具备完整的类型推断并且在<script setup>中是直接可用的

定义组件的 props

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

<script setup lang="ts">
  const props = defineProps({
    num: Number
  })
</script>

定义组件的 emits

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

<script setup lang="ts">
  const emits = defineEmits(['addNum'])
</script>

父组件:

<template>
  <NButton @click="addNum">我是父组件,点击 ++ {{ num }}</NButton>
  <hr />
  <Child :num="num" @addNum="addNum" />
</template>
<script setup lang="ts">
import Child from './Child.vue'
import { NButton } from 'naive-ui'
import { ref } from 'vue'
const num = ref<number>(0)
const addNum = () => {
  num.value++
}
</script>

子组件:

<template>
  <div>{{ props.num }}</div>
  <NButton @click="emits('addNum')">修改父组件num{{ props.num }}</NButton>
  <hr />
</template>
<script setup lang="ts">
import { NButton } from 'naive-ui'
const props = defineProps({
  num: Number,
})
const emits = defineEmits(['addNum'])
</script>

效果如下:image.png

对外暴露属性(defineExpose)

<script setup> 的组件默认不会对外部暴露任何内部声明的属性。如果有部分属性要暴露出去,可以使用 defineExpose

说白了就是暴露属性给外部使用

父组件:

<template>
  <NButton @click="logChildren">我是父组件</NButton>
  <hr />
  <Child ref="child" />
</template>
<script setup lang="ts">
import Child, { ChildType } from './Child.vue'
import { NButton } from 'naive-ui'
import { ref } from 'vue'
const child = ref<ChildType>(null)
const logChildren = () => {
  console.log(child.value.title)
}
</script>

子组件:

<template>
  <div>我是子组件</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const title = ref<string>('我是子组件的title')
export interface ChildType {
  title?: String
}
defineExpose({
  title,
})
</script>

效果如下:image.png⭐️ 注意:definePropsdefineEmitsdefineEmits API 不需要引入可以直接使用

获取 slots 和 attrs

注:useContext API 被弃用,取而代之的是更加细分的 api: useSlotsuseAttrs

<script setup>使用 slots 和 attrs 的情况应该是很罕见的,因为可以在模板中通过 $slots$attrs 来访问它们。在你的确需要使用它们的罕见场景中,可以分别用 useSlotsuseAttrs 两个辅助函数:

<script setup lang="ts">
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>

useSlotsuseAttrs 是真实的运行时函数,它会返回与 setupContext.slotssetupContext.attrs 等价的值,同样也能在普通的组合式 API 中使用

创建异步 setup 方法(顶层 await)

<script setup>语法的另一个很酷的功能是创建异步 setup 非常容易。这对于在创建组件时加载api,甚至将代码绑定到<suspense>功能很有用。

我们所要做的就是让我们的 setup 函数是异步的,在我们的 <script setup> 中使用一个顶级的await

<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()

例如,如果我们使用的是 Fetch API,我们可以像这样使用 await:

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
9524 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
13175 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
20203 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
33172 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18472 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
34978 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24978 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14700 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
13870 0
51
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载