Reactive Dependency Tracking

Use a computed property that depends on several reactive data sources to explain how Vue.js 3 automates the tracking of dependencies and updates the VDOM accordingly.

<template>
  <div>
    <h1>{{ fullName }}</h1>
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      firstName: 'John',
      lastName: 'Doe'
    });

    // Computed property that depends on firstName and lastName
    const fullName = computed(() => `${state.firstName} ${state.lastName}`);

    return {
      fullName,
      ...state
    };
  }
};
</script>

<style>
div {
  display: flex;
  flex-direction: column;
}
input {
  margin-bottom: 10px;
}
</style>

This example contains a Vue 3 component with a template, script, and style. The template binds input elements to firstName and lastName, and displays a computed fullName. In the script, a reactive state object tracks the dependencies of firstName and lastName. The computed fullName automatically updates when these dependencies change. The style section ensures that the input fields are stacked vertically with some space between them.