这就有点不太符合直觉了，很有可能一不小心就被写成了这样：

<script setup>
import { ref } from 'vue'

let isLoading = ref(true)

if (isLoading) {
  isLoading = false
}
</script>

<script setup>
import { reactive, toRefs } from 'vue'

const user = reactive({
  name: '令狐冲',
  age: 22,
  gender: '男'
})

let { age } = toRefs(user)
age.value = 18
</script>

其实我个人觉得还好啦，因为已经写习惯了，再加上一直用TS有提示和自动补全，所以感觉没什么问题。

第一波主要是模仿了 Svelte 的写法，我们先来看看 Svelte 的中文官网给出来的一段例子：

<script>
export let title;

// 这将在“title”的prop属性更改时更新“document.title”
$: document.title = title;

$: {
  console.log(`multiple statements can be combined`);
  console.log(`the current title is ${title}`);
}
</script>

let num = 0

outermost:
for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        if (i == 5 && j == 5) {
            continue outermost
        } else {
            console.log(i, j, 88)
        }
        num++
    }
}

console.log(num) //95

翻译： Label 语法源于 GOTO 语句，使用它将会令代码变得难以理解、难以维护。 —ESLint

不过既然没什么人在用，同时它还是 JS 的合法语法，那用它来告诉编译器这里是声明了一个 ref 变量岂不是很完美？于是乎尤大也搞了个和 Svelte 类似的语法：

<script setup>
ref: isLoading = true

if (isLoading) {
  isLoading = false
}
</script>

那么大家为何会如此反对呢？就是因为 label 语法压根儿就不是这么用的，人家原本是为了和 break 、 continue 配合使用的，虽然在别的地方用也不算是语法错误，但你这么做明显是修改了 JS 原本的语意！虽然尤大表示很不服啊：为什么 Svelte 用这玩意你们都没说啥，我一用这玩意你们就开喷？！

个人感觉是因为 Svelte 从一开始就说自己是一个编译器，没有沉重的历史包袱，而 Vue 却恰恰相反。而且 Svelte 本身也不是什么主流框架，属于给那帮爱折腾的人玩的。

但 Vue 不一样，已经有多少人要靠着 Vue 吃饭呢，并不是所有人都那么爱折腾的。

于是在万般无奈之下，尤大只好放弃了这个提案，但这件事在尤大心里始终还是挥之不去、如鲠在喉，于是乎他吸取了第一波语法糖的教学，卷头重来又起草了一份新提案：

第二波语法糖

可以看到我们并没有引入 $ref 这个变量，这个变量是从哪来的的呢？是只要在 <script> 标签里写了 setup 这个属性就会自动注入的一个全局变量（ 需要先开启实验性语法开关 ）

尤大心想：你们不是嫌我之前用了不规范的语法么？那我这回这么写应该没问题了吧！想想之前我们定义一个 ref 变量，首先需要先把 ref 引进来然后才能用：

import { ref } from 'vue'

const loading = ref(true)

<script setup>
import { ref, computed } from 'vue'

const num = ref(1)
const num_10 = computed(() => num.value * 10)
</script>


<script setup>
let num = $ref(1)
const num_10 = $computed(() => num * 10)
</script>

$fromRefs 又是个啥呢？这玩意在之前没有啊！只听说过 toRefs ：

<script setup>
import { fromRefs } from 'vue' // 这个API并不存在
import { toRefs } from 'vue' // 这个API倒是有 也就是只有 to 没有 from
</script>

其实这个 $fromRefs 正是为了配合 toRefs 而产生的，比方说我们在别的地方写了一个 useXxx ：

import { reactive } from 'vue'

const state = reactive({
    x: 0,
    y: 0
})

export default = (x = 0, y = 0) => {
    state.x = x
    state.y = y

    return toRefs(state)
}

于是我们在使用的时候就：

<script setup>
import { useXxx } form '../useXxx.js'

const { x, y } = useXxx(100, 200)

console.log(x.value, y.value)
</script>

这岂不是又要出现尤大最不想看到的 .value 属性了吗？所以 $fromRefs 就是为了解决这个问题而生的：

<script setup>
import { useXxx } form '../useXxx.js'

const { x, y } = $fromRefs(useXxx(100, 200))

console.log(x, y)
</script>

最后一个 API 就是 $raw 了，raw 不是原始的意思嘛！那么看名字也能猜到，就是我们用 $ref 所创建出来的其实是一个响应式 对象 ，而不是一个基本数据类型，但语法糖会让我们在使用的过程中像是在用基本数据类型那样可以改来改去，但有时我们想看看这个 对象 长什么样，那么我们就需要用到 $raw 了：

<script setup>
const loading = $ref(true)

console.log(loading) // 其实打印的不是 loading 这个对象 而是它里面的值 相当于 loading.value
console.log($raw(loading)) // 这回打印的就是 loading 这个对象了
</script>

<script setup>
import { ref } from 'vue'

const loading = ref(true)

console.log(loading.value)
</script>

用语法糖以后就变成了这样：

<script setup>
import { ref } from 'vue'

const loading = $(ref(true))

console.log(loading)
</script>

如果我们想还原  loading  这个变量，我们就需要用到 $$ 了：

<script setup>
import { ref } from 'vue'

let loading = $(ref(true))

console.log($$(loading))
</script>

或者也可以写成这样：

<script setup>
import { ref } from 'vue'

const loadingRef = ref(true)
let loading = $(loadingRef)

console.log(loadingRef === $$(loading))
</script>

第三波语法糖主要是在第二波语法的基础上又进行了改进，除了许多人觉得要写成 $(ref()) 的话实在是太那什么了…

与此同时保留了改进版中的 $ 变量与 $$ 变量，用于对 props 的解构：

<script setup>
const { isLoading } = $(defineProps({ isLoading: Boolean }))
</script>

要知道在以前我们是不能对 props 进行解构的，而现在还可以利用 ES6 的解构默认值写法来为 props 设置默认值：

<!-- 以前 -->
<script setup>
const props = defineProps({
  isLoading: {
    type: Boolean,
    default: true
  }
}))

console.log(props.isLoading)
</script>

<!-- 现在 -->
<script setup>
const { isLoading = true } = $(defineProps({ isLoading: Boolean }))

console.log(isLoading)
</script>

所有语法糖提案的地址 

• 第一波：https://github.com/vuejs/rfcs/pull/228

• 第二波：https://github.com/vuejs/rfcs/discussions/369

• 第三波：https://github.com/vuejs/rfcs/discussions/413