前言大家应该都知道,如果使用Vue3的CompositionAPI定义一个reactive变量,通常有两种形式,一种是使用ref,一种是reactive:一般来说ref是用来定义一个基本数据类型的,reactive是用对于引用类型,那么问题就来了,ref虽然定义了一个基本数据类型,但它实际上是一个引用类型,取值和赋值时必须带上.value属性:这个有点不直观,很可能不小心写成这样:这个如果有TS和ESLint加持就好了,没有的话就很难找错了,什么事都没有我们eful错误信息,而且每次都带这个.value真的很难看,写起来也很麻烦!reactive的缺点是不能解构,解构会失去响应性:也许有人会说,不是有toRefs吗?使用toRefs后会返回.value问题:其实我个人觉得还可以,因为写习惯了,而且我一直在用TS带提示和自动补全,所以我觉得问题不大,但是知乎的《为什么 vue3 删不掉 ref() 这样冗余的函数,但 svelte 可以?》这样的问题已经深深的伤了老大的心,老大自己的强迫症也犯了,毕竟,他当时创造Vue最成功的要素之一就是方便。但是现在这种多余的写法跟方便没关系,所以无论如何都要解决这个问题,总不能让人说Vue写起来不如Svelte方便吧?我先后创建了三种不同的语法糖,分别是:《[译]尤雨溪: Ref语法糖提案》《Vue第二波ref语法提案来袭 这次会进入到标准吗?》本篇(第二波语法糖的修改版),我们先简单了解一下这三种语法糖的写法:第一波语法第一波sugar主要是模仿Svelte的写法。我们来看一个Svelte中文官网给出的例子:这个$:是一个叫做label的语法,这个语法不是Svelte自己的语法,而是一个合法的语法,已经被遗弃很久了,只是这个语法最初不是这样用的,是用在嵌套循环中:letnum=0outermost:for(leti=0;i<10;i++){for(letj=0;j<10;j++){if(i==5&&j==5){continueoutermost}else{console.log(i,j,88)}num++}}console.log(num)//95看不懂也没关系,也没有必要看懂这个语法,因为不够直观,用处不大,所以几乎没人用它!当我写这个的时候编辑器中的代码,ESLint报错:Translation:LabelsyntaxisderivedfromtheGOTOstatement,使用它会使代码难以理解和维护。——ESLint但既然没有人用,而且还是JS的合法语法,用它来告诉编译器这里声明了一个ref变量不是很完美吗?所以裕达也创造了一个类似Svelte的语法:这是因为标签语法根本不是这样使用的。本来是打算配合break和continue一起使用的,虽然用在其他地方不算语法错误,但是你明显修改了JS原有的语义!游达虽然表示不满:斯维尔特为什么要用这个东西,你什么都不说,我用这个你们开始喷东西了?!个人感觉是因为Svelte从一开始就说它是一个编译器,没有沉重的历史包袱,而Vue正好相反。而Svelte本身也不是主流框架,属于爱折腾的人。但是Vue不一样。有多少人靠Vue谋生?不是每个人都喜欢这么折腾的。于是无奈之下,游达只好放弃了这个求婚,但这件事却一直萦绕在游达的心头,犹如一根刺,他吸收了第一波语法糖教学,重新开始。.起草了新提案:第二波语法糖可以看到我们没有引入变量$ref,就是Where它是从哪里来的?它是一个全局变量,只要在又是什么$fromRefs?这东西以前没有!只听说过toRefs:其实这个$fromRefs就是为了匹配toRefs而创建的。比如我们在别处写了一个useXxx:import{reactive}from'vue'conststate=reactive({x:0,y:0})exportdefault=(x=0,y=0)=>{state.x=xstate.y=yreturntoRefs(state)}所以当我们使用它时:.value)这不就是不想再看到的.value属性吗?所以$fromRefs就是为了解决这个问题而诞生的:最后一个API是$raw。原始不代表原创!那么从名字就可以猜到,那就是我们用$ref创建的其实是响应式对象,而不是基础数据类型。但是语法糖允许我们像使用基本数据类型一样改变它,但有时我们想看看对象长什么样,这时我们需要使用$raw:改进版这个语法糖的版本在很短的时间内得到了改进。改进版的主要目的是将全局变量改为只有$和$$。如果我们不使用语法糖,是这样写的:使用语法糖后,它变成这样:如果我们要恢复loading变量,需要使用$$:或者可以这样写:第三波语法糖第三波语法糖主要是在第二波语法的基础,除了很多人觉得需要写成$(ref())实在是太多了...另一方面实现了props这个语法糖。新语法主要是为每个可以创建.value变量的方法添加$前缀,例如:refcomputedshallowRefcust同时omReftoRef保留了改进版的$变量和$$变量,用于解构props:你要知道以前我们是不能解构props的,现在我们可以使用ES6解构默认值的写法给props设置默认值:三波语法糖提案地址第一波:github.com/vuejs/rfcs/...第二波:github.com/vuejs/rfcs/...第三波:github.com/vuejs/rfcs/...这个框架明明是国人用的最多的,可笑的是一群老外居然在讨论Vue的下一步计划。肯定有人会说:中国人忙着996,哪有空?探究那些东西...就看你是不是想:这些乱七八糟的语法糖对你来说无所谓,语法出来我就学什么,我只是一只沉默的羔羊,还是说:你只是垫底这篇文章的评论说你喜欢这些新语法或者讨厌这些新语法,你也懒得在GitHub上说英文了。链接已经发给大家了,就看大家是想凑热闹,还是点开链接,勇敢的发表自己的心声。当然,如果我们去GitHub,还是得会英文。友达虽然能听懂中文,但评论区不全是中文,Vue还是有相当多的外国粉丝。并非所有人都是美国人。那些不是英国人和美国人的开发者,如果他们只想玩得开心,说他们的母语,我想我们是没法交流的。同时,这也将进一步拉近中国人与人之间的距离。海外形象:别人用英文,你们中国人用自己的语言,不守规矩。那么可能会有人的英语水平真的很差。我们可以这样做:找到百度翻译,输入中文翻译成英文,然后把英文复制过来。这样的翻译虽然不一定完全准确,但至少可以勉强听懂。同时,还有一个技巧就是把翻译成英文的句子再翻译回中文,看哪里的语义变化比较大,然后针对那个地方改写。如果你喜欢这个语法,那就去点个赞吧,表扬一下,所以一定要尽快收录到Vue的标准语法中。如果不喜欢,那就赶紧多喷几句吧,所以这个语法很有可能像第一波语法糖提案一样被抛弃。
