前言其实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变量》和现在已经敲定的
