Reactive Values & Functions
Ref
& Reactive
are used when you want to define reactive variable in Vue Composition API.
Ref
is often used for primitive types and Reactive is often used Object types in Vue 3.
However, vucript doesn't differentiate Ref and Reactive. You can just use reactive type whether or not you are defining object type variables.
This is how to use reactive in Vucript.
let reactiveVariable:reactive<type> = value;
Let's look at some examples!
import { reactive } from 'Vucript';
let counter:reactive<number>=0;
let alex:reactive<{name:string,age:number}>={name:"alex",age:50};
The code above is compiled to
import { defineComponent, ref, reactive } from "vue";
export default defineComponent({
setup() {
const counter = ref<number>(0);
const alex = reactive<{ name: string; age: number }>({
name: "alex",
age: 50,
});
return { counter, alex };
},
});
With Vucript, you don't have to write return values and you can write type annotation to the right side of variable name. In addition, Vucript imports ref and reactive or both from vue automatically.
Modifying Reactive Values by Functions
import { reactive } from 'Vucript';
let counter:reactive<number>=0;
function addCounter(){
counter++;
}
In Vucript, you don't have to add .value
to your ref value. Just modify value like normal javascript primitive value.
In addition, Vucript automatically returns functions you defined. You can use both normal functions and arrow functions!
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const counter = ref<number>(0);
const addCounter = function () {
counter.value++;
};
return { counter, addCounter };
},
});
Type Definiton for Reactive of Vucript
type reactive<T> = T;
Last updated
Was this helpful?