vue3 ref告别.value
众所周知,ref要求我们访问变量时需要加上.value,这让很多开发者觉得难受.let count = ref(1)const addCount = () => {count.value += 1}后来vue3 提了一个 Ref Sugar 的 RFC,即 ref 语法糖,在ref前加上$,目前还处理实验阶段。Ref 语法糖在项目中的使用1. 该功能默认关闭,需要手动开启。// vite.c
·
最新: 该响应式语法糖目前已作废, 如需继续使用可通过 Vue Macros插件
众所周知,ref要求我们访问变量时需要加上.value,这让很多开发者觉得难受.
let count = ref(1)
const add = () => {
count.value += 1
}
后来vue3 提了一个 Ref Sugar 的 RFC,即 ref
语法糖,在ref
前加上$
,目前还处理实验阶段。
- Ref 语法糖在项目中的使用
1. 该功能默认关闭,需要手动开启。
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue({
refTransform: true // 开启ref转换
})
]
})
2. 在.vue文件中使用
<template>
<div>{{count}}</div>
<button @click="add">click me</button>
</template>
<script setup>
let count = $ref(1)
const add = () => {
count++
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)