vue新ref语法糖争议

2023-11-16

近日,Vue 发明人尤雨溪在 Vue RFCs 下提交了一份新的 Ref 语法糖提案,该提案一经发布便引来了不少争议。

提案内容
这份提案就是在单文件组织(SFC)中引入一个新的script 标签写法,写法为

关于为什么这样做?尤雨溪表示,一方面是通过自动暴露顶级变量可以减少代码的冗余度;另一方面,通过 ref: 语法可以让 ref 更高效。

具体案例
例如这样的 HTML 代码:

引发争议
针对以上改动,Github 上持反对意见用户较多:

在这里插入图片描述

在这里插入图片描述
大家可以前往:https://github.com/vuejs/rfcs/pull/222 看老外们对这一改动的反馈。

尤雨溪回复
目前 GitHub 上的反馈似乎偏负面,对此尤雨溪在知乎上进行了回复,原文地址:https://www.zhihu.com/question/429036806/answer/1564223482

RFC本身加上原帖里的回复我已经写了大概快上万字的英语了,但看起来知乎很多回答应该是没看完就急着发表意见了,所以还是用中文针对一些常见的疑问和误解解释一下。

看上去不像 JavaScript

ref: count = 1 使用的是标签语法,在 syntax 层面是合法的 JavaScript,而且在非严格模式下是可以正常执行的,甚至语义也是声明了一个名为 count 的全局变量。同时这也是合法的 TypeScript 语法,不会和类型声明混淆(类型声明必然需要 let 和 const)当然这里确实只是语法层面的合法,实际上等于是给 ref: 这个标签赋予了一个不同的语义。标签语法本身是一个极少被使用的功能,实际使用也都是用于标记循环声明(用在 for/while 前面),像例子中 ref: count = 1 这样的用法,其原始语义是毫无用处的,这也是为什么我们认为牺牲这个原始语义来获得响应式的变量声明是一个值得的交换。

为什么用标签语法而不是直接发明新语法

使用标签语法确实是受到了 Svelte 的启发。根本原因在于和 JS 保持 syntax 层面的完全兼容能够尽可能保证现有的 JS 工具生态对接。标签语法能够正确地被 Babel,TS parser/transformer(如 esbuild/swc),Prettier,ESLint 以及任何 IDE 的 JavaScript 语法高亮所直接支持,只有在涉及语义的情况下,如类型推导和 ESLint 变量相关规则才需要针对性的兼容。如果用一个全新的非标准语法,就意味着需要在 parser 层面对上述所有工具进行修改,基本不可行。

类型推导的问题 RFC 里也有专门讨论,有兴趣的可以看原文,这里不赘述。

感觉心智负担变重了

虽然底层是编译到 ref() 的语法糖,但其实对于新人来说根本不需要知道 ref() 的存在就可以使用,因为在不需要获取底层 ref 对象的场景下,通过 ref: 声明的变量心智模型和用 let 声明的变量的心智模型完全一致。你就把 ref: 当成一个响应式的 let 就行了。这个模型已经足够实现大部分入门级别的功能,只有到进阶之后开始学习逻辑抽取复用时,才需要知道 ref() 的概念。

对于已经学习了 Composition API 的用户来说会觉得 “又多了一个概念”,同时由于 RFC 事无巨细地讨论了编译的规则,会产生一种 “心智负担增加了” 的错觉。其实我很久以前用 CoffeeScript,Babel,或是刚开始用 TS 的时候,也有这样的感觉,因为我喜欢用之前先看看这东西编译出来是个什么样子。结果就是看过了这个之后用着上层语法,脑子里忍不住去把它转换成底层语法。但这本质上是我们的大脑在习惯了底层思维方式之后的一种惯性。这种惯性在使用新语法一段时间之后很快就消失了,我们的大脑适应能力还是很强的。如果你开始就不 care 编译出来是个什么结果,就更不会有这个问题(你用 nullish coalescing 或者 decorator 的时候会去想着 babel/TS 编译出来是个什么结果么?)

对于从零开始的用户来说,如上所述 ref: 就是一个能触发响应的 let 而已,学习成本是很低的。具体可以看一个对比:

Options API

