Vue 新语法糖引争议，网友：魔改 JavaScript，这是想挑战标准？
source link: https://www.infoq.cn/article/6DX797aqwqqZE5hwRyOK
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
近日，Vue 作者尤雨溪在社区意见征求稿（RFC）上提交了一份 Ref 语法糖的提案，引起了开发者们的争议。
起因是一个新语法糖
尤雨溪在该 Ref 语法糖的提案中加入了一个新的功能：在单个文件组件（SFC）中引入了新的 script 标签写法，写法为 <script setup> 。这种写法会自动将所有顶级变量声明公开给模板（template）使用。同时在 <script setup> 中引入了一个基于编译器的语法糖，用于消除 ref 的 value 属性，该语法糖在编译期间自动将语法糖转为正常代码。
在 RFC 中，用一段 HTML 代码进行了举例。编译前，代码为：
<script setup>
// declaring a variable that compiles to a ref
ref: count = 1
function inc() {
// the variable can be used like a plain value
count++
}
// access the raw ref object by prefixing with $
console.log($count.value)
</script>
<template>
<button @click="inc">{{ count }}</button>
</template>
复制代码
编译后，代码为：
<script setup>
import { ref } from 'vue'
export default {
setup() {
const count = ref(1)
function inc() {
count.value++
}
console.log(count.value)
return {
count,
inc
}
}
}
</script>
<template>
<button @click="inc">{{ count }}</button>
</template>
复制代码
引发争议
该语法糖提案发布后，很多开发者在下方留言表示反对。引起开发者们反对的主要原因在于几个方面：对 JavaScript 的魔改太严重；为什么用标签语法而不是直接发明新语法；感觉心智负担变重了等等。部分反对者认为 Vue 此举是想挑战标准，对这种反标准的行为持反对态度。
一位小哥有理有据地对该提案表示了反对：当代码中有两个 ref: 时，就不是合法的 JS 了，所以尤雨溪的提案不合适。
而作者尤雨溪对 GitHub 上的每条质疑都进行了回应。他表示，自己知道这一提案可能会引发争议，但提交该语法糖的动机是希望：
-
通过自动暴露顶级变量来减少代码的冗余度；
-
通过 ref: 语法 让 ref 更高效。
此外，尤雨溪还在知乎上对三个主要的问题进行了回应：
看上去不像 JavaScript
ref: count = 1 使用的是标签语法，在 syntax 层面是合法的 JavaScript，而且在非严格模式下是可以正常执行的，甚至语义也是声明了一个名为 count 的全局变量。同时这也是合法的 TypeScript 语法，不会和类型声明混淆（类型声明必然需要 let 和 const）
当然这里确实只是语法层面的合法，实际上等于是给 ref: 这个标签赋予了一个不同的语义。标签语法本身是一个极少被使用的功能，实际使用也都是用于标记循环声明（用在 for/while 前面），像例子中 ref: count = 1 这样的用法， 其原始语义是毫无用处的 ，这也是为什么我们认为牺牲这个原始语义来获得响应式的变量声明是一个值得的交换。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK