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 Basics

In Vue 3.0, the reactivity system is based on JavaScript's Proxy API, which enables more performance-efficient and developer-friendly ways to observe and react to data changes. The main features of Vue 3's reactivity system are the ref and reactive functions.

Here's a basic tutorial on Vue 3's reactive features:

Step 1: Initialize your Vue project.

You can create a new Vue 3 project using the Vue CLI:

npm install -g @vue/cli
vue create my-project

Remember to choose Vue 3 when asked which version of Vue to use.

Step 2: In your App.vue file, import the ref and reactive functions from Vue.

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <p>{{ person.name }} - {{ person.age }}</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const person = reactive({ name: 'John', age: 30 });

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

    return {
      count,
      person,
      increment
    };
  },
};
</script>

In this example, we use the ref function to create a reactive reference to a primitive value (a number), and we use the reactive function to create a reactive object.

The setup method is a new component option in Vue 3.0 that serves as the entry point for using the Composition API within components.

In the template, we bind the count and person properties to the template to display their current values. We also bind the increment function to the button's click event listener, so every time the button is clicked, the count will increment.

Step 3: Run your application.

You can run your Vue 3 application with the following command:

npm run serve

You should see a number that increases each time you click the "Increment" button, and an object's data rendered in the template. This showcases Vue 3's basic reactive capabilities.