Javascript Vue

A special compiler macros for vue3 script setup2 min read

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

示例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

示例2:

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

In fact, your code will transform before vue complie:

示例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>

示例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>

GitHub

View Github

Leave a Reply

Your email address will not be published.

Pin It on Pinterest