位置: IT常识 - 正文

vue3中使用ref语法糖(vue的ref怎么用)

编辑:rootadmin
vue3中使用ref语法糖

推荐整理分享vue3中使用ref语法糖(vue的ref怎么用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中使用rem,vue3.0中的ref,vue3 ref函数,vue3 ref用法,vue3使用$refs,vue3.0ref怎么用,vue3.0ref怎么用,vue3 ref用法,内容如对您有帮助,希望把文章链接给更多的朋友!

自从引入组合式 API 的概念以来,一个主要的未解决的问题就是 ref 和响应式对象到底用哪个。响应式对象存在解构丢失响应性的问题,而 ref 需要到处使用 .value 则感觉很繁琐,并且在没有类型系统的帮助时很容易漏掉 .value

以上是官方原话,大概就是新的语法糖,可以让我们更方便的使用ref,而不用每次都写.value,大概就是把这样的代码,简化成这样

<script setup lang="ts">import { ref } from 'vue'const count = ref(0)console.log(count.value)function increment() {count.value++}</script><template><button @click="increment">{{ count }}</button></template>

简化成这样

<script setup lang="ts">let count = $ref(0)console.log(count)function increment() {count++}</script><template><button @click="increment">{{ count }}</button></template> vue3中使用ref语法糖(vue的ref怎么用)

每一个会返回 ref 的响应式 API 都有一个相对应的、以 $ 为前缀的宏函数。包括以下这些 API:

1.ref -> $ref 2.computed -> $computed 3.shallowRef -> $shallowRef 4.customRef -> $customRef 5.toRef -> $toRef

多余的不再赘述,大家可以自行查看官方文档,接下来我们来看看这个语法糖的具体使用,在项目中怎么配置

第一步(必须),在vite中启用语法糖开关

打开vite.config.ts,添加如下代码

vue({reactivityTransform: true, // 启用响应式语法糖$ref $computed $toRef})第二步(可选),配置tsconfig.json

在compilerOptions下添加vue/ref-macros, 不然会报错TS2304: Cannot find name '$ref'.虽然不影响使用,但是会影响开发体验

"compilerOptions":{..."types": ["vue/ref-macros"] }第三步(可选),配置eslint

在eslintrc.cjs中加上global,不然会提示ESLint: '$ref' is not defined.(no-undef)

module.exports = {...globals: {$ref: "readonly",$computed: "readonly",$shallowRef: "readonly",$customRef: "readonly",$toRef: "readonly",}}; 如果不嫌麻烦,又不想代码中总是有误报错误的行为,可以直接在vue代码中引入vue/ref-macros,这样就不用配置tsconfig.json和eslint了,也就是刚刚写的第二,第三步<script setup lang="ts">import { $ref } from "vue/macros";let count = $ref(0)console.log(count)function increment() {count++}</script><template><button @click="increment">{{ count }}</button></template> 最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。

有需要的小伙伴,可以点击下方卡片领取,无偿分享

本文链接地址:https://www.jiuchutong.com/zhishi/299591.html 转载请保留说明!

上一篇:YOLOv5图像分割中的NMS处理(yolov3图像识别)

下一篇:关于HTML中常用选择器(html用语)

  • 全国企业信用信息公用系统

    全国企业信用信息公用系统

  • 真我q3s怎么调字体大小(真我q3手机文字怎么设置)

    真我q3s怎么调字体大小(真我q3手机文字怎么设置)

  • 抖音左下角显示的什么(抖音左下角显示推荐是什么意思)

    抖音左下角显示的什么(抖音左下角显示推荐是什么意思)

  • 钉钉私聊老师能看到吗(钉钉私聊老师能看见名字和昵称吗)

    钉钉私聊老师能看到吗(钉钉私聊老师能看见名字和昵称吗)

  • 微信扫码最晚多久到账(微信扫码时间长是怎么回事)

    微信扫码最晚多久到账(微信扫码时间长是怎么回事)

  • 华为ldn-tl00是什么型号手机(华为ldn-al00是什么型号的手机)

    华为ldn-tl00是什么型号手机(华为ldn-al00是什么型号的手机)

  • 手机摄像头附近发烫是什么原因(手机摄像头附近特别热)

    手机摄像头附近发烫是什么原因(手机摄像头附近特别热)

  • 苹果13系统怎么降低版本(苹果13系统怎么样)

    苹果13系统怎么降低版本(苹果13系统怎么样)

  • 电脑怎么设置平铺(电脑怎么设置平板屏保时间)

    电脑怎么设置平铺(电脑怎么设置平板屏保时间)

  • 荣耀play3解锁方式(荣耀play3锁屏密码忘记了怎样解锁)

    荣耀play3解锁方式(荣耀play3锁屏密码忘记了怎样解锁)

  • 淘宝直播有浏览足迹吗(淘宝直播浏览量跟观看人数)

    淘宝直播有浏览足迹吗(淘宝直播浏览量跟观看人数)

  • 快手为什么要加粉丝团(快手为什么要加身份证号)

    快手为什么要加粉丝团(快手为什么要加身份证号)

  • oppoa11充电多长时间才满 (oppoa11充电速度是多少w)

    oppoa11充电多长时间才满 (oppoa11充电速度是多少w)

  • 多媒体软件的核心是(多媒体软件技术的核心)

    多媒体软件的核心是(多媒体软件技术的核心)

  • 手机右上角有个锁是什么意思(手机右上角有个像指南针的小图标是什么)

    手机右上角有个锁是什么意思(手机右上角有个像指南针的小图标是什么)

  • xr来电闪光怎么设置(xr手机来电闪光灯怎么调)

    xr来电闪光怎么设置(xr手机来电闪光灯怎么调)

  • ps字体怎么填充图案(ps字体怎么填充图片)

    ps字体怎么填充图案(ps字体怎么填充图片)

  • qq空间说说私密怎么解除(qq空间说说私密评论别人能看到吗)

    qq空间说说私密怎么解除(qq空间说说私密评论别人能看到吗)

  • 抖音怎么上传完整视频(抖音怎么上传完整音乐不侵权)

    抖音怎么上传完整视频(抖音怎么上传完整音乐不侵权)

  • 抖音里共同关系人是什么意思(抖音共同关注和共同联系人有什么区别)

    抖音里共同关系人是什么意思(抖音共同关注和共同联系人有什么区别)

  • 荣耀7x怎么插双卡(荣耀7x怎么插双卡视频)

    荣耀7x怎么插双卡(荣耀7x怎么插双卡视频)

  • vr眼镜有什么功能

    vr眼镜有什么功能

  • 降序排序怎么弄(降序排列怎么弄)

    降序排序怎么弄(降序排列怎么弄)

  • 账面价值大于计税基础
  • 税金及附加二级明细
  • 个人所得税怎么申报退税
  • 会计中级工作年限查得严么
  • 电汇汇票和电汇的异同点
  • 利润表季报的本期金额是本年累计吗
  • 什么企业不用交社保
  • 折扣折让红字发票怎么做账务处理
  • 承兑汇票能直接兑换吗
  • 土地摊销计入在建工程吗
  • 仓储企业的成本有哪些
  • 电子产品委外加工
  • 收到国外提供免费样品怎么入账?
  • 挂靠工程的所得税账务处理怎么做?
  • 开给个人的普票怎么做分录
  • 个税中的其他所得税
  • 食用油从商业流入的原因
  • 工程款增值税怎么算
  • 建安企业劳务成本怎么入账
  • 保险代理的佣金怎么算
  • 商标是按年交费的吗
  • 公司清算补偿工资标准
  • 固定资产进项发票可以抵扣吗为什么
  • 带息应收票据计息时
  • 银行的抵债资产有几种处置办法
  • php stl
  • 应付福利费和应付职工薪酬的关系
  • 一般纳税人取得普票会计分录
  • thinkphp5.0框架
  • vue split函数
  • bert数据增强
  • php内存缓存功能怎么用
  • 股权转让怎么做凭证分录
  • atq命令 显示用户待执行任务列表
  • 资金账簿印花税怎么算
  • 织梦cms官网
  • SQLite教程(四):内置函数
  • 开发成本为什么放在存货里
  • 行政事业单位赞助支出会计核算办法
  • 待抵扣进项税额和待认证进项税额的区别
  • 企业运费如何开票
  • 政府补助怎么记账
  • 样板房装修可以住人吗
  • 持有至到期投资是债权投资吗
  • 内账收入如何确认
  • 进项税额大于销项税月末结转
  • 餐饮招待怎么入账
  • 应付职工薪酬属不属于流动负债
  • 年末是否要结转所得税
  • 个体工商户建行贷款条件
  • mysql安装详细步骤
  • mysql怎么把列变成行
  • win10系统怎么手机投屏到电脑
  • 硬盘安装在机箱内,属于主机的组成部分
  • ubuntu18虚拟机
  • mac电脑技巧
  • win8一键恢复出厂设置
  • u启动开机启动快捷键
  • 电脑打开win
  • 怎么在ubuntu上编程
  • 如何解决叛逆心理
  • qvp32.exe - qvp32是什么进程 有什么作用
  • win8功能大全介绍
  • cocos2dx怎么打开
  • webpack 构建流程
  • jquery添加css样式
  • 用jquery制作网页
  • jQuery Ajax File Upload实例源码
  • csm support
  • 深入理解ts
  • python 遍历字符串修改
  • jquery常用的事件绑定函数有哪些
  • javascript的dom
  • unity方法调用
  • 安卓 自动更新
  • eclipse显示错误提示
  • 税务稽查局稽查财务不在场怎么办
  • 代理记账资质办理在哪个网站提交申请
  • 股息税怎么计算
  • 青岛市医保网上办事大厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设