Vue3 组合式函数
组合式函数
组合式函数(Composables)是 Vue3 中的一种新的编程模式, 它允许我们以更简洁、可重用的方式编写组件逻辑; 组合式函数是基于Vue3的新API, 包括ref、reactive、computed等, 这些函数可以帮助我们更好地组织和管理组件的状态和逻辑;
组合式函数的优势
组合式函数的优势在于它们可以更方便地共享和重用组件逻辑; 通过将逻辑封装在组合式函数中, 我们可以将它们作为独立的单元进行复用, 并在多个组件中使用; 此外, 组合式函数还可以简化组件的代码结构, 使得组件更加简洁和易于维护;
如何使用组合式函数?
Vue3的组合式函数主要通过两个新的API来实现:setup()
函数和reactive()
函数;
首先, 让我们来看看setup()
函数; 在Vue3中, setup()
函数是在组件实例创建之前被调用的; 它接收两个参数:props和context; props是组件接收的属性, context包含了一些常用的属性和方法;
在setup()
函数中, 我们可以定义需要共享的响应式数据、计算属性、方法等; 这些数据和方法可以在模板中使用, 或者通过返回值暴露给其他组件使用;
案例一 useCounter
接下来, 让我们看看如何创建一个组合式函数; 通常, 我们会将相关的逻辑组织到一个单独的函数中, 并在setup()
函数中调用该函数;
import { reactive } from 'vue';
function useCounter() {
const state = reactive({
count: 0,
increment() {
state.count++;
},
decrement() {
state.count--;
}
});
return state;
}
export default {
setup() {
// 调用组合式函数
const counter = useCounter();
return {
counter
};
}
}
在上面的例子中, 我们创建了一个名为useCounter的组合式函数; 它返回一个包含计数器count和递增递减方法的响应式对象state; 在setup()
函数中调用useCounter函数并将返回值作为返回对象的属性, 以便在模板中使用;
此外, Vue3还提供了许多内置的组合式函数, 例如onMounted()
、watch()
、onUnmounted()
等, 用于处理生命周期钩子和侦听副作用;
案例二 useMousePosition
import { reactive, onMounted, onUnmounted } from 'vue';
function useMousePosition() {
const position = reactive({
x: 0,
y: 0
});
function updatePosition(e) {
position.x = e.pageX;
position.y = e.pageY;
}
onMounted(() => {
window.addEventListener('mousemove', updatePosition);
});
onUnmounted(() => {
window.removeEventListener('mousemove', updatePosition);
});
return position;
}
export default {
setup() {
const mousePosition = useMousePosition();
return {
mousePosition
};
}
}
在上面的例子中, 我们创建了一个名为 useMousePosition
的组合式函数, 用于获取鼠标的位置; 在 setup 函数中调用 useMousePosition
函数, 并将鼠标位置作为返回对象的属性, 以便在模板中使用; 同时, 我们使用了 onMounted
和 onUnmounted
来分别在组件挂载和卸载时添加/移除鼠标移动事件监听器;
总结一下, Vue3 的组合式函数是利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数; 我们可以使用setup()
函数和reactive()
函数创建自定义的组合式函数, 并利用内置的组合式函数来处理常见的逻辑需求; 通过组合式函数, 我们能够更好地组织和管理Vue应用的逻辑代码, 提高代码的可读性和复用性;