前端 vue 面试题 (一)-编程知识

文章目录

- v-if,v-show差别
- v-for和v-if
- 虚拟dom解决什么问题
- vue的data为什么返回函数不返回对象
- 比较vue，react
- vue双向绑定原理
- vue虚拟dom 的diff算法
- vue 虚拟dom的diff算法的时间复杂度
- vue2与vue3的区别
- vue数据缓存，避免重复计算
- 单页应用怎么跨页面传参
- vue中key的作用

v-if,v-show差别

v-if 和 v-show 是 Vue.js 中用于条件性渲染的两个指令，它们有一些重要的区别。

初始化渲染时的差别:

v-if：只有在表达式为真时才会渲染元素，否则元素不会存在于 DOM 中。
v-show：元素总是会被渲染，只是通过 CSS 控制其显示或隐藏。

性能差别:
v-if：当条件为假时，DOM 元素会被销毁，再次为真时重新创建。因此，在条件频繁切换时，可能会有一些性能开销。
v-show：无论条件是真还是假，DOM 元素总是保持在 DOM 树中，只是通过 CSS 的 display 属性来控制显示或隐藏。在条件频繁切换时，相对而言性能开销较小。
适用场景:

v-if：适用于在运行时很少改变条件的情况，因为它有一些 DOM 操作的开销，适合在条件切换不频繁的场景。
v-show：适用于需要频繁切换条件，并且元素的初始化渲染开销较小的情况。

v-for和v-if

如果是vue2 ，当v-for和v-if同时出现在同一个标签上，v-for的优先级高于v-if，每次循环都会进行v-if的判断，开销较大。
如果是vue3，当v-for和v-if同时出现在同一个标签上，v-if的优先级高于v-for。

虚拟dom解决什么问题

提高性能：
减少直接操作真实DOM的开销：直接对真实DOM进行频繁的操作可能会导致页面性能问题，因为DOM操作是相对昂贵的。虚拟DOM允许框架在内存中构建一个虚拟的DOM树，通过对虚拟DOM进行操作，减少对真实DOM的直接操作次数。

批量更新：虚拟DOM可以进行批量的、异步的DOM更新，而不是每次数据变化都立即操作真实DOM。通过在内部进行批处理，减少了大量中间状态的计算和重绘，提高了性能。

Diff算法：虚拟DOM 本身就是一个复杂的对象，核心是实现了一套高效的Diff算法，可以在前后两个虚拟DOM树之间进行比较，比较的是两个对象的差异，不是比较真是的dom是否相同。找出最小的变更，并将这些变更应用到真实DOM上。这种策略避免了全量的DOM操作，提高了性能。

vue的data为什么返回函数不返回对象

当你将 data 定义为一个普通对象时，这个对象会在组件间共享。如果多个组件使用相同的对象引用，它们将共享相同的状态，这可能导致不可预测的行为，特别是在涉及到响应式数据和状态管理时。

通过返回一个函数，Vue.js 可以为每个组件实例创建一个独立的数据对象，确保它们之间的状态不会相互干扰。这种做法也符合 Vue.js 的响应式数据系统的设计，使得当数据发生变化时，相关的组件可以正确地进行更新。

比较vue，react

Vue.js和React.js都是流行的JavaScript库，用于构建用户界面，但它们有一些关键的区别。以下是一些Vue.js和React.js之间的主要区别：

设计和理念:
- Vue.js： 设计简单、灵活，更容易上手。Vue强调渐进式框架，可以逐步地应用到项目中。
- React.js： 设计更加灵活且功能强大，但可能对初学者有一定的学习曲线。React注重构建可复用的组件。
模板语法和 JSX:
- Vue.js： 使用基于HTML的模板语法，将模板直接写在HTML中。
- React.js： 使用JSX（JavaScript XML），这是一种在JavaScript中嵌套XML标签的语法。JSX允许在JavaScript代码中直接编写类似XML的结构。
组件通信:
- Vue.js： 支持父子组件通信、兄弟组件通信、以及通过事件总线或Vuex（状态管理库）进行跨组件通信。
- React.js： 父子组件通信通过props，而跨组件通信通常需要通过提升状态（lifting state up）或使用全局状态管理库，如Redux。
状态管理:
- Vue.js： 包含了Vuex，一个专门用于状态管理的库。Vuex提供了一种集中式管理状态的方式。
- React.js： 可以使用Context API来进行状态管理，但更常见的是使用独立的状态管理库，如Redux。
生命周期:
- Vue.js： 拥有明确的生命周期钩子，例如beforeCreate、created、mounted等。
- React.js： 也有生命周期方法，包括componentDidMount、componentWillUnmount等。
指令和特性:
- Vue.js： 提供了丰富的指令，如v-if、v-for、v-bind等，用于操作DOM。
- React.js： 使用属性（props）和状态（state）来管理组件的渲染和行为。
学习曲线:
- Vue.js： 相对较低的学习曲线，尤其适合初学者。
- React.js： 初始学习曲线可能较陡峭，但一旦掌握了基本概念，会变得更容易。
社区和生态系统:
- Vue.js： 在中国社区有较大影响力，生态系统不如React庞大，但在一些场景中更受欢迎。
- React.js： 拥有庞大的社区和生态系统，广泛应用于大型项目和企业级应用。

