千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
P13 vue高频面试题
经过阅读这些高频面试题目，我对Vue有了更深刻的理解。以下是我听课的感悟：
《《1.vue解释单向数据流和双向数据绑定：》》
Vue是一种流行的JavaScript框架，支持单向数据流和双向数据绑定。
1. 单向数据流（One-Way Data Flow）：在Vue中，单向数据流指的是数据从父组件流向子组件的过程。父组件通过props向子组件传递数据，子组件通过props接收并使用这些数据。这种单向数据流的好处是可以确保数据的来源清晰，易于追踪和调试。当父组件的数据发生变化时，子组件会重新渲染以反映最新的数据。
2. 双向数据绑定（Two-Way Data Binding）：双向数据绑定是指数据的变化既可以从父组件传递给子组件，也可以从子组件传递给父组件。Vue使用v-model指令来实现双向数据绑定。当输入框中的值改变时，v-model会自动更新绑定的数据，反之亦然。这种机制可以方便地处理表单输入和实时数据同步的场景。
单向数据流和双向数据绑定都有各自的优点和用途。单向数据流适用于复杂的组件关系和数据流动较为复杂的场景，有助于减少数据流动的混乱和复杂性。双向数据绑定适用于需要实时同步数据的简单表单场景，可以简化代码书写和维护。在实际开发中，根据具体需求选择适合的数据流动方式。
《《2.Vue中Object.defineProperty有什么缺点：》》
在Vue早期版本中，Object.defineProperty是用来实现数据劫持和双向数据绑定的核心机制。然而，尽管它在Vue中被广泛使用，但也存在一些缺点。
1. 需要深度递归：Vue通过递归地在对象上调用Object.defineProperty来实现对对象的监听和拦截。这个过程需要遍历整个对象，对每个属性进行劫持，当对象嵌套层级很深时，性能开销较大。
2. 无法监听新增或删除的属性：使用Object.defineProperty只能监听已经存在对象上的属性，对于后续新增或删除的属性，无法自动进行监听。这意味着需要使用Vue提供的特殊方法（如Vue.set和Vue.delete）来手动触发响应式更新，增加了开发的复杂性。
3. 需要对数组进行特殊处理：由于Object.defineProperty无法监听数组的改变，Vue对数组进行了特殊处理。在Vue中，对数组的变异方法（如push、pop、splice等）被重写，使其能触发响应式更新。然而，直接通过索引赋值或修改数组长度的操作仍然无法被监听。
4. 不支持Map和Set：Object.defineProperty只能应用于JavaScript对象上的属性，而无法直接应用于ES6中的Map和Set等数据结构。当需要对Map和Set进行响应式处理时，需要使用Vue提供的特殊API来进行包装。
综上所述，尽管Object.defineProperty在早期的Vue中被广泛使用，但其存在性能问题、对新增和删除属性的限制、数组处理的复杂性以及对特殊数据结构的不支持等缺点。为了解决这些问题，Vue在后续版本中转向使用Proxy作为数据劫持的底层机制。Proxy具有更好的性能和更强大的功能，可以更方便地实现响应式数据绑定。
《《3.对MVC，MVP，MVVM的理解：》》
MVC（Model-View-Controller），MVP（Model-View-Presenter）和 MVVM（Model-View-ViewModel）是三种常见的软件架构模式，用于组织和管理应用程序的代码和逻辑。它们具有不同的角色分工和交互方式。
1. MVC模式：MVC是一种经典的软件架构模式，包括三个核心组件：
- Model（模型）：负责处理数据和业务逻辑。
- View（视图）：负责展示数据给用户，并接收用户的输入操作。
- Controller（控制器）：负责接收用户的输入，处理用户请求，并更新模型和视图。
在MVC中，视图通过观察模型来获取数据并进行展示，视图将用户的输入发送给控制器，控制器根据用户输入来操作模型数据。模型通过通知观察者模式来通知视图进行更新。
2. MVP模式：MVP是在MVC的基础上进一步发展的一种模式，将控制器（Controller）拆分为两个组件：
- Model（模型）：负责处理数据和业务逻辑。
- View（视图）：负责展示数据给用户，并接收用户的输入操作。
- Presenter（展示者）：充当了控制器的角色，负责从视图中抽离出业务逻辑，并处理视图和模型之间的通信。
在MVP中，视图负责处理用户的输入事件并将其传递给Presenter，Presenter根据用户的输入更新模型数据，并将更新后的数据传递给视图展示。
3. MVVM模式：MVVM是一种数据驱动的架构模式：
- Model（模型）：负责处理数据和业务逻辑。
- View（视图）：负责展示数据给用户，并接收用户的输入操作。
- ViewModel（视图模型）：充当了连接Model和View的桥梁，负责将模型数据转化为视图所需的数据，并监听视图的变化以更新模型数据。
在MVVM中，视图通过数据绑定将视图和视图模型关联起来，视图模型负责将模型数据响应式地同步到视图上。当视图发生变化时，视图模型也会相应地更新模型数据。这样的双向数据绑定使得开发者可以更方便地管理和更新视图和模型之间的数据。
每种模式都有其适用的场景和优势，选用哪种取决于具体的需求和开发背景。MVC适用于简单的应用程序，MVP适用于需要更好的模块化和可测试性的应用程序，MVVM适用于需要实现复杂的数据绑定和交互的应用程序。
《《4.生命周期：》》
在软件开发中，生命周期是指一个对象或组件从创建到销毁的整个过程中经历的一系列阶段和事件。以下是常见的生命周期概念：
1. 组件生命周期：在前端开发中，组件是构建用户界面的基本单元。组件的生命周期包括以下几个阶段：
- 创建阶段：组件的实例化和初始化。
- 更新阶段：组件的属性或状态发生变化时，触发重新渲染。
- 销毁阶段：组件从界面中移除，释放资源。
在Vue中，常见的组件生命周期钩子函数包括created、mounted、updated和destroyed等。
2. 应用程序生命周期：应用程序生命周期描述了整个应用程序从启动到关闭的过程。它包括以下几个阶段：
- 启动阶段：应用程序开始加载和初始化。
- 运行阶段：应用程序运行中，处理用户的输入和事件。
- 关闭阶段：应用程序被关闭，进行资源清理和保存工作。
在不同的开发框架中，应用程序生命周期的具体实现可能会有所区别。
3. 生命周期钩子函数：生命周期钩子函数是在特定阶段执行的回调函数，用于在特定的生命周期阶段执行自定义的逻辑。在不同的框架或库中，可以通过这些钩子函数来扩展或修改默认行为。例如，在Vue中的created和mounted函数就是组件生命周期的钩子函数。
通过理解和使用生命周期，开发者可以更好地控制和管理应用程序或组件的状态和行为，进行必要的初始化、资源释放、数据更新等操作，确保应用程序的正常运行和性能优化。
《《5.Vue响应式数据原理吗? Proxy 与 bjectdefineProperty 优劣对比?》》
当你将一个普通的 JavaScript 对象传入 Vue 实例作为数据对象时，Vue 将遍历此对象的每个属性，并使用 Object.defineProperty 将它们转为 getter/setter。这些 getter/setter 对象实现了“消息拦截”，即当属性被访问或修改时，Vue 可以通知依赖项追踪器（dependency tracker）进行相应的更新，实现了响应式数据。
现在来比较一下 Proxy 和 Object.defineProperty 的优劣：
Proxy 的优势：
1. 更强大的拦截能力：Proxy 可以直接拦截对对象的操作，而不仅仅局限于属性的访问和修改，包括对象的创建、删除、遍历等操作。
2. 更简洁的语法和 API：使用 Proxy 可以通过一组简洁的语法和 API 实现对对象的拦截，相比较而言更易于理解和使用。
Object.defineProperty 的优势：
1. 兼容性更好：Object.defineProperty 是 ES5 的一部分，而 Proxy 是 ES6 引入的新特性，因此在一些旧浏览器或特定环境中可能不被支持。而 Object.defineProperty 可以在相对广泛的 JavaScript 运行环境中使用。
2. 更好的性能：Proxy 相对于 Object.defineProperty 在性能上有一定的损耗，尤其是在大规模、频繁访问的场景下。Object.defineProperty 的实现更为简单并且经过多年优化，因此在一些性能敏感的应用场景中可能更合适。
综上所述，Proxy 相比 Object.defineProperty 具有更强大的拦截能力和更简洁的语法，但在兼容性和性能方面可能存在一些问题。因此，在选择使用哪种方式时，需要考虑到项目的需求和目标平台，并权衡两者之间的优劣。
《《6.Composition API 的出现带来哪些新的开发体验，为啥需要这个? 》》
Composition API 是 Vue 3 中引入的一项新特性，它带来了一些新的开发体验和优势，使得 Vue 开发更加灵活和可维护。
以下是 Composition API 带来的一些新的开发体验：
1. 更灵活的组合逻辑：Composition API 允许开发者将逻辑按照功能而非选项分组，可以更容易地复用和组织代码。通过将相关的逻辑集中在一起，可以提高代码的可读性和可维护性。
2. 基于函数的 API：Composition API 抛弃了 Options API 的对象形式，而是通过函数的方式来组织和定义组件的逻辑。这样的写法更为直观和简洁，能够更好地进行代码的组合和重用。
3. 更好的类型推导和编辑器支持：Composition API 基于函数和响应式的特性，使得类型系统能够更好地推导出各个函数和变量的类型，提供了更好的编辑器支持和代码提示。
4. 解决了一些 Options API 的问题：Options API 在处理复杂组件或逻辑时有时候会导致代码冗余和难以维护的问题。Composition API 的出现解决了这些问题，提供了更好的组织和封装方式，使得代码更加清晰和可维护。
Composition API 的出现是为了解决 Vue 2 中 Options API 存在的一些缺点和限制，为开发者提供更好、更灵活的开发体验。它使得组件的逻辑更容易组合和复用，提供了更好的类型推导和编辑器支持，同时解决了一些痛点，使得 Vue 的开发更加高效和便捷。
《《7.对比jQuery，Vue 有什么不同 》》
Vue 和 jQuery 是两个具有不同定位和功能的前端工具，下面是它们之间的一些主要区别：
1. 架构和设计思想：Vue 是一个现代化的渐进式JavaScript框架，采用了组件化的架构和响应式数据绑定的思想，通过构建大型应用程序来提供更好的代码组织和可维护性。而 jQuery 是一个提供操作DOM和处理事件的JavaScript库，主要关注在浏览器环境下的DOM操作和特效。
2. 文档和学习曲线：Vue 提供了完善和易于理解的文档，具备丰富的资源和社区支持，使得学习和使用起来相对较简单。而 jQuery 的文档相对简单直接，上手较容易。
3. 数据绑定和响应式：Vue 提供了响应式数据绑定系统，可以自动追踪数据的变化并实时更新DOM。这使得开发者能够更容易地管理和响应数据的变化。而 jQuery 并没有内置的数据绑定机制，需要手动处理数据和DOM的同步。
4. 组件化和模块化开发：Vue支持组件化开发，将界面抽象为一个个组件，使得代码重用和模块化更容易。而 jQuery 更多地关注单个DOM元素操作，没有明确的组件化和模块化开发的概念。
5. 生态系统和插件丰富性：Vue 生态系统非常丰富，拥有大量的官方和第三方插件，能够满足不同的需求，支持从构建工具到路由、状态管理以及UI库等多个方面。而 jQuery 也有一些插件可供选择，但相对于 Vue 生态系统相对较小。
总的来说，Vue 更适合构建复杂的交互式应用程序，提供了现代化的架构和开发思想；而 jQuery 更适合进行一些简单的DOM操作和特效处理。根据项目需求和开发目标，选择合适的工具能够提高开发效率和维护性。
《《8.如何再Vue的单文件组件里的样式定义全局CSS? 》》
在 Vue 单文件组件中，你可以通过以下几种方式定义全局 CSS 样式：
1. 在单文件组件的 `<style>` 标签中使用 `@import` 导入全局 CSS 文件：
```vue
<style>
@import '~/assets/styles/global.css';
/* ... 组件的样式定义 ... */
</style>
```
在这种方法中，你可以在全局 CSS 文件中定义全局样式，然后通过 `@import` 将其导入到组件的样式中。
2. 使用 Vue 的 `vue.config.js` 配置文件设置全局样式：
在你的项目的根目录下，创建一个名为 `vue.config.js` 的文件，然后在其中添加以下代码：
```javascript
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import '@/assets/styles/global.scss';`
}
}
}
};
```
在上述代码中，你需要将 `global.scss` 替换为你实际的全局样式文件路径。
3. 在 `public/index.html` 文件中直接引入全局 CSS 文件：
在 `public/index.html` 文件的 `<head>` 标签中添加以下代码：
```html
<link rel="stylesheet" href="/path/to/global.css">
```
在上述代码中，你需要将 `/path/to/global.css` 替换为你实际的全局样式文件路径。
注意：以上方法中，使用 `~` 或 `@` 符号可以简化路径，如果你的项目配置了别名（alias），这些符号会映射到正确的路径。
以上是几种常见的在 Vue 单文件组件中定义全局 CSS 样式的方法，你可以根据自己的项目需求和个人偏好选择合适的方式。
《《9.说一下Sroot，sparent，$refs 》》
Sroot、sparent 和 $refs 是 Vue 中的一些特殊属性和方法，用于在组件中访问和操作其他组件或 DOM 元素。
1. Sroot：
Sroot 是一个指向根组件的属性，可以在任何组件中通过 this.$root 来访问。它提供了一种在子组件中访问根组件的方式，可以用于在组件层次结构中传递数据或调用根组件的方法。
2. sparent：
sparent 是一个指向父组件的属性，可以在子组件中通过 this.$parent 来访问。它提供了一种在子组件中访问父组件的方式，使得组件之间可以进行通信和共享数据。
注意：使用 sroot 和 sparent 属性来访问其他组件，可能会导致组件之间的紧耦合，因此在设计和使用时需要谨慎考虑。
3. $refs：
$refs 是 Vue 实例的特殊属性，在组件中可以通过 this.$refs 来访问 DOM 元素或子组件的引用。它提供了一种直接访问和操作 DOM 或子组件的方式。
例如，你可以在组件中给某个元素添加 ref 属性，然后通过 this.$refs 来访问该元素，或者给子组件添加 ref 属性，在父组件中通过 this.$refs 来访问子组件并调用其方法或访问其数据。
需要注意的是，$refs 会在组件渲染完成之后被填充，因此在组件的 created 或 mounted 钩子函数中访问 $refs 才能保证正确的引用。
总结：Sroot、sparent 和 $refs 是 Vue 中用于在组件中访问和操作其他组件或 DOM 元素的属性和方法。它们提供了不同的访问方式，使得组件之间可以实现通信、数据共享和操作 DOM 的功能。但需要记住，在使用这些属性和方法时，需要权衡组件的耦合性和设计的合理性。
《《10.Vue 中怎么自定义指令 》》
在 Vue 中，你可以通过自定义指令来扩展和定制 DOM 元素的行为。自定义指令允许你在元素上绑定自定义的 JavaScript 行为，并可以在元素的生命周期中执行相应的操作。
下面是自定义指令的基本步骤：
1. 创建自定义指令：
在 Vue 中，使用 `Vue.directive` 方法来创建自定义指令。你需要提供两个参数，第一个参数是指令的名称，第二个参数是一个对象，包含一些钩子函数和选项。
```javascript
Vue.directive('my-directive', {
// 钩子函数和选项
});
```
2. 定义指令的钩子函数：
在自定义指令的对象中可以定义一些钩子函数来处理不同的生命周期事件：
- `bind`：只调用一次，当指令绑定到元素上时调用。
- `inserted`：在被绑定元素插入父节点时调用。
- `update`：在元素更新时调用，包括初始化。
- `componentUpdated`：在组件的 VNode 更新后调用。
- `unbind`：只调用一次，当指令从元素上解绑时调用。
```javascript
Vue.directive('my-directive', {
bind(el, binding, vnode) {
// 绑定时的处理逻辑
},
inserted(el, binding, vnode) {
// 元素插入父节点时的逻辑
},
// 其他钩子函数
});
```
3. 在模板中使用指令：
在模板中使用指令时，可以通过 `v-` 前缀来标识。
```html
<div v-my-directive></div>
```
4. 指令的参数和修饰符：
自定义指令也可以接受参数和修饰符，可以在指令绑定时使用 `bind` 钩子函数的 `binding` 参数来获取相关信息。
```javascript
Vue.directive('my-directive', {
bind(el, binding) {
console.log(binding.value); // 指令的参数值
console.log(binding.modifiers); // 修饰符对象
}
});
```
```html
<div v-my-directive:arg.modifier="value"></div>
```
以上是创建和使用自定义指令的基本步骤。通过定制指令的钩子函数和选项，你可以在元素上实现自定义的交互行为和样式效果。
