vue3项目配置插件省略使用ref.value赋值

正常我们在使用vue3项目中，使用ref来做响应式很繁琐，需要定义ref后，每次修改值要用.value来更改。

例如：

<p>{{ num }}</p>

定义num

let num = ref(10)

修改num值的时候，必须要使用num.value来赋值才能响应修改

num.value++

直接写num++这样是不行的

每个地方都这样写非常繁琐，怎么才能方便的写呢？

安装一个插件

npm install @vue-macros/reactivity-transform -D

在vite.config.js文件里增加配置

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入库
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    ReactivityTransform(), // 增加库配置
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

最后我们再换个方式写,定义ref要增加一个$符号，修改值可以直接修改了。

let num = $ref(10)
num++

定义json也是一样

配置插件前：

let d = ref({
  name: 'jj',
  age: 22
})

d.value.name = 'jonas'

配置插件后：

let d = $ref({
  name: 'jj',
  age: 22
})

d.name = 'jonas'