vite-plugin-vue3-define-reactive

a special compiler macros defineReactive for vue3 script-setup

without

<template>
    <div>{{a}}</div>
    <div>{{b}}</div>
    <div>{{c}}</div>
</template>
<script setup>
import { ref } from 'vue';
const a = ref(0);
const b = ref(1);
const c = ref(2)

c.value = 3

</script>  

with

example 1：

<template>
    <div>{{a}}</div>
    <div>{{b}}</div>
    <div>{{c}}</div>
</template>
<script setup>
const state = defineReactive({
    a:0,
    b:1,
    c:2
})

state.c = 3 // no .value

</script> 

without

<template>
    <div>{{a}}</div>
</template>
<script setup>
import { ref } from 'vue'
const a = ref(1)
const b = ref(2)
</script>

with

example 2：

<template>
    <div>{{a}}</div>
</template>
<script setup>
defineReactive({
    a:1,
    b:2
})
</script>

In fact, your code will transform before vue complie:

example 1：

    <template>
        <div>{{a}}</div>
        <div>{{b}}</div>
        <div>{{c}}</div>
    </template>
      <script setup>
       import { toRefs,reactive } from 'vue' 
       
              const state = reactive({
                  a:0,
                  b:1,
                  c:2
              })
              
              state.c = 3 // no .value
              
              
       const {a,b,c} = toRefs(state)
      </script>

example 2：

      <template>
              <div>{{a}}</div>
          </template>
      <script setup>
       import { toRefs,reactive } from 'vue' 
       
          
       const auto_identifier__v_5=reactive({
              a:1,
              b:2
          })
          
       const {a,b} = toRefs(auto_identifier__v_5)
      </script>

Usage

yarn add vite-plugin-vue3-define-reactive 

or 

npm install vite-plugin-vue3-define-reactive

In your vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import defineReactive from 'vite-plugin-vue3-define-reactive'
export default defineConfig({
  plugins: [
      defineReactive(),
      vue()
  ],
})

type

Create a new file in your src folder and write this for type hints.

declare global {
    const defineReactive:<T extends {
        [key:string]:any
    }>(obj:T)=>T
}
export {}

by the way

if before script-setup version you write vue3 code like this:

import { toRefs,reactive } from 'vue';
<script>
setup(){
    const state = reactive({
        a:1,
        b:2,
        c:3
    })
    state.c = 7
    const handleClick = ()=>{}
    return {
        ...toRefs(state),
        handleClick
    }
}
</script>

this is helpful for refactor you project to script-setup:

<script setup>
    const state =defineReactive({
        a:1,
        b:2,
        c:3
    })
    state.c = 7
    const handleClick = ()=>{}
</script>