首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >初识 vue3 之单文件组件 script setup

初识 vue3 之单文件组件 script setup

作者头像
Qwe7
发布于 2022-01-30 09:59:41
发布于 2022-01-30 09:59:41
1.9K00
代码可运行
举报
文章被收录于专栏:网络收集网络收集
运行总次数:0
代码可运行

关于此分类

关于初识 vue3 分类主要是记录一些通过 vue3 进行的实践与学习记录。

此文主要记录关于 vue3 script setup 的尝试。

本文参考于:

默认自动暴露

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

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

HTML

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div>当前msg的值:{{ msg }}</div>
  <div>当前msg的值(ref的值会被自动解包){{ msgRef }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 1. 顶层的绑定会暴露给模板
const msg = '这是一条msg'
const msgRef = ref('msg')
</script>

同样的导入组件也可以直接使用

HTML

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <MyComponent />
</template>

<script setup>
import MyComponent from './MyComponent.vue'
</script>

动态组件

HTML

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

自定义指令

但这里有一个需要注意的限制:必须以 vNameOfDirective 的形式来命名本地自定义指令,以使得它们可以直接在模板中使用。

TYPESCRIPT

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const vMyDirective = {
  beforeMount: (el: HTMLElement) => {
    console.log(el)
  },
  mounted(el, value: Ref<number>) {
    // value 即传入的参数值
    console.log(value.value)
  }
}

HTML

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div v-my-directive="123">123</div>

defineProps、defineEmits、defineExpose

definePropsdefineEmits 分别用于定义当前组件需要接收的参数和需要触发的 emit。

JAVASCRIPT

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])

在 JavaScript 中上述定义即可,但在 typescript 中可以为其增加类型。

TYPESCRIPT

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const props = defineProps<{
  foo: string
  bar?: number
}>()

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

类型声明时的默认值

TYPESCRIPT

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const props = defineProps<{
  foo: string
  bar?: number
}>()

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

defineExpose 用于定义暴露出去的属性,此模式下默认是全暴露

VUE

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

使用 <script setup> 的组件是默认关闭的,也即通过模板 ref 或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup> 中声明的绑定。

为了在 <script setup> 组件中明确要暴露出去的属性,使用 defineExpose 编译器

VUE

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div>test</div>
</template>

<script setup>
const a = 1
defineExpose({
  a: 1
})
</script>

在父组件中使用

VUE

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <testAVue ref="testRef" />
</template>

<script setup lang="ts">
import testAVue from './test-a.vue'
import { onMounted, ref } from 'vue'
const testRef = ref(null)
onMounted(() => {
  console.log(testRef.value) // Proxy {a: 1, __v_skip: true}
})
</script>

与普通的 <script> 使用

<script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有这些需要的情况下或许会被使用到:

  • 无法在 <script setup> 声明的选项,例如 inheritAttrs 或通过插件启用的自定义的选项。
  • 声明命名导出。
  • 运行副作用或者创建只需要执行一次的对象。

VUE

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
    // 普通 <script>, 在模块范围下执行(只执行一次)
    runSideEffectOnce()

    // 声明额外的选项
    export default {
        inheritAttrs: false,
        customOptions: {}
    }
</script>

<script setup>
    // 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue3 script-setup 使用指南