也可以看一下一个已经实际使用该语法的用户的代码和他的使用体验:https://github.com/vuejs/rfcs/pull/222#issuecomment-723500871

其他一些疑问

review 时没办法一眼看出来这是普通变量还是ref变量。

Vetur 可以给 ref: 声明的变量加上不同的高亮。

在 SFC里用 ref: 语法糖,日后想把逻辑抽到 .ts/.js 中时,又要改成 ref()的形式。这两种风格的不一致也影响了重构的效率。

由于编译转换规则非常简单直接,Vetur 可以提供这样的工作流:选择代码块 -> 右键 “compile ref sugar” -> 剪切 -> 黏贴。可以提供双向转换,完全机械操作,几乎没有脑力损耗。需要一提的是 Svelte 的响应编译模型无法解决这个问题,因为 Svelte 编译出来的代码不是给人维护的代码,且和组件上下文强绑定,所以没法挪到组件外部。这也顺便回答了 “既然都要语法糖了为什么不像 Svelte 那样走完全编译路线“。

这里不否认组件内外风格的切换是会有额外的心智成本的,但这是否能够接受可能会因人而异。因此,ref:语法糖完全是可选的,可以通过编译选项强制关闭。不喜欢的话依然可以在

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue新ref语法糖争议 的相关文章

  • 贝叶斯优化Bayesian Optimization(学习笔记)

    贝叶斯优化应用背景 如果待解决问题为中输入 x x x 输出 f x f x f x 具有如
  • C语言中的.c 和.h 文件区别

    本文的大部分内容来自网上 经过自己的理解和总结整理而来 希望对和自己有同样的困惑的人予以参考 感谢那些网上的大牛们 是你们的无私 让我学到了很多的东西 予人玫瑰 手留余香 文章转载请注明出处 首先我们先看一下这个例子 由于我也不知道到底那个
  • 微信小程序做店铺收费吗?【微信小程序店铺】

    很多商家企业现在都已经有自己的微信小程序店铺了 还没有的微信小程序店铺的商家企业也是计划开通自己的微信小程序店铺 那么对于他们来说 除了要知道怎么做微信小程序店铺 还需要了解微信小程序做店铺收费吗这个问题 那么下面就对微信小程序做店铺收费吗

