写点什么

前端培训:Vue3 语法糖详解分享

  • 2022 年 2 月 21 日
  • 本文字数:2215 字

    阅读完需:约 7 分钟

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 = '000'

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>

动态组件

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>

效果如下:



组件数据传递(props 和 emits)

<script setup> 中必须使用 definePropsdefineEmits API 来声明 props 和 emits ,web前端培训它们具备完整的类型推断并且在<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>

效果如下:



对外暴露属性(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>

效果如下:



注意:defineProps、defineEmits、defineEmits API 不需要引入可以直接使用

获取 slots 和 attrs

注:useContext API 被弃用,取而代之的是更加细分的 api: useSlots 和 useAttrs。

<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()函数将是异步的。

文章来源于前端工匠

用户头像

关注尚硅谷,轻松学IT 2021.11.23 加入

还未添加个人简介

评论

发布
暂无评论
前端培训:Vue3语法糖详解分享