Vue 3 函数简介_更清晰的逻辑组织_computed用于创建计算属性
一、Vue 3 函数简介
Vue 3 中的函数，其实就是“组合式 API”中的一种编程方式。这种 API 让我们构建 Vue 组件的方式更灵活，代码也更方便复用和维护。
二、组合式 API 概述
Vue 3 的组合式 API 通过一系列函数来管理组件的状态和逻辑，和 Vue 2 的选项式 API 很不一样。它有几个特点：
- 更好的逻辑复用：可以轻松在不同组件间共享和复用代码。
- 更清晰的逻辑组织：可以按功能模块化组件内部逻辑。
- 更好的类型推断：对于使用 TypeScript 的项目，提供了更好的类型推断和提示。
三、核心函数介绍
Vue 3 的组合式 API 主要包括以下几个核心函数：
- setup 函数：这是组合式 API 的起点，用于定义组件的状态和行为。
- reactive 和 ref：用于声明响应式数据。
- computed：用于创建计算属性。
- watch 和 watchEffect：用于监听数据变化。
- provide 和 inject：用于跨组件提供和注入依赖。
四、setup 函数详解
setup 函数是组合式 API 的起点，它在组件实例化之前执行。
示例：
setup(props, context) {
// 在这里定义组件的状态和行为
}五、reactive 和 ref 函数详解
reactive 用于创建响应式对象，ref 用于创建响应式原始值。
示例：
const state = reactive({ count: 0 });
const count = ref(0);六、computed 函数详解
computed 函数用于创建计算属性，它会根据其依赖的响应式数据自动更新。
示例：
const doubledCount = computed(() => state.count 2);七、watch 和 watchEffect 函数详解
watch 和 watchEffect 函数用于侦听一个或多个响应式数据的变化，并执行相应的回调函数。
示例：
watch(state.count, (newCount, oldCount) => {
console.log(`Count changed from ${oldCount} to ${newCount}`);
});
watchEffect(() => {
console.log(`Count is ${state.count}`);
});八、provide 和 inject 函数详解
provide 和 inject 用于跨组件传递依赖，通常用于祖先组件与后代组件之间的通信。
示例：
// 祖先组件
provide('count', state.count);
// 后代组件
inject('count');九、组合式 API 的优势
组合式 API 相比选项式 API 具有以下优势：
- 逻辑复用性更强。
- 更适合大型项目。
- 增强的类型推断。
- 更灵活的逻辑组织。
十、实践案例
以下是一个创建计数器组件的示例，并在不同组件中共享其状态的例子：
const Counter = {
setup() {
const state = reactive({ count: 0 });
const increment = () => {
state.count++;
};
return { count: state.count, increment };
}
};
const App = {
components: { Counter },
setup() {
provide('count', reactive({ count: 0 }));
},
template: `
十一、
Vue 3 的函数，即组合式 API，提供了一种更灵活、模块化的方式来管理组件的状态和逻辑。通过 setup、reactive、ref、computed、watch、watchEffect、provide 和 inject 等核心函数，开发者可以更好地组织和复用代码，特别是在大型项目中。
为了更好地掌握这些概念，建议开发者多多实践，将组合式 API 应用到实际项目中，不断积累经验，提升开发效率和代码质量。