文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3中使用ref语法糖的示例代码

2024-04-02 19:55

关注

自从引入组合式 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>

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

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

第一步(必须),在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.jsoneslint了,也就是刚刚写的第二,第三步

<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>
 

vue3的ref用法

使用ref函数定义一个变量,ref扩号里是变量的初始值

import { ref } from 'vue'
let conter=ref(0)
let arr=ref(['我是字符串'])

template里的用法

<button @click="conter++">{{conter}}</button>
  <div v-for="item in arr">
  <p>{{item}}</p>
  </div>

js里的用法

function add(){
    conter.value++
    console.log(conter)
    arr.value.push('耗子尾汁')
}

获取虚拟dom (注意:1、变量名称要和html的一致。2、注意生命周期,要实例创建完成才有虚拟dom)

//html
<div ref="box"></div>

//script
<script setup>
import { ref , onMounted} from "vue";
let box=ref(null)
onMounted(()=>{
  console.log(box)
))
</script>

到此这篇关于vue3中使用ref语法糖的文章就介绍到这了,更多相关vue3 ref语法糖内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