正常我们在使用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'
