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动画很好,就是太短了 , 大概就是
-
我们为了解决option api的this黑盒问题,引入了composition api
-
为了解决reactivity操作简单数据结构的命名空间问题,引入心得api ref
-
为了解决composiiton的统一return问题,引入了script setup
-
为了解决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>