前端大厂最新面试题-mixin.docx

Vue 中的 Mixin 及其应用场景 在 Vue 中，Mixin 是一种提供了方法实现的类，其他类可以访问 Mixin 类的方法而不必成为其子类。Mixin 类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂。 概念解释： 1. Mixin 是什么？Mixin 是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问 Mixin 类的方法而不必成为其子类。 2. Mixin 的作用是什么？Mixin 类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂。 在 Vue 中，Mixin 提供了一种非常灵活的方式来分发 Vue 组件中的可复用功能。本质上是一个 JS 对象，它可以包含我们组件中任意功能选项，如 data、components、methods、created、computed 等等。 使用 Mixin 有两种方式：局部混入和全局混入。 局部混入定义一个 Mixin 对象，有组件 options 的 data、methods 属性，然后将其传入组件的 mixins 选项中。例如： ```javascript var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } Vue.component('componentA',{ mixins: [myMixin] }) ``` 全局混入通过 Vue.mixin() 进行全局的混入，例如： ```javascript Vue.mixin({ created: function () { console.log("全局混入") } }) ``` 使用 Mixin 需要注意几点： * 当组件存在与 Mixin 对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖 Mixin 的选项。 * 如果相同选项为生命周期钩子的时候，会合并成一个数组，先执行 Mixin 的钩子，再执行组件的钩子。 应用场景： 1. 在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立。这时，可以通过 Vue 的 Mixin 功能将相同或者相似的代码提出来。 2. 例如定义一个 modal 弹窗组件，内部通过 isShowing 来控制显示，和一个 tooltip 提示框，内部通过 isShowing 来控制显示。通过观察上面两个组件，发现两者的逻辑是相同的，代码控制显示也是相同的。这时候 Mixin 就派上用场了。首先抽出共同代码，编写一个 Mixin，然后在两个组件中引入 Mixin。 源码分析： 从 Vue.mixin 入手，源码位置在 /src/core/global-api/mixin.js。 ```javascript export function initMixin (Vue: GlobalAPI) { Vue.mixin = function (mixin: Object) { this.options = mergeOptions(this.options, mixin) return this } } ``` Mixin 是 Vue 中的一种非常有用的功能，可以帮助我们封装一些可复用的功能，提高代码的复用性和可维护性。