初识Vue-混入mixins（详解分发 Vue 组件中可复用功能）

本文主要是介绍初识Vue-混入mixins（详解分发 Vue 组件中可复用功能），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、mixins混入介绍

概念

特点

功能

用法

应用

二、mixins混入语法

1.简单示例

2.选项合并

3.全局混入

4.混入对象选项：

5.注意事项：

三、mixins混入应用实例

1.身份验证逻辑混入

2.表单验证混入

3.全局工具函数混入

四、总结

一、mixins混入介绍

概念

混入是一种将可复用功能注入到 Vue 组件中的方式，它允许你将组件中的一些选项混合到多个组件中。

特点

可复用性： 可以定义一次，然后在多个组件中重复使用。
灵活性： 可以根据需要在不同的组件中混合不同的选项。
优先级： 如果组件和混入对象具有相同的选项，则组件选项将会覆盖混入对象的选项。

功能

数据： 可以在混入对象中定义数据属性。
方法： 可以在混入对象中定义方法，这些方法将被注入到组件中。
生命周期钩子： 可以在混入对象中定义生命周期钩子函数，它们将与组件的生命周期钩子函数合并。
计算属性、观察者和指令： 你可以在混入对象中定义计算属性、观察者和指令。
组件配置： 你还可以在混入对象中定义组件的配置选项。

用法

全局混入： 可以在 Vue 实例创建之前通过 Vue.mixin() 全局注册一个混入，这样在所有组件中都可以使用。
局部混入： 在组件中使用 mixins 选项来引入一个或多个混入对象。

应用

共享逻辑： 当多个组件需要共享相同的逻辑时，可以将该逻辑封装在一个混入对象中，并在需要时引入。
跨项目复用： 如果有一些通用的功能需要在多个项目中使用，可以将其封装为混入对象，方便在不同的项目中复用。

二、mixins混入语法

1.简单示例

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

// 定义混入对象
const myMixin = {created() {this.hello()},methods: {hello() {console.log('欢迎来到混入实例-RUNOOB!')}}
}// 定义一个应用，使用混入
const app = Vue.createApp({mixins: [myMixin]
})app.mount('#app') // => "欢迎来到混入实例-RUNOOB!"

2.选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

比如，数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

以下实例中，Vue 实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app"></div>
<script type = "text/javascript">
const myMixin = {data() {return {message: 'hello',foo: 'runoob'}}
}const app = Vue.createApp({mixins: [myMixin],data() {return {message: 'goodbye',bar: 'def'}},created() {document.write(JSON.stringify(this.$data)) }
})

输出结果为

{"message":"goodbye","foo":"runoob","bar":"def"}

同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin 对象的钩子将在组件自身钩子之前调用。

const myMixin = {created() {console.log('mixin 对象的钩子被调用')}
}const app = Vue.createApp({mixins: [myMixin],created() {console.log('组件钩子被调用')}
})// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

const myMixin = {methods: {foo() {console.log('foo')},conflicting() {console.log('from mixin')}}
}const app = Vue.createApp({mixins: [myMixin],methods: {bar() {console.log('bar')},conflicting() {console.log('from self')}}
})const vm = app.mount('#app')vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

以上实例，我们调用了以下三个方法：

vm.foo();
vm.bar();
vm.conflicting();

从输出结果 methods 选项中如果碰到相同的函数名则 Vue 实例有更高的优先级会执行输出。

3.全局混入

也可以全局注册混入对象。注意使用！一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。

const app = Vue.createApp({myOption: 'hello!'
})// 为自定义的选项 'myOption' 注入一个处理器。
app.mixin({created() {const myOption = this.$options.myOptionif (myOption) {document.write(myOption)}}
})app.mount('#app') // => "hello!"

谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

4.混入对象选项：

混入对象可以包含以下选项：

数据（data）： 可以是对象或函数，用于定义组件的数据属性。
方法（methods）： 包含组件的方法。
生命周期钩子（lifecycle hooks）： 包含组件的生命周期钩子函数。
计算属性、观察者和指令： 可以在混入对象中定义计算属性、观察者和指令等组件选项。

5.注意事项：

如果组件和混入对象具有相同的选项，则组件选项将会覆盖混入对象的选项。
当混入对象和组件本身有相同的生命周期钩子函数时，它们都会被调用，混入对象的钩子将在组件自身钩子之前调用。

三、mixins混入应用实例

1.身份验证逻辑混入

如果你的应用有多个需要身份验证的组件，你可以创建一个身份验证逻辑混入对象，并在需要的组件中引入它。这个混入对象可以包含登录、注销等身份验证相关的方法，以及判断用户是否已经登录的逻辑。

const authMixin = {methods: {login() {// 登录逻辑},logout() {// 注销逻辑}},computed: {isAuthenticated() {// 判断用户是否已经登录}}
};Vue.mixin(authMixin);

2.表单验证混入

如果你的应用有多个需要表单验证的组件，你可以创建一个表单验证混入对象，并在需要的组件中引入它。这个混入对象可以包含各种常见的表单验证规则和方法。

const formValidationMixin = {methods: {validateEmail(email) {// 邮箱验证逻辑},validatePassword(password) {// 密码验证逻辑}}
};Vue.mixin(formValidationMixin);

3.全局工具函数混入

如果你的应用中有一些常用的工具函数需要在多个组件中使用，你可以创建一个全局工具函数混入对象，并在需要的组件中引入它。

const utilsMixin = {methods: {formatDate(date) {// 格式化日期},formatCurrency(amount) {// 格式化货币金额}}
};Vue.mixin(utilsMixin);

四、总结

混入是什么： 混入是一种Vue.js提供的一种灵活的代码复用方式，允许将一组组件选项合并到一个对象中，然后将其应用到多个组件中。
全局混入： 可以使用Vue.mixin()在Vue实例创建之前全局注册一个混入，使得混入对象中的选项对所有组件都可用。
局部混入： 在组件中使用mixins选项引入一个或多个混入对象，使得这些混入对象中的选项对该组件及其子组件可用。
混入对象选项： 混入对象可以包含数据、方法、生命周期钩子、计算属性、观察者和指令等组件选项。
选项合并规则： 如果组件和混入对象具有相同的选项，则组件选项将会覆盖混入对象的选项。当混入对象和组件本身有相同的生命周期钩子函数时，它们都会被调用，混入对象的钩子将在组件自身钩子之前调用。
应用实例： 混入可以用于共享身份验证逻辑、表单验证规则、全局工具函数等多种场景，提高代码的复用性和可维护性。