Sample code using ref syntax sugar in vue3

Since the introduction of the concept of a composite API, a major unsolved question is which one is used for ref and responsive objects. Responsive objects have the problem of destructuring lost responsivity, while ref needs to be used everywhere with .value, and it is easy to miss .value without the help of the type system.

The above is the official original saying, probably the new syntax sugar, which allows us to use ref more conveniently without writing .value every time, probably simplifying such code into this

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

Simplified to this

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

Each responsive API that returns ref has a corresponding macro function prefixed with $. Includes the following APIs:

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

I won’t repeat the extras. You can check the official documents by yourself. Next, let’s take a look at the specific use of this syntax sugar and how to configure it in the project.

The first step (must), enable the syntax sugar switch in vite

Open, add the following code

    vue({
      reactivityTransform: true, // Enable responsive syntax sugar $ref $computed $toRef    })

Step 2 (optional), configuration

Add vue/ref-macros under compilerOptions, otherwise an error will be reportedTS2304: Cannot find name '$ref'.Although it does not affect the use, it will affect the development experience

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

Step 3 (optional), configure eslint

Add global to it, otherwise it will promptESLint: '$ref' is not defined.(no-undef)

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

If you don't mind the trouble and don't want the code to always have false positives and errors, you can directly introduce them in the vue code`vue/ref-macros`, so there is no need to configure itand`eslint`, that is, the second and third steps just written

<script setup lang="ts">
import { $ref } from "vue/macros";
let count = $ref(0)
(count)
function increment() {
  count++
}
</script>
<template>
  <button @click="increment">{{ count }}</button>
</template>

Ref usage of vue3

Use the ref function to define a variable, and the ref extension is the initial value of the variable

import { ref } from 'vue'
let conter=ref(0)
let arr=ref(['I'm a string'])

Usage in template

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

Usage in js

function add(){
    ++
    (conter)
    ('Mouse tail juice')
}

Get the virtual dom (Note: 1. The variable name must be consistent with the html. 2. Pay attention to the life cycle, and only if the instance is created is completed will there be a virtual dom)

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