vue2的mixins和vue3的hooks

本文主要是介绍vue2的mixins和vue3的hooks，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue2的mixins和vue3的hooks
vue2的mixins
- vue2 mixins 钩子函数
- vue2的Mixins是怎么使用的
vue3的hooks
- 什么是hooks
- 如何使用

vue2的mixins和vue3的hooks

Vue.js 2.x 中的 mixins 和 Vue.js 3.x 中的 Composition API (包括 hooks) 是 两种不同的代码组织和复用机制。

Vue.js 2.x Mixins:
- Mixins 是一种将可重用功能和逻辑注入到组件中的方式。
- 使用 mixins 可以将一些通用的选项（如生命周期钩子、数据、方法等）封装成对象，然后混入到多个组件中。
- 在组件选项的 mixins 数组中引入 mixins 对象，可以将 mixins 中的选项合并到组件中。
- Mixins 中的选项会和组件本身的选项进行合并，如果出现冲突，则会按照一定的策略进行处理。
- Mixins 的缺点是可能导致命名冲突和命名空间污染。
Vue.js 3.x Composition API (Hooks):
- Composition API 是 Vue.js 3.x 中引入的一套函数式 API，用于更灵活地组织和复用组件逻辑。
- 使用 Composition API，我们可以通过创建自定义的逻辑块（即 composition 函数）来封装相关的逻辑，并将其应用到一个或多个组件中。
- Composition API 使用了一些新的函数，如 ref、reactive、watch 等，以及新的钩子函数 setup 来定义组件逻辑。
- Hooks 可以将相关的逻辑聚合在一起，提高代码的可读性和维护性。
- Composition API 的优点是可以更灵活地组织和复用逻辑，避免了命名冲突和命名空间污染的问题。

需要注意的是，Vue.js 3.x 的 Composition API 和 Vue.js 2.x 的 mixins 是不兼容的。

如果你在迁移项目或选择开发新项目时，可以根据具体需求和团队熟悉程度选择适合的版本和机制。

同时，Vue.js 3.x 的 Composition API 提供了更强大的能力和更好的开发体验，推荐在新项目中使用。

vue2的mixins

vue2 mixins 钩子函数

在 Vue.js 2.x 的 mixins 中，可以使用以下钩子函数来定义和处理组件的生命周期：

created: 在组件实例被创建之后调用，常用于进行数据初始化或非响应式的操作。
mounted: 在组件挂载到 DOM 上后调用，常用于进行 DOM 相关的操作和初始化。
updated: 在组件更新之后调用，当组件的数据发生变化导致重新渲染时会触发该钩子函数。
beforeDestroy: 在组件销毁之前调用，可以进行一些清理操作，如取消订阅、解绑事件等。
destroyed：在组件销毁之后调用，可以进行一些清理和资源释放的操作。

除了上述常用的钩子函数外，还有其他一些钩子函数可供使用，如beforeCreate、beforeMount等。这些钩子函数可以通过 mixins 混入到组件中，以实现相同的逻辑复用。

使用 mixins 定义钩子函数的步骤如下：

创建一个包含钩子函数和其他选项的 mixins 对象。
在组件中的 mixins 数组中引入 mixins 对象。
当组件的生命周期触发时，mixins 中相应的钩子函数也会被调用。

需要注意的是，如果多个 mixins 对象中的钩子函数有重名的情况，它们会按照 mixins 数组的顺序依次调用。

示例代码如下所示：

// 创建一个 mixins 对象
var myMixin = {created: function () {console.log('Mixin created');},mounted: function () {console.log('Mixin mounted');}
};// 在组件中引入 mixins 对象
new Vue({mixins: [myMixin],created: function () {console.log('Component created');},mounted: function () {console.log('Component mounted');}
});

上述代码中，当创建一个 Vue 实例时，created 和 mounted 钩子函数会按照 mixins 的顺序先后被调用，然后才会调用组件自身的钩子函数。

vue2的Mixins是怎么使用的

Vue2的Mixins可以用来组合多个组件中共用的逻辑，使得代码的复用更加简化，提高了开发效率。使用Mixins的步骤如下：

创建一个包含共用逻辑的Mixin文件。

export const mixin = {data() {return {message: 'Hello, world!'}},methods: {showMessage() {alert(this.message);}}
}

在需要使用Mixins的组件中引入并使用Mixin。

import { mixin } from './mixin.js';
export default {mixins: [mixin],mounted() {this.showMessage(); // 输出: "Hello, world!"}
}

使用Mixins的时候需要注意以下事项：

Mixins定义的属性和方法会合并到组件中，冲突的情况下会以组件的优先。
Mixins可以被多个组件使用，若Mixins被多个组件引用，那么它的数据和方法都会进行混合，组件中使用的时候需要注意。
不要在Mixin中修改Vue实例的数据或状态，Mixins的数据和方法可能与组件的数据和方法冲突。
Mixins中的钩子函数会在组件中的钩子函数之前执行。

vue3的hooks

什么是hooks

hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks 还真是函数的一种写法。

vue3 借鉴 react hooks 开发出了 Composition API ，所以也就意味着 Composition API 也能进行自定义封装 hooks。

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。

其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

如何使用

在 Vue 3 中，你可以使用 Composition API 中的 Hooks 来实现代码复用。下面是一些常见的方法：

自定义 Hooks 函数: 你可以编写自定义的 Hooks 函数，将一些共用的逻辑封装到该函数中，然后在多个组件中引用它。例如，你可以创建一个名为 useValidation 的自定义 Hooks 函数，用于表单验证逻辑的复用。

// useValidation.js
import { ref } from 'vue';export function useValidation() {const error = ref(null);function validate(value) {if (!value) {error.value = 'Field is required';} else {error.value = null;}}return {error,validate,};
}

然后，在需要进行表单验证的组件中使用这个 Hooks 函数：

import { useValidation } from './useValidation';export default {setup() {const { error, validate } = useValidation();function onSubmit() {// 进行验证validate(value);if (error.value) {// 显示错误信息} else {// 提交表单}}return {error,onSubmit,};},
};

公共逻辑提取：使用 Composition API 的 Hooks 将公共逻辑提取出来，并将其作为参数传递给其他 Hooks。这样，多个组件可以共享相同的逻辑。

import { ref, watchEffect } from 'vue';export function useFetchData(url) {const data = ref(null);const loading = ref(false);const error = ref(null);watchEffect(() => {loading.value = true;fetch(url).then(response => response.json()).then(result => {data.value = result;loading.value = false;}).catch(err => {error.value = err;loading.value = false;});});return {data,loading,error,};
}

然后，在需要获取数据的组件中使用这个 Hooks 函数：

import { useFetchData } from './useFetchData';export default {setup() {const { data, loading, error } = useFetchData('https://api.example.com/data');return {data,loading,error,};},
};