vue双向绑定原理

在这里插入图片描述

Vue的双向数据绑定是通过其响应式系统来实现的。Vue使用了一种称为"响应式数据绑定"的机制，该机制基于ES5的Object.defineProperty，以及ES6的Proxy来实现。下面是Vue双向绑定的基本原理：

数据劫持： Vue会对数据对象进行递归遍历，对对象的每个属性都使用Object.defineProperty或Proxy进行劫持。这样，当访问或修改对象的属性时，Vue就能够截获这个操作，进行相应的处理。
创建Watcher： Vue会为模板中使用到的每个数据属性创建一个Watcher对象。Watcher对象会订阅数据对象的变化，在数据变化时负责更新视图。
模板编译： Vue会将模板编译成渲染函数，渲染函数中包含了对数据的访问，这些访问触发了数据的get操作，从而建立了依赖关系。
触发更新： 当数据发生变化时，通过set方法通知相关Watcher对象，Watcher对象再调用渲染函数，最终更新视图。
双向绑定： 对于表单元素（例如<input>、<textarea>、<select>等），Vue通过v-model指令实现双向绑定。在表单元素上使用v-model时，实际上是通过给元素绑定input事件，从而在数据发生变化时更新视图，同时也监听了用户的输入，当用户输入时更新数据。

综合以上步骤，整个双向绑定的过程可以描述为：数据劫持 -> 创建Watcher -> 模板编译 -> 触发更新 -> 双向绑定。

值得注意的是，Vue 3 中引入了Proxy作为数据劫持的替代方案，Proxy相比Object.defineProperty更灵活，但需要注意兼容性问题。Vue 2.x版本仍然使用Object.defineProperty。

参考阅读如何理解vue数据双向绑定原理

vue虚拟dom 的diff算法

首先说明虚拟dom的比较是当前有数据更新而触发的，所以比较的虚拟dom不是整个vue实例的虚拟dom，而是被改变数据所触发的那一小块儿虚拟dom。

Vue使用的虚拟DOM的Diff算法主要参考了React的算法思想，它的Diff算法主要包含以下步骤：

生成新旧虚拟DOM树： 首先，通过模板或者动态数据生成新的虚拟DOM树，同时通过之前的虚拟DOM树或者直接生成HTML生成旧的虚拟DOM树。
进行深度优先遍历： 递归地对新旧虚拟DOM树进行深度优先遍历，比较同一层级的节点。
节点的比较策略： 在比较同一层级的节点时，Vue的Diff算法采用了一些启发式的策略，主要包括以下几点：
- 节点类型相同： 如果新旧节点的类型相同，继续比较其子节点。
- 节点类型不同： 如果新旧节点的类型不同，直接将旧节点替换为新节点，不再深度比较其子节点。
- 节点的key： 如果节点类型相同，Vue会通过节点的key来判断该节点在新旧虚拟DOM树中的位置关系，从而尽量复用已有的节点，减少重新渲染的开销。
差异的处理： 在进行比较后，Diff算法会得出新旧节点的差异，然后根据这些差异进行相应的DOM操作，以更新视图。这些差异主要包括：
- 替换节点： 直接替换旧节点为新节点。
- 更新属性： 更新节点的属性，例如节点的文本内容、样式、事件等。
- 移动节点： 如果新旧节点的位置关系发生了变化，可能需要进行节点的移动操作，而不是删除和添加。
- 删除节点： 如果在新虚拟DOM树中没有对应的节点，需要将旧节点删除。
- 插入节点： 如果在旧虚拟DOM树中没有对应的节点，需要将新节点插入到对应的位置。

这个Diff算法的实现使得在更新视图时，尽量减少了对真实DOM的直接操作，提高了性能。在Vue中，这一Diff算法是在虚拟DOM的基础上实现的，通过比较虚拟DOM树而非直接操作真实DOM，从而更高效地更新视图。当然，这只是Diff算法的一种实现方式，不同的框架可能会有不同的优化和策略。

vue 虚拟dom的diff算法的时间复杂度

