> For the complete documentation index, see [llms.txt](https://s19514tt.gitbook.io/vucript-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://s19514tt.gitbook.io/vucript-documentation/language-reference/reactive-values-and-functions.md).

# 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.

```typescript
let reactiveVariable:reactive<type> = value;
```

Let's look at some examples!

```typescript
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

```typescript
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.

{% hint style="info" %}
Please don't use const when defining variable of primitive types if you want to modify the value.
{% endhint %}

{% hint style="info" %}
You don't have to write `import { something } from 'Vucript'`, because Vucript type definitions are only used for type assertion.
{% endhint %}

#### Modifying Reactive Values by Functions

```typescript
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!

```typescript
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

```typescript
type reactive<T> = T;
```