Vue3的Ref提案到底發(fā)生腎摸事了

朋友們好，我是大圣，最近vue3的ref提案社區(qū)討論的比較多，社區(qū)里我看了一下相關(guān)的rfc和知乎討論，我發(fā)現(xiàn)很多年輕人不講武德，今天也摸魚寫一點(diǎn)我的看法吧

先說結(jié)論：我其實(shí)也不喜歡ref:這個(gè)語法，但是更不喜歡社區(qū)對這個(gè)提案的不包容，方言一定不好嗎？標(biāo)準(zhǔn)就一定好嗎？前端圈要以和為貴，應(yīng)該在普及普通話的基礎(chǔ)之上，各地有意思的方言也要大力推廣

發(fā)生了腎摸事

vue3有個(gè)新的語法ref，功能就是把一個(gè)簡單數(shù)據(jù)結(jié)構(gòu)變成響應(yīng)式的，比如ref(0),ref('耗子尾汁')， 副作用就是修改的時(shí)候要加一個(gè).value ，大概寫這樣

<template>
<h1>{{count}}h1>
<button?@click="add">右鞭腿button>
template>
<script>
import?{?ref?}?from?'vue'
export?default?{
??setup(){
????let?count?=?ref(1)
????function?add(){
??????count.value++
????}
????return?{?count,?add?}
??}
}
script>

關(guān)于compostion的來源和細(xì)節(jié)，參考我寫的這篇文章 那個(gè)忙了一夜的Vue3動(dòng)畫很好，就是太短了， 大概就是

1. 我們?yōu)榱私鉀Qoption api的this黑盒問題，引入了composition api
2. 為了解決reactivity操作簡單數(shù)據(jù)結(jié)構(gòu)的命名空間問題，引入心得api ref
3. 為了解決composiiton的統(tǒng)一return問題，引入了script setup
4. 為了解決re的.value副作用，引入了 ref sugar

比如用script setup提案 代碼優(yōu)化成這個(gè)樣子 ，解決了setup里面需要統(tǒng)一return的問題

<script?setup>
import?{?ref?}?from?'vue'
export?let?count?=?ref(1)
export?function?add(){
??count.value++
}
script>

最新的提案export都不用寫了，這個(gè)提案社區(qū)皆大歡喜，和Svelte越來越像

<script?setup>
import?{?ref?}?from?'vue'
let?count?=?ref(1)
function?add(){
??count.value++
}
script>

現(xiàn)在還剩一個(gè)副作用就是要操作.value ， 所以今天的主角ref語法糖就登場了，很快啊

<script?setup>
//?用ref:?新語法聲明
ref:?count?=?1
function?inc()?{
??//?直接操作變量?不用.value
??count++
}
script>

社區(qū)的批評

ref的新提案地址確實(shí)是個(gè)很酷的語法， 但是新的語法糖ref:的rfc下面的表情包，也說明不是一個(gè)討喜的方案，大概批評的點(diǎn)整理了一下，塔們說

1. 別造方言了
2. 容易混亂，心智負(fù)擔(dān)
3. 和標(biāo)準(zhǔn)脫鉤
4. 和ts語法混淆
5. vue妄圖挑戰(zhàn)標(biāo)準(zhǔn)

并且在討論中還有一些很有意思的建議 ，感覺都挺有意思,比如

1.?注釋標(biāo)記ref
<script?setup>
//?@ref?????
let?count=0
script>

2.?標(biāo)記一個(gè)新語言?vuescript
<script?lang="vs">
script>
...等等

我的看法

我其實(shí)也不喜歡ref:這個(gè)語法，但是更不喜歡社區(qū)對這個(gè)提案的不包容，各種討論聊得都是死勁，我覺得學(xué)vue是需要化勁的， 如果我是小右的話，這些批評可以用形意拳秘籍--接化三手發(fā)來回應(yīng)

接手 - 接受批評

1. 方言的批評
• 你說得對，是方言，就愛造
• 我覺得不用解釋本身這就是個(gè)標(biāo)簽語法，因?yàn)榻忉屚陮Ψ竭€有十個(gè)追問
2. 心智負(fù)擔(dān)
• 學(xué)習(xí)都是有負(fù)擔(dān)的， 要不你前端咋學(xué)會的， ts，jsx都需要學(xué)習(xí)
• ref和let其實(shí)挺像，負(fù)擔(dān)已經(jīng)很小了
3. 標(biāo)準(zhǔn)脫鉤
• 都說了我是方言 并且還是一個(gè)可選項(xiàng)，有明確的script setup標(biāo)記，不愛用其實(shí)可以不用的
4. 和ts語法混淆
• 大哥，ts也是方言，你不能因?yàn)闁|北話說的人多，就噴河南話
5. vue妄圖挑戰(zhàn)標(biāo)準(zhǔn)
• angular，react也挑戰(zhàn)了，也沒太多人噴，vue挑戰(zhàn)就不行，只能說明并不是挑戰(zhàn)標(biāo)準(zhǔn)這件事不行，而是敢于挑戰(zhàn)的人不是你 讓你嫉妒

化手 - 方言真的不好嗎

按照傳統(tǒng)前端的點(diǎn)到為止， 上面打完就討論結(jié)束了，不過還是細(xì)說一下我的想法

這個(gè)沒啥說的了，每一次技術(shù)創(chuàng)新，都可以看成是一個(gè)方言，甚至可以出一系列文章

1. 好好的html，React的jsx竟然搞方言
2. vue的template是啥， 竟然可以寫:item,@click，不合標(biāo)準(zhǔn)
3. decorators提案在標(biāo)準(zhǔn)里已經(jīng)改過兩次了，現(xiàn)在還沒有定稿。angular和typescript竟然用了好幾年了？不合標(biāo)準(zhǔn)
4. 小程序一堆語法， 好像沒啥不合標(biāo)準(zhǔn)的地方，因?yàn)檫€沒啥標(biāo)準(zhǔn)，沒事還偷偷改
5. 東北話，跛了蓋子卡突嚕皮了，也是方言，但是沒有強(qiáng)制，你也可以說，膝蓋蹭破了

以上方言，我都很喜歡，也極大的繁榮了前端的生態(tài)，正是這些幺蛾子，提高了我們的工資

發(fā)手 - ?標(biāo)準(zhǔn)一定好嗎

標(biāo)注也不是天生就來的，本身就是權(quán)衡討論產(chǎn)出的，而且標(biāo)準(zhǔn)你們真的就喜歡嗎？關(guān)于標(biāo)準(zhǔn)是不是真的好，工業(yè)聚大兄弟文章寫得很清楚，大概意思就是

1. 標(biāo)準(zhǔn)和規(guī)范是演化的，是各方妥協(xié)的結(jié)果
2. 標(biāo)準(zhǔn)和規(guī)范往往滯后于實(shí)踐
3. 規(guī)范不是唯一權(quán)威來源

再說只說一個(gè)他遺漏了， 那就是標(biāo)準(zhǔn)真的好嗎

tc39里的提案，要是都能過了 js就得寫成這樣，代碼地址

這些都是你們喜歡的標(biāo)準(zhǔn)呦 ，具體不多說了，耗子尾汁吧

#!?Aaaaaaaaaaa?this?is?JS!!!
//?https://github.com/tc39/proposal-hashbang
//?This?file?is?mixing?all?new?syntaxes?in?the?proposal?in?one?file?without?considering?syntax?conflict?or?correct?runtime?semantics
//?Enjoy!!!?
//?Created?at?Nov?21,?2020