本文主要是讲解 <script setup> 与 TypeScript 的基本使用。
ConardLi
2022/02/18
6K0
学会这几个API,vue3直接上手
vue2开发过项目的,想直接上手vue3很快,几个API熟悉了就够了,其它的特性在使用vue3的过程慢慢去了解。任何在熟悉了使用之后再去研究一些API的原理,慢慢就能把vue3掌握。
wade
2022/03/28
7360
关于 Vue3 + setup + ts 使用技巧的总结
ref 一般用于基本的数据类型,比如 string,boolean ,reactive 一般用于对象 ref 的地方其实也是调用的 reactive 实现的。
前端达人
2023/08/31
1.2K0
关于 Vue3 + setup + ts 使用技巧的总结
Vue3.2+中setup语法糖的使用总结
vue3已经出来很长时间了,这一版本的写法在很多场景下由于要频繁return我们所定义的属性或者方法会让代码看起来非常繁琐,于是在3.2版本之后加入了script-setup语法糖,这一语法糖的加入让vue3的写法有了特别大的改变,这里是setup script文档:文档地址
Snine
2022/09/01
2.1K0
Vue 3 父子组件互调方法 - setup 语法糖写法
使用 <script setup> 的组件是默认关闭的,也即通过模板 ref 或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup> 中声明的绑定。
訾博ZiBo
2025/01/06
6200
Vue 3 父子组件互调方法 - setup 语法糖写法
Vue3, setup语法糖、Composition API全方位解读
支持绑定多个v-model,v-model 是 v-model:modelValue 的简写
yyds2026
2022/09/26
3.3K0
前端系列13集-内置内容,单文件组件,进阶 API
在你的站点上动态渲染任意的 HTML 是非常危险的,因为它很容易导致 [XSS 攻击]。请只对可信内容使用 HTML 插值,绝不要将用户提供的内容作为插值
达达前端
2023/10/08
4630
vue3的setup还能这么用?
接收一个props和context函数并且将setup内的内容通过return暴露给组件的其余部分。
inline705
2021/12/09
1.1K0
vue3的setup还能这么用?
Vue3 过10种组件通讯方式
众所周知,Vue.js 中一个很重要的知识点是组件通信,不管是业务类的开发还是组件库开发,都有各自的通讯方法。
德育处主任
2022/04/17
2K0
Vue3 过10种组件通讯方式
Vue3.0最新动态:script-setup 定稿,部分实验性 API 将弃用
最近一段时间挺忙,对 Vue 3.0 的更新记录看的比较少,今天看了一下 release 记录,发现最新的 2 个小版本对 script-setup 这个新特性改动还算蛮大的,之前的用法都调整了不少。
winty
2021/07/27
1.4K0
前端系列14集-Vue3-setup
页面浏览量(Page View,PV)和访客数(Unique Visitors,UV)
达达前端
2023/10/08
5970
前端系列14集-Vue3-setup
Vue2到Vue3,重学这5个常用的API
距离Vue3发布已经过去一年多时间了,从Vue2到Vue3是一个不小的升级,包括周边生态等。
玄姐谈AGI
2023/01/10
9360
Vue2到Vue3,重学这5个常用的API
【BlogAdmin升级3】组件通讯与引用
defineProps原理: 就是编译阶段的一个标识,实际编译器解析时,遇到后就会进行编译转换
老张的哲学
2024/02/22
1610
【BlogAdmin升级3】组件通讯与引用
【Vuejs】1286- 分享 15 个 Vue3 全家桶开发的避坑经验
最近入门 Vue3 并完成 3 个项目,遇到问题蛮多的,今天就花点时间整理一下,和大家分享 15 个比较常见的问题,基本都贴出对应文档地址,还请多看文档~ 已经完成的 3 个项目基本都是使用 Vue3 (setup-script 模式)全家桶开发,因此主要分几个方面总结:
pingan8787
2022/04/14
6.6K0
【Vuejs】1286- 分享 15 个 Vue3 全家桶开发的避坑经验
vue3 setup语法糖
和选项api的最大不同就是新增了 setup()。我们要处理的逻辑都放到了setup()中
用户4793865
2023/01/12
1.3K0
vue3 setup语法糖
Vue2向Vue3过渡,持续记录
迁移指南:https://v3.cn.vuejs.org/guide/migration/introduction.html
房东的狗丶
2023/02/17
6.4K0
Vue 组件间通信的几种方式
Vue 遵循单向数据流的原则,状态会从父组件传递给子组件,避免子组件意外改变父组件状态导致的混乱逻辑。
前端西瓜哥
2022/12/21
2K0
前端系列15集-watch,watchEffect,eventBus
watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
达达前端
2023/10/08
6460
Vue3 Composition API 之 setup 函数
在说 Vue3 之前,我们先看看 Vue2 项目中是如何编写逻辑代码的, 新建一个组件
青年码农
2022/12/13
4950
Vue3 Composition API 之 setup 函数
Vue3的花样样式还不会?看看老前端是怎么玩儿的~
在 Vue2 组件中,设置一个全局样式,我们通常是新建一个 <style> 标签,如:
淼学派对
2023/10/14
5510
Vue3的花样样式还不会?看看老前端是怎么玩儿的~
相关推荐
Vue3 script-setup 使用指南
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档