去除$ref的.value

DANGER

去除.value看个人，不是每个项目都非得去除.value，看个人习惯。

用.value，就有它存在的意义

不想去除的可以跳过。个人习惯

下一篇【解决import {ref}大量引用】

一、案例

特别提示

只有在js中需要用.value，如果是在@click方法内改变，不需要.value

流程走完了不想使用？卸载插件，在vite.config.js删除使用语句即可

原本的代码

<template>
  <h1>{{ count }}</h1>
  <button @click="handleClick">click</button>
</template>

<script setup>
import { ref } from 'vue';
let count = ref(0);

function handleClick() {
  count.value++;
}
</script>

去除.value赋值

<template>
  <h1>{{ count }}</h1>
  <button @click="handleClick">click</button>
</template>

<script setup>
import { ref } from 'vue';
let count = ref(0);

function handleClick() {
  count.value++; 
  count++;
}
</script>

二、配置方法

1、方法一（废弃）

vue3.4版本之后废除

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      reactivityTransform: true, // 启用响应式语法糖 $ref $computed $toRef ...
    })
  ]
})

2、方法二

安装插件

插件官网

INFO

store (pinia版) 中使用 $ref 无法正常持久化数据！！！

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

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'; 

export default defineConfig({
  plugins: [
    vue(),
    ReactivityTransform(), // 启用响应式语法糖 $ref ...
  ]
})

---

启用响应式语法糖 $ref 之后，声明变量就是$ref了

解决$ref报错

.eslintrc.cjs

module.exports = {
  globals: { 
    $ref: 'readonly', 
    $computed: 'readonly', 
    $shallowRef: 'readonly', 
    $customRef: 'readonly', 
    $toRef: 'readonly', 
  }, 
};

三、注意事项

$ref 在以下情况无法直接使用

• store pinia
• watch 监听器