Content:

1. Mastering Vue 3 - Part 1 [Introduction and key features]

2. Mastering Vue 3 - Part 2 [Benefits of using Vue 3 for web development]

3. Mastering Vue 3 - Part 3 [Template syntax in Vue 3]

4. Mastering Vue 3 - Part 4 [Reactivity Fundamentals]

5. Mastering Vue 3 - Part 5 [Class and Style Bindings]

6. Mastering Vue 3 - Part 6 [Lifecycle Hooks]

7. Mastering Vue 3 - Part 7 [Understanding components in Vue 3
]

8. Mastering Vue 3 - Part 8 [Installing Vue project and file structure]

9. Mastering Vue 3 - Part 9 [Vue Router in Vue 3]

10. Mastering Vue 3 - Part 10 [Animation in Vue 3]

11. Mastering Vue 3 - Part 11 [State Management with Pinia]

12. Mastering Vue 3 - Part 12 [Teleport in Vue 3]

13. Mastering Vue 3 - Part 13 [Working with API Calls ]

14. Mastering Vue 3 - Part 14 [Forms and Form Validation ]

Reactivity Fundamentals in Vue 3

Reactivity is a core concept in Vue 3 that enables automatic updating of the user interface when the underlying data changes. It allows you to build dynamic and reactive applications without manually managing the DOM.

Vue 3 introduces a new reactivity system called the Composition API, which is built on top of the underlying reactivity system known as the Reactivity API. The Reactivity API provides the foundation for the Composition API and is responsible for tracking dependencies and triggering updates when data changes.

The key components of the Reactivity API in Vue 3 are:

Reactive

The reactive function is used to create a reactive proxy object from a plain JavaScript object. The reactive proxy wraps the original object and allows Vue to track its properties, so that any changes to those properties can be detected.

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

  const state = reactive({
    message: 'Hello',
    count: 0
  });
</script>

In the above example, the state object is made reactive using the reactive function. Now, any changes to the message or count properties will be automatically detected by Vue.

Ref

The ref function is used to create a reactive reference to a value. Unlike reactive objects, which track properties, refs track individual values. You can think of refs as reactive wrappers around primitive values or objects.

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

const count = ref(0);
</script>

In this example, the count variable is a ref that holds the value 0. Whenever the value of count changes, Vue will automatically detect the update and trigger reactivity.

Computed

The computed function allows you to create computed properties that automatically update when their dependencies change. Computed properties are derived values based on other reactive data.

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

const count = ref(0);
const doubleCount = computed(() => count.value * 2);
</script>

In this example, the doubleCount computed property calculates the value of count * 2 based on the count ref. Whenever the count ref changes, the doubleCount computed property will automatically recompute its value.

Watch

The watch function allows you to perform side effects or respond to changes in reactive data. You can watch a single reactive value or an array of reactive values.

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

const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});
</script>

In this example, the watch function is used to watch changes in the count ref. Whenever the value of count changes, the callback function will be executed with the new and old values.

These are the fundamental concepts of reactivity in Vue 3. By leveraging the Reactivity API, you can build reactive components and applications that automatically update the UI based on changes in data. The Composition API builds upon the Reactivity API, providing more powerful and flexible ways to organize and reuse reactive code in your Vue 3 applications.