vue(1)，小白看完都会了

运行后，我们发现两个变量都能使用，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前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。