Vue第二波ref语法提案来袭这次会进入到标准吗（）前端vue.jsvue3

前言其实之前Vue3做过好多次语法糖的提案，最经典的莫过于
尤大心想：你们不是嫌我之前用了不规范的语法么？那我这回这么写应该没问题了吧！想想之前我们定义一个ref变量，首先需要先把ref引进来然后才能用：

import { ref } from 'vue'const loading = ref(true)

【Vue第二波ref语法提案来袭这次会进入到标准吗（）】而新语法不用引，直接就能用，类似于全局变量的感觉。除了$ref这个特殊的全局变量呢，这次提案还有：$computed、$fromRefs和$raw这几个玩意。我们一个个来看，先看$computed：

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

其实这个$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 = yreturn toRefs(state) }

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

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

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

嵌套在函数作用域内的语法糖用法(尚未实现) 从技术上来讲，$ref可以在任何地方被let声明使用，包括嵌套函数范围：

function useMouse() { let x = $ref(0) let y = $ref(0)function update(e) { x = e.pageX y = e.pageY }onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update))return $raw({ x, y }) }

上面的代码将会被编译成这个样子：

import { ref } from 'vue'function useMouse() { let x = ref(0) let y = ref(0)function update(e) { x.value = https://www.it610.com/article/e.pageX y.value = e.pageY }onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update))return { x, y } }

不过目前尚不支持这种写法，仅支持不在函数或者其他块级作用域中的ref语法糖。
尤大还不确定是否要做的功能这种语法糖是否要在单文件组件的外部进行支持这种语法糖本质上是可以通过babel等编译工具来转换成任何合法的JS或TS代码的，但新语法目前仅支持写在
这种岂不是又要写.value属性？那在单文件组件里就会出现这个变量需要写.value，那个变量又不需要写的状况，很容易把人搞的头大。虽说以后对customRef这种API可能会单独再出一个$customRef语法糖，但我觉得就算写了个.value属性也没啥吧？至于就跟它较上劲了么… 虽说有时候写多了确实会稍微有点烦，但至少还是很容易理解的嘛：用.value属性触发了Proxy的getter或setter从而引发依赖收集或更新视图等操作。
还有一些其他的API如：provide、inject 等，目前的语法糖并未对它们进行兼容，所以还是会出现一会需要.value一会又不需要的情况。
还有一个最重要的点就是：一个框架的写法老是变来变去的很不利于推广，想想看Vue3.0和Vue 3.2之间有多大的差异，这次开了个坏头的话，以后就更加助长了尤大魔改编译的风气。当然他也确实是为了我们好，改的这些东西也是为了我们写起来更加的方便，有的改的也确实是不错，比如：《Vue超好玩的新特性：在CSS中引入JS变量》
还有现在已经定了稿的语法糖，以前我们引入一个组件老需要再注册一遍：

import Xxx from 'Xxx.vue'export default { components: { Xxx } }

写多了这样的代码确实有点烦，现在我们只需要引进来就行，不用注册，但这样本质上并没有改变语意，反而新的语法糖明显改变了语意：

let loading = $ref(true)

按理说loading应该是个Proxy代理对象，但是它现在却变成了一个布尔类型的值，而且还多出来个莫名其妙的$ref函数。
当然你可能会说：你不喜欢不用不就得了？话这么说没错，但是你不用不代表别人也不用，有的人用有的人不用，这样的话在语法层面就已经产生了割裂。我们终究是要看别人代码的，有时候是接手一个遗留下来的项目，有时是在GitHub上看看别人的项目，在有的人用有的人不用的情况下就很难受。
大家怎么认为呢？可以在评论区留个言看看是喜欢这种语法糖的人多还是反对它的人多。
结语我们把新语法糖的提案地址放在这里：https://github.com/vuejs/rfcs/discussions/369，希望大家可以积极参与并进去评论，但一定要注意的一点是：要用英文！
可能有人会说：都是中国人用什么英文？虽说用英文尤大可以看得懂，但评论区不全是中国人，Vue还是有相当一批外国粉丝的，而且也不全是美国人，那些不是英国人美国人的开发者，他们如果也只图自己痛快而说自己国家的母语的话，想必我们就没有办法进行沟通了，同时这也会进一步拉近国人在海外的形象：别人都用英文，就你们中国人用自己的语言，不遵守规则。
那可能有人英文水平真的很差，我们可以这样嘛：找到百度翻译，输入中文后翻译成英文，然后再把英文复制过去。虽然这样做翻译的可能不完全准确，但最起码能达到勉强看懂的地步。同时还有一个技巧就是把翻译成英文的句子再翻译回中文，看看有哪些地方的语意发生了明显的变化，我们再针对那个地方重新自己写一遍。