How can I handle reactivity in Vue 3 using TypeScript?

How can I handle reactivity in Vue 3 using TypeScript?

In Vue 3, you can use the ref and reactive APIs to manage reactivity with TypeScript. ref is used for primitive values, while reactive is for objects.

Can you show me an example of using ref?

Sure! Here's a simple example:

import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

This creates a reactive reference to a number.

What about using reactive for an object?

You can use reactive like this:

import { reactive } from 'vue';

const state = reactive({ count: 0 });

function increment() {
  state.count++;
}

This makes the entire object reactive.

Are there any TypeScript types I should be aware of?

Yes! When using ref, you can specify the type like this:

const count = ref<number>(0);

For reactive, TypeScript infers the type from the object you pass.