Home > Web Front-end > JS Tutorial > Vue Comprehensive Upgrade Guide: In-depth Exploration of Composition API

Vue Comprehensive Upgrade Guide: In-depth Exploration of Composition API

Susan Sarandon
Release: 2024-12-06 07:55:12
Original
464 people have browsed it

Vue  Comprehensive Upgrade Guide: In-depth Exploration of Composition API

  • Core concepts and functions of the Composition API
    • setup() function:
    • ref and reactive:
    • Computed properties and listeners:
    • Composition Functions
    • Lifecycle hooks:
  • Composition API Writing Components
  • Migrate from Options API to Composition API
    • Component structure
    • Dependency Injection
    • Template refactoring

The comprehensive upgrade of Vue 3.x introduces the Composition API, which is a major improvement over the traditional Options API of Vue 2.x. It provides a more flexible and modular way of organizing code.

Core concepts and functions of the Composition API

setup() function:

The core entry point in Vue 3, used to set the state and logic of the component, which is executed after the beforeCreate hook and before the create hook. It replaces the content originally defined in options such as data and methods.

import { ref, computed } from "vue";

export default {
  setup() {
    // Responsive Data
    const count = ref(0);

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};
Copy after login
Copy after login

ref and reactive:

Used to create responsive data, ref is used to create responsive data of basic types, and reactive is used for responsive proxies of objects and arrays.

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};
Copy after login
Copy after login

Computed properties and listeners:

computed is used to create computed properties that are recalculated only when dependencies change.

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};
Copy after login
Copy after login

watch is used to observe changes in responsive data and execute callbacks when changes occur.

import { ref, watch } from "vue";

export default {
  setup() {
    const count = ref(0);

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

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

    return { count, increment };
  },
};
Copy after login
Copy after login

Composition Functions

The Composition API encourages the creation of reusable composition functions.

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};
Copy after login
Copy after login

Lifecycle hooks:

Lifecycle hooks in Vue 3 are no longer used directly inside setup(), but through new lifecycle hook functions such as onBeforeMount and onMounted.

1. onBeforeMount: This hook is called before the component is mounted to the DOM. This is similar to the beforeMount lifecycle hook in Vue 2.x.

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};
Copy after login
Copy after login

2. onMounted: Called immediately after the component is mounted to the DOM. Equivalent to mounted in Vue 2.x.

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};
Copy after login
Copy after login

3. onBeforeUpdate: Called before the component data is updated, but before the DOM update begins. Similar to Vue 2.x's beforeUpdate.

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};
Copy after login
Copy after login

4. onUpdated: Called after the DOM update caused by component data changes is completed. Equivalent to updated in Vue 2.x.

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};
Copy after login
Copy after login

5. onBeforeUnmount: Called before the component is uninstalled. Similar to beforeDestroy in Vue 2.x.

import { ref, computed } from "vue";

export default {
  setup() {
    // Responsive Data
    const count = ref(0);

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};
Copy after login
Copy after login

6. onUnmounted: Called after the component has been uninstalled. Equivalent to destroyed in Vue 2.x.

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};
Copy after login
Copy after login

7. onActivated: Called only when the component wrapped with is activated.

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};
Copy after login
Copy after login

8. onDeactivated: Called only when the component wrapped with is deactivated.

import { ref, watch } from "vue";

export default {
  setup() {
    const count = ref(0);

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

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

    return { count, increment };
  },
};
Copy after login
Copy after login

Composition API Writing Components

  • Create responsive data: Use ref and reactive to create responsive variables.
  • Computed properties: Use computed functions to create computed properties.
  • Responsive functions: Use toRefs() and toRef() to convert object properties to responsive.
  • Listener: Use watch or watchEffect to monitor data changes.
// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};
Copy after login
Copy after login
  • Create responsive data: Use reactive to create a responsive object containing cityInput, city, and weather. ref can also be used for basic types of responsive data, but in this scenario, reactive is more suitable for managing multiple states.

  • Computed properties: The currentCity computed property directly returns the value of state.cityInput. Although it may be more intuitive to use v-model="cityInput" directly in this example, it shows how to define computed properties.

  • Responsive functions: Use toRefs to convert the properties of the state object into independent responsive references for direct binding in the template. This mainly shows the use of responsive data, rather than the conversion function itself, because direct destructuring assignment (such as const { cityInput } = state;) is sufficient in the template.

  • Listeners: Use watch to listen to changes in cityInput, and clear the weather state every time the input changes, so that it can be queried next time.

Migrate from Options API to Composition API

Component structure

Separate state, methods, and logic into separate functions. In the Options API, we usually define data, methods, computed, etc. in the component options. In the Composition API, these logics are separated into separate functions. For example:

Options API:

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};
Copy after login
Copy after login

Composition API:

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};
Copy after login
Copy after login

Dependency Injection

Use provide and inject. In Options API, we use provide and inject to pass data. In the Composition API, this process remains the same:

Options API:

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};
Copy after login
Copy after login

Composition API:

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};
Copy after login
Copy after login

Template refactoring

Convert bound properties and methods from this to direct references.

The above is the detailed content of Vue Comprehensive Upgrade Guide: In-depth Exploration of Composition API. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template