Vue3的Composition API
Vue3的Composition API（Vue3与Vue2的区别）
Vue 3 引入了 Composition API(组合式API)，这是一种新的编写组件逻辑的方式，旨在解决 Options API 在某些场景下的局限性。Composition API 提供了更灵活和强大的代码组织方式，特别适合处理复杂组件的逻辑复用和代码组织。
Composition API 的核心概念
1. setup 函数：
- setup 是 Composition API 的入口函数，它在组件实例创建之前执行。
- setup 接收两个参数：
props：组件的 props。
context：包含 attrs、slots、emit 等属性的上下文对象。
- setup 函数返回一个对象，该对象的属性和方法可以在模板中直接使用。
export default {
props: {
title: String,
},
setup(props, context) {
const count = ref(0);
function increment() {
count.value++;
}
return {
count,
increment,
};
},
};
2. ref 和 reactive：
- ref：用于创建一个响应式的数据引用，通常用于基本类型（如字符串、数字等）。
- reactive：用于创建一个响应式的对象，适用于复杂数据结构。
import { ref, reactive } from 'vue';
setup() {
const count = ref(0); // 基本类型
const state = reactive({ name: 'Vue', age: 3 }); // 对象
return { count, state };
}
3. computed：
用于创建计算属性，类似于 Options API 中的 computed。
import { ref, computed } from 'vue';
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
return { count, doubleCount };
}
4. watch 和 watchEffect：
- watch：用于监听响应式数据的变化，类似于 Options API 中的 watch。
- watchEffect：自动追踪其依赖，并在依赖变化时重新执行。
import { ref, watch, watchEffect } from 'vue';
setup() {
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`);
});
watchEffect(() => {
console.log(`count is now ${count.value}`);
});
return { count };
}
5. 生命周期钩子：
Composition API 提供了与 Options API 对应的生命周期钩子函数，如 onMounted、onUpdated、onUnmounted 等。
import { onMounted, onUnmounted } from 'vue';
setup() {
onMounted(() => {
console.log('Component mounted');
});
onUnmounted(() => {
console.log('Component unmounted');
});
}
6. provide 和 inject：
用于跨组件层级传递数据，类似于 Vue 2 中的 provide/inject
import { provide, inject } from 'vue';
// 父组件
setup() {
provide('theme', 'dark');
}
// 子组件
setup() {
const theme = inject('theme', 'light'); // 默认值为 'light'
return { theme };
}
Composition API 的优势
-
更好的逻辑复用：
通过自定义 Hook（类似于 React 的 Hook），可以轻松复用逻辑代码。
例如，可以将数据获取、事件监听等逻辑提取到独立的函数中。
// useFetch.js import { ref } from 'vue'; export function useFetch(url) { const data = ref(null); const error = ref(null); fetch(url) .then((res) => res.json()) .then((json) => (data.value = json)) .catch((err) => (error.value = err)); return { data, error }; } // 组件中使用 setup() { const { data, error } = useFetch('https://api.example.com/data'); return { data, error }; } -
更灵活的代码组织：
可以将相关逻辑组织在一起，而不是分散在 data、methods、computed 等选项中。
-
更好的 TypeScript 支持：
Composition API 的设计更符合 TypeScript 的类型推断机制，提供了更好的类型支持。
与 Options API 的关系
Composition API 并不是为了取代 Options API，而是为了提供一种更灵活的选择。
对于简单的组件，Options API 仍然是一个很好的选择。
对于复杂的组件或需要逻辑复用的场景，Composition API 更具优势。
示例：一个简单的计数器组件:
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
return {
count,
increment,
};
},
};
</script>
总结:
Composition API 是 Vue 3 的核心特性之一，它提供了更灵活和强大的方式来组织组件逻辑。通过 setup 函数、ref、reactive、computed、watch 等工具，开发者可以更高效地编写和维护复杂的 Vue 组件。