Vue3的语法糖,$ref()用法(Ref 语法糖,告别 .value 的写法)

·  阅读 2484
Vue3的语法糖,$ref()用法(Ref 语法糖,告别 .value 的写法)

Vue3 提了个 Ref Sugar 的 RFC,即 ref 语法糖,目前还处理实验性的(Experimental)阶段。在 RFC 的动机(Motivation)中,Evan You 介绍到在 Composition API 引入后,一个主要未解决的问题是 refsreactive 对象的使用。而到处使用 .value 可能会很麻烦,如果在没使用类型系统的情况下,也会很容易错过

    const test = ref(1)
    const btn = () =>{
        test.value++
    }
复制代码

这样一些用户更倾向于只使用 reactive,这样就不用处理使用 refs.value 问题。而 ref 语法糖的作用是让我们在使用 ref 创建响应式的变量时,可以直接获取和更改变量本身,而不是使用 .value 来获取和更改对应的值。简单的说,站在使用层面,我们可以告别使用 refs 时的 .value 问题

const test = $(ref(1))
const btn = () =>{
    test++
} // 这样就可以不用.value了
复制代码

vue3+vite需要在vite.config.js配置,是由 @vitejs/plugin-vue 插件来实现对 .vue 文件的代码转换(Transform)、热更新(HMR)等。所以,我们需要在 vite.config.js 中给 @vitejs/plugin-vue 插件的选项(Options)传入 refTransform: true

   import { defineConfig } from 'vite' 
   import vue from '@vitejs/plugin-vue'
   export default defineConfig({ 
       plugins: [vue({ refTransform: true })] 
   })
复制代码

这样插件就可以根据传入的选项中 refTransform 的值判断是否需要对 ref 语法糖进行特定的代码转换。我们refTransform这里设置的是 true,显然它是会对 ref 语法糖执行特定的代码转换。

这样就可以使用$ref()语法糖了

const test = $ref(1)
const btn = () =>{
    test++
}
复制代码

结尾大哥图!!!

dage.jpg

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改