Vue 代码复用：Mixins 与 Composables 的深度解析
各位同学，大家好。今天我们来深入探讨 Vue 中实现代码复用的两种主要方式：Mixins 和 Composables。代码复用是软件开发中的一项关键技术，它能显著提高开发效率、降低维护成本，并确保代码的一致性。Vue 提供了多种代码复用机制，而 Mixins 和 Composables 是其中最常用且功能强大的两种。
Mixins：传统但需谨慎使用的代码复用方案
Mixins 是一种在 Vue 2 中被广泛使用的代码复用方式。它允许我们将多个对象中的属性和方法混合到 Vue 组件中。简单来说，Mixins 就像一个配料包，你可以把它加到不同的组件里，让这些组件都拥有相同的能力。
Mixins 的基本用法
首先，我们定义一个 Mixin 对象：
// myMixin.js
export const myMixin = {
data() {
return {
mixinData: 'This is from the mixin'
}
},
methods: {
mixinMethod() {
console.log('Mixin method called!', this.mixinData);
}
},
created() {
console.log('Mixin created hook called');
}
};然后，在 Vue 组件中使用 mixins 选项引入并应用这个 Mixin：
<template>
<div>
<p>{{ mixinData }}</p>
<button @click="mixinMethod">Call Mixin Method</button>
</div>
</template>
<script>
import { myMixin } from './myMixin.js';
export default {
mixins: [myMixin],
data() {
return {
componentData: 'This is from the component'
}
},
created() {
console.log('Component created hook called');
},
mounted() {
this.mixinMethod(); // 调用 mixin 的方法
}
}
</script>在这个例子中，组件成功地使用了 Mixin 中定义的 mixinData 和 mixinMethod。当组件被创建时，Mixin created hook called 和 Component created hook called 都会被打印到控制台。
Mixins 的生命周期钩子合并
当 Mixin 和组件都定义了相同的生命周期钩子时，它们会按照一定的顺序合并执行。Mixins 中的钩子函数会在组件自身的钩子函数之前执行。
Mixins 的选项合并策略
Vue 会根据选项的类型采用不同的合并策略：
| 选项类型 | 合并策略 |
|---|---|
data |
递归合并。如果 Mixin 和组件的 data 选项都返回对象，则将这两个对象合并。如果存在冲突的键，组件的 data 选项中的值会覆盖 Mixin 中的值。 |
| 生命周期钩子 | 合并成一个数组，Mixin 中的钩子函数会在组件自身的钩子函数之前执行。 |
| 值为对象的选项 | 例如 methods、computed、watch，这些选项也会进行合并。如果存在冲突的键，组件的选项中的值会覆盖 Mixin 中的值。 |
| 值为数组的选项 | 例如 components、directives、filters，这些选项会被合并成一个新的数组。 |
全局 Mixins
除了局部 Mixins，Vue 还支持全局 Mixins。全局 Mixins 会影响到所有后续创建的 Vue 实例。可以使用 Vue.mixin() 方法来注册全局 Mixin。
// main.js
import Vue from 'vue';
Vue.mixin({
created() {
console.log('Global mixin hook called in every component');
}
});Mixins 的潜在问题
尽管 Mixins 在代码复用方面有一定的作用，但它也存在一些潜在的问题：
- 命名冲突： Mixins 中的属性和方法可能会与组件自身的属性和方法发生命名冲突，导致意外的行为。
- 隐式依赖： 组件可能会依赖 Mixin 中定义的属性和方法，但这种依赖关系并不明显，使得代码难以理解和维护。
- 可维护性： 随着 Mixins 的数量增加，代码的复杂性也会增加，使得代码难以维护和调试。
- 数据来源不清晰： 当组件中使用多个 Mixins 时，很难确定某个数据或方法来自哪个 Mixin，这会增加代码的理解难度。
由于这些问题，Vue 3 推荐使用 Composables 来替代 Mixins。
Composables：更灵活、更易于维护的代码复用方案
Composables 是 Vue 3 中引入的一种新的代码复用方式。它基于组合式 API，允许我们将组件逻辑提取到独立的函数中，然后在多个组件中复用这些函数。Composables 提供了一种更灵活、更易于维护的代码复用方案。
Composables 的基本用法
Composables 本质上就是一个函数，它封装了一部分可复用的逻辑，并返回一些响应式状态和函数。
// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue';
export function useMousePosition() {
const x = ref(0);
const y = ref(0);
function update(event) {
x.value = event.clientX;
y.value = event.clientY;
}
onMounted(() => {
window.addEventListener('mousemove', update);
});
onUnmounted(() => {
window.removeEventListener('mousemove', update);
});
return { x, y };
}在这个例子中，useMousePosition Composables 封装了获取鼠标位置的逻辑。它使用 ref 创建了两个响应式变量 x 和 y，并使用 onMounted 和 onUnmounted 生命周期钩子来注册和注销鼠标移动事件监听器。最后，它返回一个包含 x 和 y 的对象。
在 Vue 组件中使用 useMousePosition Composables：
<template>
<div>
<p>Mouse position: x = {{ x }}, y = {{ y }}</p>
</div>
</template>
<script>
import { useMousePosition } from './useMousePosition.js';
export default {
setup() {
const { x, y } = useMousePosition();
return { x, y };
}
}
</script>在这个例子中，组件通过 setup 函数调用 useMousePosition Composables，并解构出 x 和 y 变量。然后，将这些变量返回，使其可以在模板中使用。
Composables 的优势
与 Mixins 相比，Composables 具有以下优势：
- 显式依赖： 组件通过
setup函数显式地引入 Composables，使得依赖关系更加清晰。 - 命名冲突避免： Composables 返回的是一个对象，组件可以自由地命名和使用这些变量，避免了命名冲突。
- 更好的可维护性： Composables 将逻辑封装在独立的函数中，使得代码更易于理解和维护。
- 更强的灵活性： Composables 可以接收参数，并根据参数的不同返回不同的值，从而实现更灵活的代码复用。
- 更好的类型推断： TypeScript 可以更好地推断 Composables 的类型，从而提高代码的可靠性。
Composables 的参数
Composables 可以接收参数，从而实现更灵活的代码复用。例如，我们可以创建一个 useFetch Composables，用于从 API 获取数据：
// useFetch.js
import { ref, onMounted } from 'vue';
export function useFetch(url) {
const data = ref(null);
const error = ref(null);
const loading = ref(true);
onMounted(async () => {
try {
const response = await fetch(url);
data.value = await response.json();
} catch (e) {
error.value = e;
} finally {
loading.value = false;
}
});
return { data, error, loading };
}在这个例子中，useFetch Composables 接收一个 url 参数，用于指定 API 的地址。它使用 ref 创建了 data、error 和 loading 三个响应式变量，并使用 onMounted 生命周期钩子来发起 API 请求。最后，它返回一个包含这三个变量的对象。
在 Vue 组件中使用 useFetch Composables：
<template>
<div>
<p v-if="loading">Loading...</p>
<p v-if="error">Error: {{ error }}</p>
<pre v-if="data">{{ data }}</pre>
</div>
</template>
<script>
import { useFetch } from './useFetch.js';
export default {
setup() {
const { data, error, loading } = useFetch('https://jsonplaceholder.typicode.com/todos/1');
return { data, error, loading };
}
}
</script>Composables 的嵌套
Composables 可以相互嵌套，从而构建更复杂的逻辑。例如，我们可以创建一个 useUser Composables，它依赖于 useFetch Composables 来获取用户信息：
// useUser.js
import { useFetch } from './useFetch.js';
export function useUser(userId) {
const { data, error, loading } = useFetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
return { user: data, error, loading };
}Mixins 与 Composables 的对比
为了更清晰地理解 Mixins 和 Composables 的区别，我们用一个表格来总结它们的优缺点：
| 特性 | Mixins | Composables |
|---|---|---|
| 依赖关系 | 隐式依赖，组件可能会依赖 Mixin 中定义的属性和方法，但这种依赖关系并不明显。 | 显式依赖，组件通过 setup 函数显式地引入 Composables，使得依赖关系更加清晰。 |
| 命名冲突 | 容易发生命名冲突，Mixin 中的属性和方法可能会与组件自身的属性和方法发生命名冲突。 | 避免命名冲突，Composables 返回的是一个对象，组件可以自由地命名和使用这些变量。 |
| 可维护性 | 随着 Mixins 的数量增加，代码的复杂性也会增加，使得代码难以维护和调试。 | 将逻辑封装在独立的函数中，使得代码更易于理解和维护。 |
| 灵活性 | 灵活性较差，Mixins 难以接收参数，难以根据参数的不同返回不同的值。 | 灵活性较强，Composables 可以接收参数，并根据参数的不同返回不同的值。 |
| 类型推断 | TypeScript 难以推断 Mixins 的类型，容易出现类型错误。 | TypeScript 可以更好地推断 Composables 的类型，从而提高代码的可靠性。 |
| 使用场景 | 适用于简单的代码复用，例如，将一些常用的方法添加到所有组件中。 | 适用于复杂的代码复用，例如，将一些复杂的业务逻辑提取到独立的函数中，然后在多个组件中复用这些函数。 |
| Vue 版本支持 | Vue 2 和 Vue 3 | Vue 3 (需要使用组合式 API) |
何时使用 Mixins，何时使用 Composables？
虽然 Vue 3 推荐使用 Composables，但在某些情况下，Mixins 仍然可以使用：
- Vue 2 项目： 如果你的项目是基于 Vue 2 的，那么 Mixins 是一个可行的选择。
- 简单的代码复用： 如果你只需要复用一些简单的属性和方法，例如，将一些常用的工具函数添加到所有组件中，那么 Mixins 可能是一个更简单的选择。
然而，在大多数情况下，Composables 都是更好的选择。它提供了更灵活、更易于维护的代码复用方案，并且可以更好地与 TypeScript 集成。
真实案例：使用 Composables 实现主题切换
接下来，我们通过一个真实案例来演示如何使用 Composables 实现主题切换功能。
首先，我们创建一个 useTheme Composables：
// useTheme.js
import { ref, onMounted } from 'vue';
export function useTheme() {
const theme = ref(localStorage.getItem('theme') || 'light');
function toggleTheme() {
theme.value = theme.value === 'light' ? 'dark' : 'light';
localStorage.setItem('theme', theme.value);
applyTheme(theme.value);
}
function applyTheme(themeValue) {
document.documentElement.setAttribute('data-theme', themeValue);
}
onMounted(() => {
applyTheme(theme.value);
});
return { theme, toggleTheme };
}在这个例子中，useTheme Composables 使用 ref 创建了一个 theme 响应式变量，用于存储当前的主题。它还定义了一个 toggleTheme 函数，用于切换主题，并将主题存储到 localStorage 中。applyTheme 函数用于将主题应用到 document.documentElement 的 data-theme 属性上。
在 Vue 组件中使用 useTheme Composables：
<template>
<div>
<button @click="toggleTheme">Toggle Theme</button>
<p>Current theme: {{ theme }}</p>
</div>
</template>
<script>
import { useTheme } from './useTheme.js';
export default {
setup() {
const { theme, toggleTheme } = useTheme();
return { theme, toggleTheme };
}
}
</script>
<style scoped>
/* light theme */
:root {
--bg-color: #fff;
--text-color: #000;
}
/* dark theme */
[data-theme="dark"] {
--bg-color: #000;
--text-color: #fff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
</style>在这个例子中，组件通过 setup 函数调用 useTheme Composables，并解构出 theme 和 toggleTheme 变量。然后，将这些变量返回，使其可以在模板中使用。
在 CSS 中，我们使用 :root 和 [data-theme="dark"] 选择器来定义 light 和 dark 两种主题的样式。
考虑周全，选择最适合的方案
Mixins 和 Composables 都是 Vue 中实现代码复用的有效方式。Mixins 在 Vue 2 中被广泛使用，但它存在一些潜在的问题。Composables 是 Vue 3 中引入的一种新的代码复用方式，它提供了更灵活、更易于维护的代码复用方案。在大多数情况下，Composables 都是更好的选择。理解它们的应用场景，根据实际情况选择最适合的方案，才能写出高质量的代码。