嗨，我是你稳定更新、关心时事的勾勾。

关注前端娱乐圈的朋友们都知道，最近确实发生了一件大事。

首先明确一件事情，想要吃这个前端娱乐圈的大瓜，各位看官姥爷得先用一下刚新鲜出炉、十分热乎的 Vue3.0 版本，否则，这个瓜可能不太甜：）

咱们来捋一捋到底咋回事。

10月30号，我们的尤大大 [@尤雨溪]（https://www.zhihu.com/people/evanyou）更新了 New script setup and ref sugar #222 提案，如提案的标题所说，主要有两个方面的内容：

• 第一个就是引入新的 script 标签写法 `<script setup>` ，可以自动将所有顶级变量声明暴露给模板（template）使用；
• 第二个就是在 `<script setup>` 中加入了一个语法糖，消除了 ref 的 value 属性；

截止到我写这篇文章时，能看到在 github 上大家对这个提案的态度：

不支持的人，占据了大部分。其中最具争议的就是 ref 的语法糖问题；

为了将问题更加聚焦，前几天，尤大大将这个提案的两个内容，分离到了各自的 PR 中，setup 是 RFC 227（https://github.com/vuejs/rfcs/pull/227），ref sugar 是 RFC 228（https://github.com/vuejs/rfcs/pull/227）。

在 setup 的 RFC 227 中，大部分是表示支持的，讨论也在一片祥和的氛围下进行，setup 确实简化了代码，勾崽本人也是比较喜欢的，希望能够持续推进，并在正式版中见到：

<script setup> 
  // 引入的 Foo 组件可以直接在 template 里使用 
  import Foo from './Foo.vue' 
	import { ref } from 'vue'  
	
	// 相关内容可以直接暴露  
	const count = ref(0) 
  const inc = () => { count.value++ } 
</script>  
	
	<template>   
    <Foo :count="count" @click="inc" /> 
  </template>

到了 ref sugar 的 RFC 228 中，就比较有意思了。尤大大用了前后六个感叹号，标注：“ !!! 在评论之前，请务必完整的阅读 RFC 和在 #222 中的讨论 !!! ”

由此可见，这个瓜，很甜（请原谅我无耻的看热闹心态）。

说了半天，那么 ref sugar 到底是什么？为什么会让前端人都快打起来了？来，先看一段代码：

<script> 
  import Foo from './Foo.vue'  

	export default {   
    components: {     
      Foo   
    },   
    setup() {     
      const count = ref(0)     
      const increment = () => count.value++     
      return {       
        count,       
        increment     
      }   
    } 
  } 
</script>  

<template>   
    <Foo @click="increment">{{ count }}</Foo> 
</template>

上面的代码是一个计数器的小例子，简单解释一下：

在 Composition API 的 setup 函数中，使用 ref 包装了一个响应式对象 count ，这是一个包装对象，其中 value 属性值为 0，需要使用 `counter.value` 对其进行访问或者修改。

但是，在模板中访问时，ref 包装对象会 [被自动解开]（https://www.vue3js.cn/docs/zh/guide/reactivity-fundamentals.html#ref-解开）。

因此在模板中访问不需要使用 `.value` 。这也就是我们在 Foo 组件中看到的 ` {{ count }}` 而不是 `{{ count.value }} ` 的原因。

所以，才有了 ref sugar 的提案，而提案中的内容，就是优化了代码的写法，使代码看起来更加简洁直观；

来，咱们用提案中的方式来重构一下上面的案例：

<script setup> 
  import Foo from './Foo.vue'  

	ref: count = 0 
	const increment = () => count++ 
</script>  
  
<template>   
   <Foo @click="increment">{{ count }}</Foo> 
</template>

很明显，代码少了很多，在重构后的代码中，针对 ref 的改变，直观上有两个区别：

• 在包装对象 count 时，使用 ` ref: ` 的方式而不是 `ref()`；
• 在修改 count 时直接使用 `count++` 不再需要 ` .value++ ` 。

