Vue 进阶面试题, Vue 中 mixin 和 extends 的覆盖逻辑是什么?

Step 1

Q:: Vue 中 mixin 和 extends 的覆盖逻辑是什么？

A:: 在 Vue 中，mixin 和 extends 的覆盖逻辑遵循一种特定的优先级规则。当组件使用了 mixin 或 extends 时，Vue 会将这些选项合并到组件中。如果某些选项如 data、methods、computed 等在多个 mixin、extends 和组件本身中都存在，Vue 会按照如下顺序进行覆盖：

1. 组件本身的选项优先级最高，会覆盖 mixin 和 extends 中相同的选项。 2. 如果有多个 mixin，则按照 mixin 被引入的顺序依次覆盖，后引入的 mixin 会覆盖前一个 mixin 中相同的选项。 3. extends 的优先级介于组件本身和 mixin 之间，即 extends 会被组件本身的选项覆盖，但可以覆盖 mixin 中的选项。

Step 2

Q:: 在 Vue 中，如何避免 mixin 带来的命名冲突？

A:: 为了避免 mixin 带来的命名冲突，可以遵循以下几种策略：

1. 命名空间：在 mixin 中为每个变量、方法或计算属性加上特定的前缀，以确保命名的唯一性。 2. **使用组合式 API**：Vue 3 引入的组合式 API 可以替代 mixin 的功能，且更容易管理状态和逻辑，避免命名冲突。 3. 局部化 mixin：只在需要的组件中使用特定的 mixin，避免全局使用，减少命名冲突的可能性。

Step 3

Q:: Vue 中的 extends 和 mixin 有什么区别？

A:: extends 和 mixin 都可以用于在多个组件之间共享代码，但它们的区别在于：

1. 用途：extends 通常用于在一个组件中继承另一个组件的选项，而 mixin 则用于在多个组件中共享通用的逻辑。 2. 覆盖逻辑：extends 的优先级介于组件本身和 mixin 之间，而 mixin 的优先级顺序是按引入的顺序进行覆盖。 3. 用法场景：extends 更适合在组件间具有强关联性的场景，而 mixin 适用于跨组件复用代码的情况。