随机推荐

  • Jmeter —— jmeter接口自动化测试操作流程

    在企业使用jmeter开展实际的接口自动化测试工具 建议按如下操作流程 可以使整个接口测试过程更规范 更有效 接口自动化的流程 1 获取到接口文档 swagger word excel 2 熟悉接口文档然后设计测试用例 一般都是先在exce
  • Android PowerSupply (五)ChargeIC SGM41511 IC简介

    目录 Android PowerSupply 一 总概 Android PowerSupply 二 power supply core Android PowerSupply 三 power supply sys Android Power
  • JAVA进阶(三)——注解和反射

    文章目录 三 注解和反射 3 1 注解的概念 什么是注解 Annotation Annotation的作用 Annotation的格式 Annotation在哪里使用 3 2 内置注解 Override 定义在java lang Overr
  • curl无返回值

    问题 输入curl xxx xxx xxx xxx dddd service 按下回车后无任何返回值 解决 在命令的最后加上 如上述命令改为 curl xxx xxx xxx xxx dddd service 后成功返回html
  • matlab练习程序(广度优先搜索BFS、深度优先搜索DFS)

    如此经典的算法竟一直没有单独的实现过 真是遗憾啊 广度优先搜索在过去实现的二值图像连通区域标记和prim最小生成树算法时已经无意识的用到了 深度优先搜索倒是没用过 这次单独的将两个算法实现出来 因为算法本身和图像没什么关系 所以更纯粹些 广
  • range函数参数较大大时占据大量内存

    20200806 引言 编写一个编写的时候 发现内存逐步占用越来越大 脚本的目的是利用循环生成大量的数值 然后利用生分成的数值来执行某个函数 大致上的函数伪码就是下面这个 def some compute x pass max value
  • 基于 Android NDK 的学习之旅-----数据传输一(基本数据类型和数组传输)(附源码)

    之前的一些文章都有涉及到上层和中间层的数据传输 简单来说 也就是参数和返回值的使用 因为中间层要做的最多的也就是数据传输与转换 下面来介绍下这方面的知识 数据传输可分为 基本数据类型传输 和 引用数据类型的传输 因为数组传输也比较特别 其实
  • 神经网络基础-GRU和LSTM

    在深度学习的路上 从头开始了解一下各项技术 本人是DL小白 连续记录我自己看的一些东西 大家可以互相交流 本文参考 本文参考吴恩达老师的Coursera深度学习课程 很棒的课 推荐 本文默认你已经大致了解深度学习的简单概念 如果需要更简单的
  • Thread UncaughtExceptionHandler

    做web开发的时候 一般都是在Controller统一捕捉异常 在业务逻辑里抛出自定义的异常 如果代码中使用了多线程 线程中出错 或者你在线程中抛出一个异常 在最外层Controller里是无法捕捉到线程中的异常的 Thread类中定义了一
  • 用 Python 基于 pyecharts 对微信好友(性别,地域)进行分析,并数据可视化

    代码我是在anaconda的jupyter notebook里编写运行的 需要安装的库 在cmd里安装 pip install wxpy pip nstall pyecharts wxpy 在 itchat 的基础上 通过大量接口优化提升了
  • 机器学习面试问题总结

    机器学习算法面试问题 美团AI算法 1 xgboost原理 怎么防过拟合 2 gbdt推导 3 boosting和bagging在不同情况下的选用 4 DBSCAN原理和算法伪代码 与kmeans OPTICS区别 5 LSTM原理 与GR
  • STM32开发——简介、开发环境(Keil5、CubeMX)、HAL库

    目录 1 简介 初识STM32 2 开发环境 2 1使用Keil5 2 2使用STM32CubeMX 3 标准库与HAL库区别 4 推挽输出与开漏输出 1 简介 初识STM32 什么是单片机 单片机 Single Chip Microcom
  • STM32CubeMX 生成工程步骤图文说明

    本文也适合STM32CubeMX 支持的所有芯片的设置 调整文章结构 添加图文说明 2022 2 增加其他应用章节 增加 ADC 设置说明 2023 3 考虑到增加的内容越来越多 修改文章标题 增加PWM设置说明 2023 4 增加 DAC
  • 2023年美国大学生数学建模MCM问题Y:了解二手帆船的价格-解题思路及代码分享

    2023 MCM Problem Y Understanding Used Sailboat Prices 2023年MCM问题Y 了解二手帆船的价格 和许多奢侈品一样 帆船的价值会随着老化和市场条件的变化而变化 附件中所附的 2023 M
  • 变分贝叶斯variable bayes 和EM算法关系

    https blog csdn net weixin 30851409 article details 98905998
  • angular调用应用浏览器(如微信)内置api

    由于浏览器内置api的对象是在具体应用浏览器运行时注册生成的 因此如果不在代码中处理会过不了编译 对于angular 可以采取添加 ts ignore 来忽略 innerApi为非声明的对象 ts ignore innerAPI openW
  • 时序预测

    时序预测 MATLAB实现SO ELM蛇群算法优化极限学习机时间序列预测 目录 时序预测 MATLAB实现SO ELM蛇群算法优化极限学习机时间序列预测 效果一览 基本介绍 程序设计 学习总结 参考资料 效果一览 基本介绍 Matlab实现
  • C++中的友元函数

    什么是友元函数 友元函数 与成员函数相对 是定义在类外部 可以访问该类中的所有私有 private 成员和保护 protected 成员 指定函数为某个类的友元函数的方法是使用关键字friend friend lt 返回类型 gt lt 函
  • 华为od机试题1 真题

    华为od机试题 真题 86 射击比赛成绩排序 85 计算屏幕字母数量 84 组成最大数字 82 输出字符串中最小数字 81 数字4的个数 80 整数排列 79 多条件排列 78 时间排序 以下题目附带Java解法 是我个人写的 不一定是标准
  • vue新ref语法糖争议

    近日 Vue 发明人尤雨溪在 Vue RFCs 下提交了一份新的 Ref 语法糖提案 该提案一经发布便引来了不少争议 提案内容 这份提案就是在单文件组织 SFC 中引入一个新的script 标签写法 写法为 关于为什么这样做 尤雨溪表示 一