就是因为不想看到 `.value` ，所以才想引入 ` ref：` 语法糖。

之所以将 ` ref: ` 称为语法糖，就是因为本质上并没有改变，在代码编译过程中依然是 `ref(0)` 和 ` count.value++` 的方式运行。

这个语法糖最大的争议点不在于应不应该去掉 `.value` ，而是去掉 ` .value` 的方式是使用 `ref:` 。

之所以有这么大的争议，首先是因为 Vue 本身就具有很多 “奇淫巧计”，现在又来这么一个，无端增加了学习成本和记忆成本。

再者就是 ` ref: count` 这个冒号形式的语法规则，在 JS 编程中实在少见，容易让人看不懂，甚至是产生误会 （ 难道 ECMAScript 又更新标准了？还是使用了什么新语言？）。

最有意思的是，很多人还没有完全搞清楚是怎么回事，文档说明和讨论内容也没怎么看，就一顿瞎评论。并且已经不是就问题本身讨论了，而是在冷嘲热讽，甚至有些失去理智，有着人身攻击的倾向。真是心疼 @尤大大，难怪上面会有六个大大的 感叹号 ? 。

不仅在 github 上，在国内的程序员聚集地知乎上也有相关的话题讨论，尤大大也现身说法，却表示这一届程序员很难带：

其实在 RFC 中，尤大已经说的很明白了，ref 本身就是为了解决 JavaScript 这门语言的局限性而出现的折中方案。使用 `ref：` 解决频繁 `.value` 的问题也只是个提案，本意就是和大家一起讨论，结果，你看。

观众姥爷们可能也发现了，我不光在知乎点了赞，在 github 的三十多个赞同里面，也有我的一票。说实话，我是真心支持这个提案的。

为啥支持呢？接下来我说一下自己的考虑，你可能不同意，但请一定保持理性交流。

做程序员最重要的是什么？

冷静！保持克制！

做前端切图仔最重要的是什么？

安静吃瓜，少掉头发！

1、ECMA 的统一标准问题：

很多朋友担心，Vue 这样做会影响到 ECMA 的统一标准。大家被兼容性已经搞怕了，一朝被蛇咬，十年怕井绳。

`ref:` 冒号语法规则不是标准的 JS ，那是因为平时用的少，并不代表没有。再说了，React 的 JSX 就是标准语法吗？刚开始的时候，不也有很多人反对，后来还不是真香？

很多人都说 Vue 一个小框架就想造反，不自量力地倒逼 ECMA，大有影响标准化制定的趋势。拜托！大哥，我就是个语法糖好嘛。

再说个不沾边的，Google 先实现再倒逼标准支持的事情还少吗？HTTP2 和 HTTP3 不都是这个套路吗。ECMA 本身就具有非常多的实现倒逼标准的事情，凭什么 Vue 就不行？双标我家尤大嘛这不是……

2、心态问题：

（这一段有点秀了，各位做好心理准备）

前一段时间，程序员圈里各种 “学不动” 的梗出现在各个更新代码的评论里。还有各种表情包也是层出不穷，尤其是前端圈里。

前端领域的内容确实更新太频繁，需要学得非常多。现在的前端基本就是几年前的 “全栈” ，单纯面向 UI 编程的时代已经过去了。

但是各位冷静地想想，现在前端的平均薪资和在编程界的地位和以前一样吗？我们已经不是曾经那个单纯的切图仔了，我们要面向业务逻辑编程了。

但是，前端编程中相对应的工具和配套设施不也应与时俱进吗？频繁更新也就十分正常了。就算这个提案被最终认定是错误的，也是值得尝试的错误，谁在成长的路上没跌倒过呢！

3、代码重构和配套工具问题：

尤大已经说的很明确了，这些都有，都能解决……

好了，前端娱乐圈里，对于 ref sugar 的这个问题，勾崽就说这么多吧。

如果你有不同意见或者建议，

欢迎来公号：勾勾的前端世界

一起探讨！！