Vue的虚拟DOM的Diff算法时间复杂度是O(n)，其中n是树中节点的数量。这是因为Vue的Diff算法采用了一种基于深度优先遍历的策略，在同一层级上节点的比较是线性的。

具体来说，Diff算法会对新旧虚拟DOM树进行深度优先遍历，比较同一层级上的节点。在节点比较的过程中，如果节点类型不同或者节点的key不同，就会立即中断对该节点的比较，不再深入遍历其子节点。这种策略保证了在同一层级上的节点比较的复杂度是线性的。

如果节点类型相同且有相同的key，Diff算法会继续深度比较子节点。在这个过程中，可能会出现最坏情况下需要遍历整个树的情况，但由于DOM树的深度通常是有限的，因此整体的时间复杂度是O(n)。

需要注意的是，Vue的Diff算法的效率还受到一些优化措施的影响，例如在列表渲染中使用了“双端比较”和“同级别比较”的策略，以及通过使用节点的key来优化节点的复用等。这些优化措施有助于降低实际的比较操作次数，提高Diff算法的性能。

vue2与vue3的区别

Vue 3 是 Vue.js 的下一代版本，与 Vue 2 相比有许多改进和新增的特性。以下是 Vue 2 和 Vue 3 之间的一些主要区别：

性能提升： Vue 3 在底层的响应式系统和虚拟 DOM 的实现上进行了重大优化，提升了性能。新的编译器和渲染器的设计也有助于更高效的渲染。
Composition API： Vue 3 引入了 Composition API，这是一个基于函数的 API，允许开发者更灵活地组织和重用组件逻辑。与 Vue 2 的选项式 API 相比，Composition API 更易于阅读和维护。
Teleport（传送门）： Vue 3 引入了 Teleport 特性，使得在组件中的任何位置渲染内容成为可能。这对于在应用中的任何位置渲染弹出窗口、对话框等组件非常有用。
Fragments（片段）： Vue 3 支持片段，允许在模板中返回多个根节点，而不再需要一个外部的包裹元素。
多个根组件： Vue 3 允许多个根组件存在于同一个应用中，而 Vue 2 中一个应用只能有一个根组件。
新的钩子函数： Vue 3 引入了一些新的生命周期钩子函数，例如 Unmounted 替代了 destroyed，beforeUnmount 替代了 beforeDestroy。
全局 API 的修改： Vue 3 对全局 API 进行了修改，例如 Vue.extend 变为 defineComponent，Vue.directive 变为 app.directive 等。
更好的 TypeScript 支持： Vue 3 对 TypeScript 的支持更为友好，提供了更准确的类型定义，使得在使用 TypeScript 时的开发体验更好。
Tree-shaking 支持： Vue 3 的代码结构更加模块化，支持更好的 Tree-shaking，使得在构建时能够更轻松地剔除未使用的代码。
更好的递归组件支持： Vue 3 改进了对递归组件的支持，现在更容易处理。

需要注意的是，虽然 Vue 3 带来了许多改进，但在升级到 Vue 3 之前，开发者应该考虑到一些迁移的成本，因为一些 API 的变化可能需要修改现有的代码。 Vue 3 的文档提供了详细的迁移指南，可以帮助开发者更顺利地迁移到新版本。

vue数据缓存，避免重复计算

使用 computed来进行数据清理和计算，可以保证数据在变量未变化的情况下，不会再次计算，因为computed与watch相比，能够在初次计算后，将结果缓存起来，下次如果依赖值不发生变化，就不重复计算。

单页应用怎么跨页面传参

单页应用（Single Page Application，SPA）是指一种Web应用程序，它在加载时只加载单个HTML页面，并通过JavaScript等技术在用户与应用程序交互时更新该页面，而不需要重新加载整个页面。在单页应用中，我们通常需要在不同页面之间传递参数，可以通过以下几种方式来实现跨页面传参：

URL参数传递：可以通过在URL中添加参数的方式来实现页面间传递数据。例如：/page?id=123&name=xxx，在目标页面可以通过 $ro u t er . q u ery . i d /$ router.query.name来获取参数。

localStorage/sessionStorage：可以将需要传递的数据存储在localStorage/sessionStorage中，在目标页面再次读取该数据。

Vuex：Vuex是Vue.js的状态管理库，可以在不同的组件中共享数据。可以将需要传递的数据存储在Vuex中，在目标页面中再次读取该数据。

EventBus：EventBus是Vue.js的一个事件管理库，可以在不同的组件中广播和监听事件。可以通过EventBus在不同页面之间传递数据。

PostMessage：可以通过window.postMessage()方法向另一个页面发送消息，目标页面再通过window.addEventListener()监听message事件来获取传递过来的数据。