![]UWOD(KIB9LJS9~S[T{QHM9.png](https://ucc.alicdn.com/pic/developer-ecology/ee6d75df65e2400ba21481d3e2c2d25b.png?x-oss-process=image/resize,w_1400/format,webp "]UWOD(KIB9LJS9~S[T{QHM9.png")
前言
在前面章节的文章中，我们了解了vue里面基础语法、生命周期、指令的使用、动画效果等内容。本章节开始，就一起学习vue的高级语法，今天的文章会学习到Mixin混入语法的内容。
概念
mixin混入：就是将一个对象中的数据、方法通过mixin混入到其他地方。
实例中使用mixin
data
以前的案例中，我们都是在实例或者组件中定义的data函数，使用mixin的时候，我们可以把data函数写进去，然后混入到实例中。
<script> const myMixin = { data(){ return { num: 111 } } } const app = Vue.createApp({ mixins: [myMixin], template: ` <div> <div>{{num}}</div> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
![11P}]3EF3J@I}HBUS1@61$N.png](https://ucc.alicdn.com/pic/developer-ecology/fe0bb4e658ca43bf8739d9fd3b2c1c3b.png?x-oss-process=image/resize,w_1400/format,webp "11P}]3EF3J@I}HBUS1@61$N.png")
在浏览器中会发现实例中模板渲染的num数据值就是mixin中定义的，也就是通过mixin会把数据对象和实例或组件进行合并，vue底层也会在执行template模板编译的时候进行合并执行。
那如果我们在使用mixin的同时，实例中也定义了data，并且数据值都是num，会出现什么情况呢(O_O)?
const app = Vue.createApp({ data(){ return { num: 22 } }, mixins: [myMixin], template: ` <div> <div>{{num}}</div> </div> ` }); 复制代码
![Z$%~M`GNQ}B(7]5_7G3`GXI.png](https://ucc.alicdn.com/pic/developer-ecology/e968f39620ee43399de0ecdecd45ab8e.png?x-oss-process=image/resize,w_1400/format,webp "Z$%~M`GNQ}B(7]5_7G3`GXI.png")
这时候页面上就会渲染实例中定义的data数据值了。
但是当mixin中定义了实例中没有定义的数据，但是实例中的模板渲染了这个数据，那就又会不一样了。
<script> const myMixin = { data(){ return { num: 111, count: 123 } } } const app = Vue.createApp({ data(){ return { num: 22 } }, mixins: [myMixin], template: ` <div> <div>{{num}} - {{count}}</div> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
- 在
mixin中定义了一个count数据值，但是实例里面没有定义，而是直接在模板中使用了。
![Z%BF]4AKO4~$`DI$F%B{O%7.png](https://ucc.alicdn.com/pic/developer-ecology/ec71675165cc4337a725fc473645b33b.png?x-oss-process=image/resize,w_1400/format,webp "Z%BF]4AKO4~$`DI$F%B{O%7.png")
组件实例中的
data的优先级高于mixin中的data的优先级，如果mixin定义了，而实例中没有定义的，则会使用mixin中的数据。
methods
上面的代码我们知道了mixin中定义data的概念，那如果我们点击按钮触发methods中的方法呢？是不是也会想data函数一样呢？
const myMixin = { methods:{ handleClick(){ console.log('mixin方法') } }, } const app = Vue.createApp({ mixins: [myMixin], template: ` <div> <button @click="handleClick">按钮</button> </div> ` }); 复制代码
当我们点击按钮时，就会执行mixin中定义的methods下面的方法。如果我们同时在实例中定义一个同样的方法会怎样呢？
const app = Vue.createApp({ mixins: [myMixin], methods:{ handleClick(){ console.log('实例方法') } }, template: ` <div> <button @click="handleClick">按钮</button> </div> ` }); 复制代码
![JT%GOGH8`5P2ZG%1Z]G{SI1.png](https://ucc.alicdn.com/pic/developer-ecology/1642549243de4e45a556995908effe90.png?x-oss-process=image/resize,w_1400/format,webp "JT%GOGH8`5P2ZG%1Z]G{SI1.png")
这时候我们会发现，methods的概念是和data的概念一样的。
组件实例中的
methods的优先级高于mixin中的methods的优先级。
生命周期
在vue里面，除了data和methods之外，还有生命周期函数，同样也可以在mixin中定义。
const myMixin = { created(){ console.log('mixin created') } } const app = Vue.createApp({ mixins: [myMixin], created(){ console.log('实例 created') }, template: ` <div> <button>按钮</button> </div> ` }); 复制代码
我们在实例和mixin中都定义了同样的created生命周期函数，执行的效果会怎样呢?
在页面执行生命周期函数的时候，会先执行
mixin中的，然后再执行组件实例中的。
但是在vue3里面不会通过或者说不推荐使用mixin做混入操作，在后面的章节中会讲解compositionAPI或插件时，会和大家一起学习新的内容。
总结
本章节主要讲解了mixin的使用、概念和组件实例的一些运用方式，还有mixin和组件实例的优先级概念。大家一起学习一起加油！！💪🏻
