2024年Web前端最新vue(8)，前端线程池基础入门和简单实践以及使用技巧

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

mounted(){

console.log(‘mixin mounted’);

}

}

export default {

mixins:[myMixin],

}

就相当于：

这样做的好处就是可以把多个组件公共选项抽取到一个 mixin 对象内，需要的时候直接引入就可以了。

二、mixin 使用时注意点

---

mixin 包含的选项，同时组件内也可以包含这些选项，如果 mixin 中包含的选项中，有部分属性相同怎么办？如 mixin 和组件内都存在一个同名方法时，如何处理？或者都包含生命周期钩子函数时，它们的执行顺序谁前谁后呢？接下来我们就看看，使用 mixin 时应该注意的点。

**2.1、**使用 mixin 对象时，组件内部和 mixin 包含相同选项，如何处理呢？

示例2：mixin 对象和实例都包含data选项，内部有两个不同的变量

{{qdr}} - {{name}}

运行后，我们发现两个变量都能使用，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 自定义属性。

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】