Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 Reactive Basic API

Vue 3.0's Composition API introduces a handful of reactive APIs that allow developers to handle reactivity at a more granular level. The two core functions of the reactive API are reactive and ref.

Let's take a look at both:

1. ref

The ref function is used to create a reactive reference. This is primarily used for primitive values like numbers, strings, etc.

Here's how you can use ref:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    function increment() {
      count.value++
    }

    return {
      count,
      increment,
    }
  },
}

In this example, count is a reactive reference to the number 0. To access the value of a ref, you have to use .value.

2. reactive

The reactive function is used to create a reactive object. It's similar to Vue.observable in Vue 2.

Here's how you can use reactive:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      increment() {
        state.count++
      },
    })

    return {
      state,
    }
  },
}

In this example, state is a reactive object that has a count property and an increment method. You can access properties directly without needing to use .value.

Note: While ref and reactive may seem similar, there's a key difference when it comes to handling objects. If you use ref with an object, you'll have to access the object's properties using .value, e.g., obj.value.count. With reactive, you can access properties directly, e.g., obj.count.

These are the basic tools Vue 3.0 provides for handling reactivity. They form the basis for the Composition API, which allows developers to encapsulate logic into "composition functions" and reuse them across components.

Using the reactive() Function in Vue 3.0:

reactive() creates a reactive proxy of an object, enabling reactivity.
Changes to properties trigger automatic updates in the UI.

import { reactive, watchEffect } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, Vue 3.0!',
});

watchEffect(() => {
  console.log('Count:', state.count);
});

// Changing the count will trigger the watchEffect
state.count++;

Vue 3.0 ref() vs reactive() for State Management:

ref() is used for primitive values.
reactive() is used for complex objects.

import { ref, reactive } from 'vue';

// Using ref for primitive
const count = ref(0);

// Using reactive for complex object
const state = reactive({
  message: 'Hello, Vue 3.0!',
});

Vue 3.0 Computed Properties with the Reactive API:

Create computed properties for derived state.
computed() returns a reactive ref.

import { reactive, computed } from 'vue';

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

const doubledCount = computed(() => state.count * 2);

Vue 3.0 watch() Function with Reactive Data:

Watch for changes in reactive data.
Provides options for handling different aspects of watching.

import { reactive, watch } from 'vue';

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

watch(() => state.count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

Vue 3.0 shallowReactive() for Shallow Reactivity:
- Create a shallow reactive object.
- Shallow reactivity avoids tracking nested properties.
```
import { shallowReactive } from 'vue';

const state = shallowReactive({
  nested: {
    count: 0,
  },
});
```

Vue 3.0 toRefs() Function in the Reactive API:

Convert a reactive object to individual refs.
Allows destructuring and spreading reactivity.

import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, Vue 3.0!',
});

const { count, message } = toRefs(state);

Vue 3.0 readonly() Function with the Reactive API:

Create a read-only reactive object.
Properties cannot be mutated.

import { reactive, readonly } from 'vue';

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

const readOnlyState = readonly(state);

Vue 3.0 Custom Setters in the Reactive API:

Define custom logic when setting properties.
Use set in reactive() or ref() to customize behavior.

import { reactive, ref } from 'vue';

const customReactive = reactive({
  _count: 0,
  get count() {
    return this._count;
  },
  set count(value) {
    if (value >= 0) {
      this._count = value;
    }
  },
});

const customRef = ref(0);
customRef.value = (value) => value >= 0 ? value : customRef.value;

Vue 3.0 Reactivity and TypeScript:

TypeScript can enhance type safety in Vue 3.0.
Use types for reactive objects and refs.

import { reactive, ref } from 'vue';

interface State {
  count: number;
  message: string;
}

const state: State = reactive({
  count: 0,
  message: 'Hello, Vue 3.0!',
});

const countRef = ref(state.count);