Vue3 -- Mixin混入
文章目录
- 什么是Mixin混入
- 使用Mixin混入data
- 使用Mixin混入钩子
- 使用Mixin混入方法
- 使用Mixin混入自定义属性
- 修改优先级
- 局部Mixin
- 全局Mixin
- Mixin存在的问题
- 总结
什么是Mixin混入
混入 (mixin) 是一种非常灵活的 Vue 组件中的可复用方式，一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
使用Mixin混入data
首先定义Minxin
const myMixin = {
data(){
return {
num: 1
}
}
};
然后使用mixins，在组件中使用之前定义好的myMixin
const app = Vue.createApp({
data(){
return {
num: 2
}
},
mixins:[myMixin],
template:`<div>{{num}}div>`
})
打开浏览器页面渲染出组件的data数据。
将组件的data注释后，页面才渲染出Mixin混入的数据。
结论：组件 data 优先级高于 Mixin 混入的 data
完整代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.js -- Mixin混入title>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="root">div>
<script>
const myMixin = {
data(){
return {
num: 1
}
}
};
const app = Vue.createApp({
// data(){
// return {
// num: 2
// }
// },
mixins:[myMixin],
template:`{{num}}`
})
const vm = app.mount('#root');
script>
body>
html>
使用Mixin混入钩子
在之前定义好的myMixin，写上钩子created，并在控制台输出：mixin created
created(){
console.log("mixin created");
}
在组件上也写上钩子created，并在控制台输出：created
created(){
console.log("created");
}
控制台输出：
结论：先执行 Mixin 的钩子，再执行组件里的钩子
完整代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.js -- Mixin混入title>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="root">div>
<script>
const myMixin = {
data(){
return {
num: 1
}
},
created(){
console.log("mixin created");
}
};
const app = Vue.createApp({
data(){
return {
num: 2
}
},
created(){
console.log("created");
},
mixins:[myMixin],
template:`{{num}}`
})
const vm = app.mount('#root');
script>
body>
html>
使用Mixin混入方法
首先在组件模板绑定点击事件
template:`<div @click="handleClick">{{num}}div>`
然后在Mixin和组件中写入响应事件的方法
//myMixin
methods:{
handleClick(){
console.log("mixin handleClick");
}
},
//组件
methods:{
handleClick(){
console.log("handleClick");
}
},
打开浏览器触发点击事件控制台输出：handleClick
将组件的方法注释后，再次触发点击事件，控制台输出：mixin handleClick
结论：组件 methods方法 优先级高于 Mixin 混入的 methods方法
完整代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.js -- Mixin混入title>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="root">div>
<script>
const myMixin = {
data(){
return {
num: 1
}
},
methods:{
handleClick(){
console.log("mixin handleClick");
}
},
};
const app = Vue.createApp({
data(){
return {
num: 2
}
},
// methods:{
// handleClick(){
// console.log("handleClick");
// }
// },
mixins:[myMixin],
template:`{{num}}`
})
const vm = app.mount('#root');
script>
body>
html>
使用Mixin混入自定义属性
自定义属性：就是直接写在组件里的属性
定义一个Mixin，并写入自定义属性
const myMixin = {
num: 1
};
创建vue实例，定义自定义属性，引入myMixin
const app = Vue.createApp({
num: 2,
mixins: [myMixin],
})
最后使用options进行插值
options 构造选项，是在创建 vue 实例时传入的参数，是一个对象。
options里面有五类属性：
数据：data、 props、 propsData、 computed、methods、 Watch
DOM: el、 template、 render、 renderError
生命周期钩子: beforeCreate、 created、beforeMount、 mounted、 beforeUpdate、 updated、activated、 deactivated、 beforeDestroy、 destroyed、errorCaptured
资源: directives、 filters、 components
组合: parent, mixins、 extends、 provide、 inject
<div>{{this.$options.num}}div>
打开浏览器页面渲染出组件的自定义属性数据。
将组件的自定义属性注释后，页面才渲染出Mixin混入的自定义属性数据。
结论：组件 自定义属性 优先级高于 Mixin 混入的 自定义属性
完整代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.js -- Mixin混入title>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="root">div>
<script>
const myMixin = {
num: 1
};
const app = Vue.createApp({
// num: 2,
mixins: [myMixin],
template:`{{this.$options.num}}`
})
const vm = app.mount('#root');
script>
body>
html>
修改优先级
沿用使用Mixin混入自定义属性的代码，在组件后添加配置app.config，使用optionMergeStrategies属性修改优先级
app.config.optionMergeStrategies.num = (mixinVal, appValue) => {
return mixinVal || appValue;
}
完整代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.js -- Mixin混入title>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="root">div>
<script>
const myMixin = {
num: 1
};
const app = Vue.createApp({
num: 2,
mixins: [myMixin],
template:`{{this.$options.num}}`
});
app.config.optionMergeStrategies.num = (mixinVal, appValue) => {
return mixinVal || appValue;
}
const vm = app.mount('#root');
script>
body>
html>
页面效果：
局部Mixin
上面案例中使用的Mixin，就是局部Mixin。局部Mixin和局部组件的用法类似，局部Mixin在使用时，需要使用mixins声明。
定义局部Mixin：
const myMixin = {
data(){
return {
num: 1
}
}
};
使用局部Mixin：
const app = Vue.createApp({
mixins:[myMixin],
template:`<div>{{num}}div>`
})
页面效果：
全局Mixin
全局Mixin类似于全局组件，默认注入每一个组件里，直接可用。
定义全局Mixin：
app.mixin({
data(){
return {
num: 1
}
}
})
使用全局Mixin：
const app = Vue.createApp({
template:`<div>{{num}}div>`
})
页面效果：
Mixin存在的问题
- 变量来源不明，不利于代码的阅读；
- 使用多个Mixin可能会造成命名冲突；
- Mixin和组件可能会出现多对多关系，复杂度较高；
总结
Mixin： 将多个组件相同的逻辑，抽离出来复用；
使用Mixin混入data： 组件 data 优先级高于 Mixin 混入的 data;
使用Mixin混入钩子： 先执行 Mixin 的钩子，再执行组件里的钩子；
使用Mixin混入方法: 组件 methods方法 优先级高于 Mixin 混入的 methods方法；
使用Mixin混入自定义属性： 组件自定义属性优先级高于 Mixin 混入的 自定义属性；
修改优先级： 配置app.config，使用optionMergeStrategies属性修改优先级；
局部Mixin： 局部Mixin和局部组件的用法类似，局部Mixin在使用时，需要使用mixins声明；
全局Mixin： 全局Mixin类似于全局组件，默认注入每一个组件里，直接可用；
（完）