foreword
When some small partners take over other people’s Vue projects, they see a Mixin folder inside, and they may be in a foggy state. Today, let’s talk about Mixin and try to stop being in the fog in the future.
1. What are Mixins?
Mixins (mixed in): When we have logic or configuration in multiple components (data or functions are very similar), we can use mixins to extract the common part, and use the functions encapsulated by mixins, and the components will call them without changing the function outside the scope. Reducing code redundancy can also make later maintenance easier.
注意：提取的是逻辑或配置，而不是HTML代码和CSS代码。
Mixins (mixed in) : official website explanation please see here https://v2.cn.vuejs.org/v2/guide/mixins.html
How to use Mixins
define mixins
mixins is an object, which can contain some common configurations in Vue components, such as data, methods, created, etc. Create a new mixins folder in our project, and then create a new index.js file to store the mixin code.
// src/mixins/index.js
export const mixins = {
data() {
return {
};
},
computed: {
},
created() {
},
mounted() {
},
methods: {
},
};
mixins use
export const mixins = {
data() {
return {
msg: "我是mixin中的msg",
};
},
computed: {
},
created() {
console.log("mixin中的created生命周期函数");
},
mounted() {
console.log("mixin中的mounted生命周期函数");
},
methods: {
clickMe() {
console.log("mixin中的点击事件");
},
},
};
Partial mix-in
If the data in the mixin is changed in one component, another component that references the mixin will not be affected, and the mixins in different components are independent of each other
A.vue page (parent component) uses
<template>
<div>
<van-button @click="handleChangeMixin">父组件修改mixins
</van-button>
<div>mixins：{
{msg}}</div>
<div>
<hr>
</div>
<mixinsDemo></mixinsDemo>
</div>
</template>
<script>
import {
mixins
} from "@/mixins/index";
import mixinsDemo from "@/components/common/mixinsdemo";
export default {
mixins: [mixins],
components: {
mixinsDemo
},
data() {
return {
};
},
created() {
},
methods: {
handleChangeMixin() {
console.log("父组件调用minxi数据", this.msg);
this.msg = "父组件原mixins的msg已被改了";
console.log("父组件更改后的msg:", this.msg);
}
},
};
</script>
<style scoped>
</style>
B.vue page (subcomponent) use
<template>
<div>
<van-button @click="handleMixin">子组件修改mixins
</van-button>
<div>mixins：{
{msg}}</div>
</div>
</template>
<script>
import {
mixins
} from "@/mixins/index";
export default {
mixins: [mixins],
data() {
return {
};
},
components: {
},
created() {
},
methods: {
handleMixin() {
console.log("没有修改前的msg", this.msg);
this.msg = "子组件原mixins的msg已被改了";
console.log("子组件更改后的msg:", this.msg);
}
},
};
</script>
<style scoped>
</style>
global mixins
Introduce mixins globally in main.js
import Vue from "vue";
import App from "./App.vue";
import {
mixins } from "./mixin/index";
Vue.mixin(mixins);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");
Use: Directly annotate the introduction of mixins in the A and B components above, and you can see that there is no difference between the effect and the local mix.
Note: Use global mixins carefully, it will affect every individually created Vue instance (including third-party components), avoid repeated application mixins
question
Through the above understanding, we may write multiple mixed-in files in mixins at the same time, and at this time there will be the following conflicts
1. Life cycle function
The names of the lifecycle functions are fixed, and the default merging strategy is as follows:
first execute the code in the lifecycle function in the mixin, and then execute the code inside the component
2. Data data conflict
When the data data in the mixins conflicts with the data data in the component, the data data in the component will overwrite the data in the mixin
3. Method conflict
This kind of conflict is easy to encounter, and it is easy to use the same official website case in the front-end method naming
注意：Vue.extend() 也使用同样的策略进行合并。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
Advantages and disadvantages of mixins
advantage
- No need to pass state
- Improve code reusability and reduce code redundancy
- Easy to maintain, only need to modify one place
shortcoming
- naming conflict
- If abused, it will be difficult to maintain later
- It is not easy to trace the source, and it is a little troublesome to troubleshoot the problem
- Can't easily repeat code
The difference between Mixin and Vuex
- Vuex state management, if a certain data in Vuex is changed in a component, all other components that reference the data in Vuex will also change accordingly.
- The data and methods in Mixin are independent, and the components do not affect each other after use.
Summarize
Mixin has advantages and disadvantages. It is not recommended to abuse it in many cases, but it is very appropriate to use it in some scenarios, so in many cases we need to consider whether to use public components or use mixin.