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.
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, }; }, };
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 }; }, };
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 }; }, };
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 }; }, };
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 }; }, };
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"); }); }, };
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"); }); }, };
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 }; }, };
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"); }); }, };
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, }; }, };
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 }; }, };
7. onActivated: Called only when the component wrapped with
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 }; }, };
8. onDeactivated: Called only when the component wrapped with
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 }; }, };
// 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 }; }, };
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.
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"); }); }, };
Composition API:
import { onMounted } from "vue"; export default { setup() { onMounted(() => { console.log("Component mounted"); }); }, };
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 }; }, };
Composition API:
import { onUpdated } from "vue"; export default { setup() { onUpdated(() => { console.log("Component update completed"); }); }, };
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!