运行后，我们发现两个变量都能使用，mixin 对象中的 data 与实例中的 data 选项进行合并了。对于 methods 、computed 也是一样的。
如果我们把上个实例中的两个变量，修改成同名时，会怎样呢？
**2.2、**使用的 mixin 对象选项 和实例中的选项拥有相同的属性该如何处理？
示例3：data 内拥有相同的变量名 name
{{name}}
运行结果，name 值为 “前端人”。
属性值相同时，会选择就近原则，优先继承实例内的值，所以 mixin 对象的属性会被实例中的属性给覆盖掉。
**2.3、**mixin 对象也可以添加生命周期钩子函数，mixin 和 实例中 的那个优先执行呢？
示例4：mixin 加入生命周期钩子函数，以 mounted 为例
const myMixin = { mounted(){ console.log(‘mixin mounted’); } } export default { mixins:[myMixin], mounted(){ console.log(‘mounted’); } }
运行结果：
我们发现生命周期函数会合并执行，优先执行 mixin 中的， 然后再执行实例中的。
三、mixin 自定义属性
$options 用于当前组件实例 的初始化选项，需要在选项中包含自定义 property 时会有用处。
简单讲，$options 用于在实例中调用 mixin 自定义属性。
示例5：添加自定义属性
const myMixin = { custom:‘自定义属性’ } 在实例中使用： mounted(){ console.log(this.$options.custom); }
如果在实例中也包含一个同名自定义属性时，优先级会作何处理呢？如果我们想控制优先级又该如何处理呢？
四、合并策略
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
