vue3中使用ref語(yǔ)法糖的示例代碼

更新時(shí)間：2023年06月08日 10:35:06 作者：golyu

Vue3提了一個(gè)Ref?Sugar的RFC，即ref語(yǔ)法糖，目前還處理實(shí)驗(yàn)性的(Experimental)階段，今天通過(guò)本文給大家介紹vue3中使用ref語(yǔ)法糖的相關(guān)知識(shí)，感興趣的朋友跟隨小編一起看看吧

自從引入組合式 API 的概念以來(lái)，一個(gè)主要的未解決的問題就是 ref 和響應(yīng)式對(duì)象到底用哪個(gè)。響應(yīng)式對(duì)象存在解構(gòu)丟失響應(yīng)性的問題，而 ref 需要到處使用 .value 則感覺很繁瑣，并且在沒有類型系統(tǒng)的幫助時(shí)很容易漏掉 .value

以上是官方原話,大概就是新的語(yǔ)法糖,可以讓我們更方便的使用ref,而不用每次都寫.value,大概就是把這樣的代碼,簡(jiǎn)化成這樣

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

簡(jiǎn)化成這樣

<script setup lang="ts">
let count = $ref(0)
console.log(count)
function increment() {
  count++
}
</script>
<template>
  <button @click="increment">{{ count }}</button>
</template>

每一個(gè)會(huì)返回 ref 的響應(yīng)式 API 都有一個(gè)相對(duì)應(yīng)的、以 $ 為前綴的宏函數(shù)。包括以下這些 API：

ref -> $ref
computed -> $computed
shallowRef -> $shallowRef
customRef -> $customRef
toRef -> $toRef

多余的不再贅述,大家可以自行查看官方文檔,接下來(lái)我們來(lái)看看這個(gè)語(yǔ)法糖的具體使用,在項(xiàng)目中怎么配置

第一步(必須),在vite中啟用語(yǔ)法糖開關(guān)

打開vite.config.ts,添加如下代碼

    vue({
      reactivityTransform: true, // 啟用響應(yīng)式語(yǔ)法糖$ref $computed $toRef
    })

第二步(可選),配置tsconfig.json

在compilerOptions下添加vue/ref-macros, 不然會(huì)報(bào)錯(cuò)TS2304: Cannot find name '$ref'.雖然不影響使用,但是會(huì)影響開發(fā)體驗(yàn)

  "compilerOptions":{
    ...
    "types": ["vue/ref-macros"] 
  }

第三步(可選),配置eslint

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

module.exports = {
  ...
  globals: {
    $ref: "readonly",
    $computed: "readonly",
    $shallowRef: "readonly",
    $customRef: "readonly",
    $toRef: "readonly",
  }
};

如果不嫌麻煩,又不想代碼中總是有誤報(bào)錯(cuò)誤的行為,可以直接在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>

vue3的ref用法

使用ref函數(shù)定義一個(gè)變量，ref擴(kuò)號(hào)里是變量的初始值

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、注意生命周期，要實(shí)例創(chuàng)建完成才有虛擬dom)

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

到此這篇關(guān)于vue3中使用ref語(yǔ)法糖的文章就介紹到這了,更多相關(guān)vue3 ref語(yǔ)法糖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: