Vue3的Ref提案到底发生肾摸事了

 

Vue3的Ref提案到底发生肾摸事了

 

朋友们好，我是大圣，最近vue3的ref提案社区讨论的比较多，社区里我看了一下相关的rfc和知乎讨论，我发现很多年轻人不讲武德，今天也摸鱼写一点我的看法吧

先说结论： 我其实也不喜欢ref:这个语法，但是更不喜欢社区对这个提案的不包容，方言一定不好吗？标准就一定好吗？ 前端圈要以和为贵，应该在普及普通话的基础之上，各地有意思的方言也要大力推广

发生了肾摸事

vue3有个新的语法ref，功能就是把一个简单数据结构变成响应式的，比如ref(0),ref('耗子尾汁')， 副作用就是修改的时候要加一个.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>

关于compostion的来源和细节，参考我写的这篇文章 那个忙了一夜的Vue3动画很好，就是太短了 ， 大概就是

1. 我们为了解决option api的this黑盒问题，引入了composition api

2. 为了解决reactivity操作简单数据结构的命名空间问题，引入心得api ref

3. 为了解决composiiton的统一return问题，引入了script setup

4. 为了解决re的.value副作用，引入了 ref sugar

比如用script setup提案 代码优化成这个样子 ，解决了setup里面需要统一return的问题

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

最新的提案export都不用写了，这个提案社区皆大欢喜，和Svelte越来越像

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

现在还剩一个副作用就是要操作.value ， 所以今天的主角ref语法糖就登场了，很快啊

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

社区的批评

ref的新提案地址 确实是个很酷的语法， 但是新的语法糖ref:</