位置: 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自动控制)

  • 荣耀30s是支持屏幕指纹的吗(荣耀30s是直屏还是曲屏)

    荣耀30s是支持屏幕指纹的吗(荣耀30s是直屏还是曲屏)

  • 苹果70%电池容量要换吗(iphone电池容量70)

    苹果70%电池容量要换吗(iphone电池容量70)

  • 源代码泄露的后果(源代码被盗有什么后果)

    源代码泄露的后果(源代码被盗有什么后果)

  • 秘乐短视频能注销账号吗(秘乐短视频注册有风险吗)

    秘乐短视频能注销账号吗(秘乐短视频注册有风险吗)

  • iphone6有暗黑模式吗(苹果6p的暗黑模式在哪)

    iphone6有暗黑模式吗(苹果6p的暗黑模式在哪)

  • 淘宝特价版和淘宝东西一样吗(淘宝特价版和淘特一样吗)

    淘宝特价版和淘宝东西一样吗(淘宝特价版和淘特一样吗)

  • 华为免打扰对方提示是什么(华为开启免打扰模式后别人打得进来吗)

    华为免打扰对方提示是什么(华为开启免打扰模式后别人打得进来吗)

  • 二维码收款码可以发给别人吗(二维码收款码可以改吗)

    二维码收款码可以发给别人吗(二维码收款码可以改吗)

  • 苹果手机视频聊天发热怎么办(苹果手机视频聊天发热正常吗)

    苹果手机视频聊天发热怎么办(苹果手机视频聊天发热正常吗)

  • 戴尔开机黑屏(戴尔开机黑屏怎么办)

    戴尔开机黑屏(戴尔开机黑屏怎么办)

  • x无面容是怎么回事(无面容的x怎么用面容支付)

    x无面容是怎么回事(无面容的x怎么用面容支付)

  • 华为nova6双系统怎么设置(华为nova6双系统怎么进去)

    华为nova6双系统怎么设置(华为nova6双系统怎么进去)

  • ctrl+空格键的作用(ctrl和空格键)

    ctrl+空格键的作用(ctrl和空格键)

  • qq空间热度和浏览区别(qq空间热度是什么东西)

    qq空间热度和浏览区别(qq空间热度是什么东西)

  • 固态硬盘和硬盘都要吗(固态硬盘和硬盘容量的区别)

    固态硬盘和硬盘都要吗(固态硬盘和硬盘容量的区别)

  • 乐视手机怎么设置后台应用自启(乐视手机怎么设置屏幕常亮)

    乐视手机怎么设置后台应用自启(乐视手机怎么设置屏幕常亮)

  • 拼多多怎么扫描二维码(拼多多怎么扫描二维码找商品)

    拼多多怎么扫描二维码(拼多多怎么扫描二维码找商品)

  • 苹果11有没有双卡(苹果11有没有双微信)

    苹果11有没有双卡(苹果11有没有双微信)

  • 华为屏幕使用时间怎么看(华为屏幕使用时长)

    华为屏幕使用时间怎么看(华为屏幕使用时长)

  • 拼多多直通车什么意思(拼多多直通车叫啥)

    拼多多直通车什么意思(拼多多直通车叫啥)

  • nova3和nova4区别(nova3和nova4参数对比)

    nova3和nova4区别(nova3和nova4参数对比)

  • vivo手机电耗得快怎么办(vivo手机电耗得太快怎么办)

    vivo手机电耗得快怎么办(vivo手机电耗得太快怎么办)

  • 快手评论怎么不让别人看(快手评论怎么不让好友看见)

    快手评论怎么不让别人看(快手评论怎么不让好友看见)

  • 苹果手机如何阻止app的推送通知(苹果手机如何阻止骚扰电话拦截)

    苹果手机如何阻止app的推送通知(苹果手机如何阻止骚扰电话拦截)

  • 苹果微信运动不计步怎么办(苹果微信运动不更新步数怎么回事)

    苹果微信运动不计步怎么办(苹果微信运动不更新步数怎么回事)

  • 快手可能认识的人到底从哪里来的(快手可能认识的人是怎么出现的)

    快手可能认识的人到底从哪里来的(快手可能认识的人是怎么出现的)

  • 滴滴修改目的地(滴滴修改目的地要加钱吗)

    滴滴修改目的地(滴滴修改目的地要加钱吗)

  • 手机屏保时间怎么设置(手机屏保时间怎么调整位置)

    手机屏保时间怎么设置(手机屏保时间怎么调整位置)

  • AttributeError: cannot assign module before Module.__init__() call

    AttributeError: cannot assign module before Module.__init__() call

  • 收到以前年度退回的所得税
  • 调整税率后增值税发票的开具
  • 领的增值税专用发票如何录入电脑
  • 小规模公司的外汇业务
  • 企业稳岗返还申请报告模板
  • 利润表季报的本期金额是本年累计吗
  • 电商相对于传统企业有哪些特点?
  • 企业所得税季度申报时间
  • 人员新增申报表
  • 视同内销补税的财务处理
  • 建筑企业收到招聘短信
  • 二手房差额税需要多少钱怎么计算的
  • 非营利性企业要交企业所得税吗
  • 企业所得税讲解
  • 企业替员工缴纳商保家财险
  • 计提固定资产减值准备属于什么支出
  • 企业破产清算怎么做账务处理实务工作
  • 企业年会的增值税能抵扣吗?
  • 招聘时开具的专用发票可以抵扣吗?
  • 加工费月底需要全部结转吗
  • 外汇收入会计分录
  • 评估资产没有发票和流水怎么办
  • 小规模纳税人季度超过30万怎么纳税
  • 资产负债表在建工程怎么填列
  • 苹果电脑使用u盘之前需要设置什么?
  • 如何解决浏览器禁止访问
  • 应收票据借贷方核算什么内容
  • 其他应付款不用付了怎么做分录
  • 销售返点的账务怎么处理
  • 退休人员被返聘还能领养老金吗?
  • 企业并购的基本方法有
  • 公司收入没有进项
  • php二维码解码
  • js fetch api
  • 什么是前后端分离的方式
  • echarts series name
  • uniapp 手写识别
  • 解压.xz文件命令
  • 残疾人加计扣除工资按应发还是实发
  • 销售费用处理不包括哪些
  • 递延所得税什么时候交
  • 金税盘怎样设置收款人复核人
  • 按月计提固定资产折旧算收入吗
  • 股东之间股权转让流程
  • 现金流量表年报本期金额和上期金额
  • 2023小型微利企业税收优惠
  • 递延所得税资产和所得税费用的关系
  • 其他收益属于利得吗
  • 公司买口罩
  • 为什么小规模不可以收专票
  • 收到投资款如何做账务处理
  • 制造费用主要包括哪些内容
  • 未认证未抵扣的进项税
  • 港币转人民币差多少钱
  • 微信收款计入现金流量吗
  • 年底汇算清缴是什么
  • 城市天然气管道爆炸
  • 企业如何建账之类的账目
  • mysql5.7卸载重装
  • win10周年版
  • windows server 2003 密钥
  • ubuntu-desktop启动
  • linux安装c环境
  • windowsxp自带播放器
  • ubuntu16.04输入法
  • js 加减
  • 一个android项目一般包含哪些目录?各有什么用途?
  • linux怎么查看tomcat位置
  • python面向对象特征
  • python基础总结
  • 基于node.js的跳蚤市场网站主要内容
  • 蓝牙协议栈包括
  • shell中的注释用什么表示
  • 安卓手机命令代码
  • 国家税务总局12366纳税服务平台
  • 法人没有实名认证,现在要变更,还需要实名认证吗
  • 广东省地方税务局征收社会保险费欠费管理暂行办法
  • 地税局社保宣传标语
  • 开地税发票的操作流程
  • 国办函和国办发
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设