import?data?from?"./data.json"?assert?{?type:?"json"?}?with?{?as:?"record"?};?//?https://github.com/tc39/proposal-import-assertions#follow-up-proposal-evaluator-attributes
import?{?onTransform,?unwrap,?log,?onMounted,?sensitive,?dispatch,?smartElement,?CSS?}?from?'./utils.js';
import?::{?"?"?as?send?}?from?"async-call-rpc";?//?https://github.com/tc39/ecma262/pull/2154?and?https://github.com/hax/proposal-extensions
asset?report?from?"report";?//?https://github.com/tc39/proposal-asset-references
with?operators?from?Decimal;?//?https://github.com/tc39/proposal-operator-overloading
with?suffix?px?=?CSS.px?//?https://github.com/tc39/proposal-extended-numeric-literals
protocol?RPC?{?//?https://github.com/tc39/proposal-first-class-protocols
????address;?send(method,?...args)?{?return?this.address::send()~.[method](...args)?}?}?//?https://github.com/tc39/proposal-wavy-dot
@{?author:?"Jack?Works"?}?class?MyHandler?extends?HTMLElement?with?smartElement?{?//?https://github.com/justinfagnani/proposal-mixins?and?https://github.com/tc39/proposal-decorators/blob/master/EXTENSIONS.md#annotation-syntax?
????async?constructor()?{?super();?await.race?[import(report),?import(module?{?export?default?await?import('./fallback.js')?})]?}?//?async?init?proposal?and?https://github.com/tc39/proposal-await.ops?and?https://github.com/tc39/proposal-js-module-blocks
????outer?static?#brand?=?'my?handler'?//?https://github.com/tc39/proposal-private-declarations
????static?{?debugger.log(['Defined?as?',?this,?this.#brand])?}?//?https://github.com/tc39/proposal-class-static-block?and?https://github.com/tc39/proposal-standardized-debug
????#data?=?data[0:100];?//?https://github.com/tc39/proposal-slice-notation
????onNewChild(child)?{?!(try?child.#data)?&&?throw?new?TypeError('Illegal')?}?//?https://github.com/tc39/proposal-private-fields-in-in?and?https://github.com/tc39/proposal-throw-expressions
????[Symbol.asyncIterator]:?async?()?=>*?{?"hide?source"?//?https://github.com/tc39/proposal-function-implementation-hiding?and?https://github.com/tc39/proposal-generator-arrow-functions
????????while?(function.sent)?//?https://github.com/tc39/proposal-function.sent
????????????for?(const?datum?of?this.#data)?{
????????????????try?using(const?f?=?function.sent)?{?//?https://github.com/tc39/proposal-explicit-resource-management
????????????????????yield?do?{?//?https://github.com/tc39/proposal-do-expressions
????????????????????????if?(const?val?=?datum?|>?sensitive?|>?f(this,??)?|>?await.all?|>?sensitive)?{?//?https://github.com/tc39/proposal-pipeline-operator?and?https://github.com/tc39/proposal-partial-application?and?https://github.com/tc39/proposal-Declarations-in-Conditionals
????????????????????????????val?=?case?(val)?{?//?https://github.com/tc39/proposal-pattern-matching
????????????????????????????????when?#{?type:?'throw',?error:?e?}?->?throw?new?Error(e),?//?https://github.com/tc39/proposal-record-tuple
????????????????????????????????when?#{?type:?'batch',?list:?arr?}?->?await.all?arr.map(x?=>?import(x)),
????????????????????????????????when?#{?type:?'normal',?...rest?}?->?#{?...val,?meta.received:?Date.now()?}?//?https://github.com/tc39/proposal-deep-path-properties-for-record
????????????????????????????}
????????????????????????????runTimes++;?val?|>?dispatch(this,?'transform',?{|?details:?val?|});?}?}?}?}?}?//?https://github.com/keithamus/proposal-object-freeze-seal-syntax
????@init:?onTransform?transformHandler?=?()?=>?this.style.fontSize?||=?runTimes?>?10???24px?:?12px?//?https://github.com/tc39/proposal-decorators#option-b-init-method-decorators
????@onMounted?{??//?https://github.com/tc39/proposal-decorators/blob/master/EXTENSIONS.md#block-decorators
????????this.addEventListener('transform')?do?(@unwrap?event)?{?//?https://github.com/samuelgoto/proposal-block-params?and?https://github.com/tc39/proposal-decorators/blob/master/EXTENSIONS.md#parameter-decorators-and-annotations
????????????console.log(event,?class.#brand)?}?}?//?https://github.com/tc39/proposal-class-access-expressions
????static?[RPC.address]?=?'http://localhost:8080/';
};?Protocol.implement(MyHandler,?RPC);
let?@(log(x?=>?`@@iterator?on?${MyHandler.#brand}?ran?for?${x}?times`))?runTimes?=?0m;?//?https://github.com/tc39/proposal-decorators/blob/master/EXTENSIONS.md#let-decorators?and?https://github.com/tc39/proposal-decimal
try?{?import?dev?from?"enhance-devtools";?window.devtoolsFormatters?=?#[...window?.devtoolsFormatters,?dev];?}?catch?{}?//?https://github.com/benjamn/reify/blob/master/PROPOSAL.md
??

好好反思

我覺得ref這個(gè)提案我覺得肯定是要上的， 如果能流行起來，還可以開開腦洞，把東北話推廣到全國， 比如除了ref，還有computed

<script?setup>
ref:?count=1
computed:?double?=?count*2
watch:?count=>console.log
effect:?....
script>

還有react的hooks

state:?定義hooks
function?App(props){
????state:?num?=?props.num
????effect:?()=>{
?????num=props.num
????}
}

甚至node，瀏覽器本身的api就可以跟進(jìn)

http:?app=?(req,res)=>{
????utf8-file:?content?=?'./wulin/gui.html'
????res.send(content)
}
app.listen(9003)

我的擔(dān)心

我覺得現(xiàn)在讓我沒法大面積用vue3的原因，并不是ref這個(gè)看起來很酷但是有爭議的小功能， 而是對IE的兼容版本， ref其實(shí)沒有也不耽誤大家用的，小功能過深的討論，導(dǎo)致精力分散，其實(shí)是對vue3的普及有影響的

希望vue能早日完成ie兼容版本的發(fā)布，這個(gè)功能沒有ref那么酷，但是很多團(tuán)隊(duì)在等

講武德 樹新風(fēng)

前端武林還是要以和為貴，少搞窩里斗，最后以馬老師書籍的結(jié)尾送給大家，一起好好學(xué)習(xí)，升華自我，服務(wù)和諧于社會

參考鏈接

謝謝朋友們