位置: IT常识 - 正文

Vue3 <script setup lang=“ts“> 使用指南(vue3 script setup withdefault)

编辑:rootadmin
Vue3 <script setup lang=“ts“> 使用指南

推荐整理分享Vue3 <script setup lang=“ts“> 使用指南(vue3 script setup withdefault),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3 script setup 绑定值,vue3 script setup 生命周期,vue3 script setup name,vue3 script setup reactive,vue3 script setup 绑定值,vue3 script setup props,vue3 script setup props,vue3 script setup props,内容如对您有帮助,希望把文章链接给更多的朋友!

本文主要是讲解 <script setup> 与 TypeScript 的基本使用。

<script setup> 是什么?

Vue3 <script setup lang=“ts“> 使用指南(vue3 script setup withdefault)

<script setup> 是在单文件组件 (SFC) 中使用 composition api 的编译时语法糖。

本文写作时,vue 使用的 3.2.26 版本。

1.1. 发展历程

我们先看看 vue3 <script setup> 的发展历程:

Vue3 在早期版本( 3.0.0-beta.21 之前)中对 composition api 的支持,只能在组件选项 setup 函数中使用。<template><h1>{{ msg }}</h1><button type="button" @click="add">count is: {{ count }}</button><ComponentA /><ComponentB /></template><script>import { defineComponent, ref } from 'vue'import ComponentA from '@/components/ComponentA'import ComponentB from '@/components/ComponentB'export default defineComponent({name: 'HelloWorld',components: { ComponentA, ComponentB },props: {msg: String,},setup(props, ctx) {const count = ref(0)function add() {count.value++}// 使用return {} 把变量、方法暴露给模板return {count,add,}},})</script>

在 3.0.0-beta.21 版本中增加了 <script setup> 的实验特性。如果你使用了,会提示你 <script setup> 还处在实验特性阶段。

在 3.2.0 版本中移除 <script setup> 的实验状态,从此,宣告 <script setup> 正式转正使用,成为框架稳定的特性之一。

<script setup lang="ts">import { ref } from 'vue'import ComponentA from '@/components/ComponentA'import ComponentB from '@/components/ComponentB'defineProps<{ msg: string }>()const count = ref(0)function add() {count.value++}</script>x<template><h1>{{ msg }}</h1><button type="button" @click="add">count is: {{ count }}</button><ComponentA /><ComponentB /></template>1.2. 优势

与组件选项 setup 函数对比, <script setup> 的优点:

更少、更简洁的代码,不需要使用 return {} 暴露变量和方法了,使用组件时不需要主动注册了;更好的 Typescript 支持,使用纯 Typescript 
本文链接地址:https://www.jiuchutong.com/zhishi/300015.html 转载请保留说明!

上一篇:【Axure】Axure RP 9下载、安装、授权、汉化(axure rp 9视频教程)

下一篇:【Python】控制自己的手机摄像头拍照,并自动发送到邮箱(python自动控制)

  • 为什么抖音号搜不到用户(为什么抖音号搜索不出来)

    为什么抖音号搜不到用户(为什么抖音号搜索不出来)

  • 会员plus版是什么区别(plus 会员)

    会员plus版是什么区别(plus 会员)

  • 拼多多怎么选择2个不同的东西一块付款(拼多多怎么选择发货地区)

    拼多多怎么选择2个不同的东西一块付款(拼多多怎么选择发货地区)

  • 苹果xr拍照有夜景模式吗(苹果xr拍照夜间模式怎么开启)

    苹果xr拍照有夜景模式吗(苹果xr拍照夜间模式怎么开启)

  • 两个路由器放在一起会有干扰吗(两个路由器放在一起会影响网速吗)

    两个路由器放在一起会有干扰吗(两个路由器放在一起会影响网速吗)

  • 显示适配器是显卡吗(显示适配器是显卡的名字)

    显示适配器是显卡吗(显示适配器是显卡的名字)

  • 笔记本无线网络连接不上(笔记本无线网络红叉怎么修复)

    笔记本无线网络连接不上(笔记本无线网络红叉怎么修复)

  • 微信语音通话可以复原吗(微信语音通话可以监听吗)

    微信语音通话可以复原吗(微信语音通话可以监听吗)

  • 乐视2pro怎么分屏(怎么区分乐视2还是乐视2pro)

    乐视2pro怎么分屏(怎么区分乐视2还是乐视2pro)

  • 第四代计算机的电子器件组成是(第四代计算机的标志性微电子器件是)

    第四代计算机的电子器件组成是(第四代计算机的标志性微电子器件是)

  • 微信如何避免举报封号(微信如何避免举报别人)

    微信如何避免举报封号(微信如何避免举报别人)

  • 电脑不读u盘如何解决(电脑怎么不读u盘了)

    电脑不读u盘如何解决(电脑怎么不读u盘了)

  • 怎么把试卷变成电子版(怎么把试卷变成空白卷)

    怎么把试卷变成电子版(怎么把试卷变成空白卷)

  • 怎么在淘宝上开网店(怎么在淘宝上开店铺)

    怎么在淘宝上开网店(怎么在淘宝上开店铺)

  • wlan信号桥是(wlan信号桥是干什么用的)

    wlan信号桥是(wlan信号桥是干什么用的)

  • 拼多多上0.01元拼手机是真的吗(拼多多上0.01元的虚拟商品)

    拼多多上0.01元拼手机是真的吗(拼多多上0.01元的虚拟商品)

  • y97指纹锁在哪里(指纹锁在哪里打开)

    y97指纹锁在哪里(指纹锁在哪里打开)

  • 酷安下载的安装包在哪(酷安下载的安装包怎么安装)

    酷安下载的安装包在哪(酷安下载的安装包怎么安装)

  • OPPO r9微信分身怎么操作(oppo r9手机微信分身)

    OPPO r9微信分身怎么操作(oppo r9手机微信分身)

  • 红米note7pro和红米note7手机壳通用吗(红米note7Pro和红米9哪个好)

    红米note7pro和红米note7手机壳通用吗(红米note7Pro和红米9哪个好)

  • 小米mix3多重(小米mix3重量是多少)

    小米mix3多重(小米mix3重量是多少)

  • 【学姐面试宝典】—— 前端基础篇Ⅰ(HTTP/HTML/浏览器)(面试学弟学妹问题)

    【学姐面试宝典】—— 前端基础篇Ⅰ(HTTP/HTML/浏览器)(面试学弟学妹问题)

  • CSS渐变背景看这一篇就够了(背景渐变 css)

    CSS渐变背景看这一篇就够了(背景渐变 css)

  • 所得税汇算清缴招待费扣除标准
  • 出口退税是什么部门负责
  • 免税外汇商品
  • 无票收入是否要交税
  • 小微企业开票多少算小规模纳税人
  • 新注册公司开银行卡流程
  • 计提折旧需要减去预计净残值吗
  • 企业收到个体户开的发票
  • 税控设备全额抵扣政策
  • 奖金多发退回时间怎么算
  • 企业交补充医疗保险
  • 供应商不给货款怎么办
  • 企业房地产与设施管理指南
  • 内蒙古地税电子税务局app
  • 广告公司可以开服务费吗
  • 网上认证服务费可以全额抵扣吗
  • 公司向外单位借款摘要怎么写
  • 个人承包劳务合法吗?
  • 计税工资和实发工资比例
  • 怎样用增值税专票抵扣
  • 发票分票怎么处理违章
  • 如何理解总分机的概念
  • 怎么计提担保赔偿准备金?
  • 生产的废料怎么做账
  • 桌面鼠标右键菜单设置
  • mac本host文件
  • 税后利润是股东权益吗
  • 提示语是什么意思?
  • macOS Big Sur 11.2.1 修订版更新发布
  • 短期借款利息的核算不可能涉及的账户是
  • php中strcmp函数
  • php 构造方法
  • 存放同业属于什么会计制度
  • 贸易公司和生产厂家怎么合作能够双赢
  • 天猫提现不走对公2023
  • mysqljoin查询
  • faster rcnn详解
  • php 密码
  • java 日志系统
  • 机动车销售统一专票
  • 分公司和总公司的税务和财务关系
  • 网商贷企业贷款条件
  • wordpress怎么安装插件
  • 增值税季度缴纳时间
  • 计提怎么理解
  • 个人所得税劳务所得
  • 个人所得税由单位还是个人缴纳
  • 销售使用过的固定资产怎么填申报表
  • 加盟费明细
  • 房屋估价需要准备什么
  • 印花税不足一元免征吗
  • 销售折扣销售方会计处理
  • 会计账户与银行账户
  • 银行受理汇票贴现业务
  • 继续教育专项扣除标准是多少
  • 车间成本核算表
  • sql语句实现分页
  • win7屏幕太亮了怎么调电脑
  • win7如何设置共享
  • win8停止服务
  • linux忘记root密码怎么办
  • 不知道,不知道
  • centos文本编辑器
  • win7屏幕颜色不正常
  • win8怎么停止自动更新
  • win10 电脑
  • 找不到config/index taro
  • win7打开摄像头权限
  • win10移动版能运行电脑软件吗
  • win10资源管理器频繁无响应
  • 进入Linux单用户模式
  • cocos2d官网
  • java语言的解释器是什么
  • 手机弹窗游戏
  • Android游戏开发教程
  • input和button按钮合到一起
  • jquery页面跳转的方法
  • 发票系统怎么设置打印
  • 水电费加1
  • 成都税务二维码扫描
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设