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

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>

    vue({
      reactivityTransform: true, // 启用响应式语法糖$ref $computed $toRef
    })

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

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

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

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

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

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

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