当前位置: 首页 > Web前端 > vue.js

Vue第二波ref语法提案来了,这次会不会进标准?

时间:2023-03-31 21:52:11 vue.js

前言其实Vue3之前已经做了很多语法糖提案,最经典的就是$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属性?于是$fromRefs的诞生就是为了解决这个问题:最后一个API是$raw,raw不是本义吗?那么从名字就可以猜到,就是我们用$ref创建的其实是一个响应式对象,不是基本数据类型,但是语法糖会让我们在使用过程中使用基本数据类型是可以改变的,但有时我们想看看这个对象长什么样子,这时就需要用到$raw:函数作用域内嵌套的语法糖(尚未实现)$ref技术上可以在let声明中的任何地方使用,包括嵌套函数范围:functionuseMouse(){letx=$ref(0)lety=$ref(0)functionupdate(e){x=e.pageXy=e.pageY}onMounted(()=>window.addEventListener('mousemove',update))onUnmounted(()=>window.removeEventListener('mousemove',update))return$raw({x,y})}上面的代码将是编译d喜欢这样:import{ref}from'vue'functionuseMouse(){letx=ref(0)lety=ref(0)functionupdate(e){x.value=e.pageXy.value=e.pageY}onMounted(()=>window.addEventListener('mousemove',update))onUnmounted(()=>window.removeEventListener('mousemove',update))return{x,y}}但是目前还不支持这种写法,只支持不在函数或其他块级作用域中的refs,尤其是语法糖这种语法糖在单文件组件之外是否应该支持目前还不确定。这种语法糖可以通过babel等编译工具转换成任何合法的JS或TS代码,但新语法目前只在中添加一个setup属性,用来表示里面的代码会被预处理一些特殊的行为。因为它是作为@vue/compiler-sfc模块的一部分实现的,所以它允许现有的Vue用户开始使用新语法,而无需像babel这样的任何额外配置。functionuseDebouncedRef(value,delay=200){让超时返回customRef((track,trigger)=>{return{get(){track()返回值},set(newValue){clearTimeout(timeout)timeout=setTimeout(()=>{value=newValuetrigger()},delay)}}})}exportdefault{setup(){return{text:useDebouncedRef('hello')}}}难道不需要写.value再次属性?那么在单文件组件中,就会出现这个变量需要写.value,那个变量不用写的情况,很容易让人不知所措。虽然以后可能会有像customRef这样的API的$customRef语法糖,但是我觉得写个.value属性也没什么问题吧?至于与之竞争……虽然有时写多了有点烦,但至少很容易理解:使用..还有一些其他的API如:provide、inject等,目前的语法糖并不能兼容它们,所以还是会出现一会儿需要.value,一会儿不需要.value的情况。还有一个最重要的一点就是:一个框架的写法总是在变,不利于推广。想想Vue3.0和Vue3.2的区别有多大。如果这次开了个坏头,日后反而会进一步助长游大魔编书的气氛。当然,他这样做是为了我们好。他改变了这些东西,使我们写作更方便。有些改动真的很好,比如:《Vue超好玩的新特性:在CSS中引入JS变量》和现在已经敲定的的语法糖,我们以前导入一个组件需要重新注册:importXxxfrom'Xxx.vue'exportdefault{components:{Xxx}}这样的代码写多了真的很烦,现在只需要导入没有注册,但是这本质上并没有改变语义,但是新的语法糖明显改变了语义:letloading=$ref(true)按理说loading应该是一个Proxy代理对象,但是现在变成了一个布尔值,还有一个莫名其妙的$ref函数。当然你可能会说:如果你不喜欢它,你为什么不直接使用它呢?话是这么说没错,但是你不用,不代表别人不用。有些人使用它,有些人不使用它。在这种情况下,出现了语法分裂。毕竟我们还要看别人的代码。有时候是接手遗留项目,有时候是看看别人在GitHub上的项目。当一些人使用它而另一些人不使用它时,这是非常不舒服的。你怎么认为?大家可以在评论区留言,看看是喜欢这个语法糖的人多还是反对的人多。结语我们把新语法糖的提案地址放在这里:https://github.com/vuejs/rfcs/discussions/369,希望大家积极参与和评论,但是有一点要注意:使用英文!可能有人会说:中国人都用什么英语?虽然英文也能看懂,但是评论区也不是全是中文的。Vue仍然有相当数量的外国粉丝,而且不全是美国人。那些非英美的开发者,如果他们只想过得开心,说自己的母语,我们就没法交流了。同时,这会进一步缩短中国人在海外的形象:别人都用英文,你们中国人用自己的语言,不守规矩。那么可能会有人的英语水平真的很差。我们可以这样做:找到百度翻译,输入中文翻译成英文,然后把英文复制过来。这样的翻译虽然不一定完全准确,但至少可以勉强听懂。同时,还有一个技巧就是把翻译成英文的句子再翻译回中文,看哪里的语义变化比较大,然后针对那个地方改写。