Vue第二波ref语法提案来袭 这次会进入到标准吗？

前言

其实之前Vue3做过好多次语法糖的提案，最经典的莫过于

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

import { ref } from 'vue'

const loading = ref(true)

而新语法不用引，直接就能用，类似于全局变量的感觉。除了$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 = y
    
    return 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 = 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变量》

还有现在已经定了稿的