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.

Please don't use const when defining variable of primitive types if you want to modify the value.

You don't have to write import { something } from 'Vucript', because Vucript type definitions are only used for type assertion.

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 .valueto 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;