当我们使用 ref 对象时，需要 .value 来读取它的值，很麻烦，所以 vue 推出了 $ref 语法糖来简化读值操作，但 vue 内部还是会帮助调用 .value 的

由于是实现性的特性，还不稳定，所以一般不在生成环境中使用

1. 开启配置

vite.config.ts

export default defineConfig({
  plugins: [vue({
    reactivityTransform: true
  })],
})

2. $ref 和 $$

/src/App.vue

<template>
<h3>{{ num }}</h3>
<button @click="increase">数字增长</button>
</template>


<script setup lang="ts">
import { $ref } from 'vue/macros'
let num = $ref(0)
const increase = () => {
  num++
}
</script>
<template>
<h3>{{ num }}</h3>
<button @click="increase">数字增长</button>
</template>


<script setup lang="ts">
import { $ref } from 'vue/macros'
let num = $ref(0)  // 用 $ref 定义变量
const increase = () => {
  num++  // 写的时候不用再 .value
}
</script>

但当我们使用 watch 监视时，会产生一个问题，就是会直接监视一个值，而不是一个响应式对象

watch(num, (newVal) => {
  console.log(newVal)
})

基于这个问题，vue 又给我们提供了一个语法糖 $$()，让其可以变回响应式的

import { $$ } from 'vue/macros'
watch($$(num), (newVal) => {
  console.log(newVal)  // 可以正常打印
})

3. 解构 $

在之前我们解构一个对象使用 toRefs 解构完成之后，获取值和修改值还是需要 .value

vue3 也提供了语法糖 $() 解构完之后可以直接赋值

<template>
<h3>{{ obj }}</h3>
<button @click="change">change</button>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { $ } from 'vue/macros'
let obj = reactive({
  name: 'lzy',
  age: 18
})

let { name, age } = $(obj)  // 使用 $() 来解构

const change = () => {
  name = "LZY"  // 解构后可以直接赋值
  age = 20
}

</script>

页面变化

👉

【Vue3】32-响应式语法糖

1. 开启配置

2. $ref 和 $$

3. 解构 $