Vue面试不得不会的20个题——第三篇

13. Vue中的混入（Mixins）是什么？

Vue中的混入（Mixins）是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象是一个包含组件选项的对象，可以包含data、components、created、methods、computed、watch等等。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。混入对象提供了一种灵活的方式来分发Vue组件中的可复用功能，而无需使用继承。

14. 如何使用混入（Mixins）？

在Vue中，你可以创建一个混入对象并将其在组件的mixins选项中使用。例如：

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

15. 混入（Mixins）的合并策略是怎样的？

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。具体来说：

• 数据对象（data）：如果混入和组件都定义了data，Vue会通过Vue.util.extend()执行浅拷贝来合并对象。这意味着如果数据对象中有引用类型（如数组或对象），它们会被共享，而不是复制。
• 方法和生命周期钩子：Vue将简单地将混入对象中的方法或钩子函数添加到组件的选项中。如果混入对象和组件有同名的方法或钩子函数，那么组件的选项将优先使用。

16. 混入（Mixins）有哪些应用场景？

混入（Mixins）的应用场景主要包括：

• 在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入可以减少源代码的污染。
• 很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

17. Vue中的过滤器（Filters）是什么？

Vue中的过滤器（Filters）用于文本格式化。它们可以用在两个地方：mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。例如：

<p>{{ message | capitalize }}</p>

在这个例子中，capitalize是一个过滤器，它接收message作为输入值，并返回一个新的值（通常是首字母大写的版本）。

18. Vue中的过滤器（Filters）有哪些限制？

Vue中的过滤器（Filters）有以下几个限制：

1. 仅用于文本：过滤器主要用于在mustache插值或v-bind表达式中格式化文本。它们不能直接用于HTML元素或指令。

2. 不改变原始数据：过滤器应该总是返回一个新的值，而不是修改原始数据。这是因为Vue是响应式的，只有当你改变它追踪的数据时，视图才会更新。

3. 不是计算属性：尽管过滤器可以执行一些计算任务，但它们不应该被用作计算属性的替代品。计算属性更适用于在模板中需要复杂逻辑的场景。

4. 全局或局部：过滤器要么是全局注册的（使用Vue.filter()），要么是局部注册的（在组件的filters选项中）。它们不能像组件那样在多个组件之间通过props或events进行通信。

5. 简单格式化：过滤器通常用于简单的文本格式化任务，如大小写转换、日期格式化等。对于更复杂的逻辑，应该使用计算属性或方法。

19. Vue的组件通信方式有哪些？

Vue的组件通信方式主要有以下几种：

1. Props 和 Events：父组件通过props向子组件传递数据，子组件通过events（如$emit）向父组件发送消息。

2. Vuex：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

3. Event Bus：通过创建一个空的Vue实例作为事件总线（Event Bus），可以在任何组件中触发和监听事件。

4. Provide 和 Inject：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，该依赖都可以作为props的一部分注入进来。

5. Slots 和 Scoped Slots：虽然它们主要用于内容分发，但也可以用于父子组件之间的通信。

6. Attrs 和 Listeners：v-bind.$attrs 可以将没有被子组件声明的属性 (class 和 style 除外) 传递给内部的子元素。v-on.$listeners 可以将父组件的事件监听器传递给子组件。

7. Refs：虽然refs主要用于直接访问DOM元素或子组件实例，但在某些情况下也可以用于组件通信。

20. Vue的响应式原理是什么？

Vue的响应式原理主要基于以下两点：

1. Object.defineProperty()：Vue在初始化实例时，会遍历data对象中的所有属性，并使用Object.defineProperty()方法将它们转化为getter/setter，使数据变得“可观察”。当数据发生变化时，setter方法会被触发，从而通知依赖该数据的观察者进行更新。

2. 依赖收集和派发更新：当组件渲染或计算属性计算时，会触发getter方法，此时Vue会收集这些依赖（即watcher）。当数据发生变化时，setter方法会触发，然后通知所有依赖该数据的watcher进行更新。这就是所谓的“依赖收集”和“派发更新”。

通过这两个步骤，Vue实现了一个高效的响应式系统，能够精确地知道何时需要重新渲染组件或重新计算计算属性。