前端开发高频面试题

 

好的，以下是对您提出的问题的详细回答：

1. 说说vue动态权限绑定渲染列表（权限列表渲染）

Vue中动态权限绑定渲染列表通常涉及以下步骤：

• 首先，通过API请求从服务器获取当前用户的权限数据。
• 在Vue组件中，使用v-if、v-else-if、v-else或v-show等指令，根据用户权限动态显示或隐藏列表中的不同项。
• 可以通过计算属性（computed）或方法来处理权限数据，使其更易于在模板中使用。

示例代码（简化版）：

vue复制代码

	<template>
	<div>
	<ul>
	<li v-if="userHasPermission('admin')">管理员选项</li>
	<li v-else-if="userHasPermission('user')">普通用户选项</li>
	<!-- 更多选项 -->
	</ul>
	</div>
	</template>
	<script>
	export default {
	data() {
	return {
	permissions: [] // 从服务器获取的权限数据
	};
	},
	methods: {
	userHasPermission(permission) {
	// 检查用户是否具有指定权限
	return this.permissions.includes(permission);
	}
	}
	};
	</script>

2.Vue用的哪种设计模式

Vue主要采用了MVVM（Model-View-ViewModel）设计模式。这种设计模式将界面表示层分为模型（Model）、视图（View）和视图模型（ViewModel）三个部分。在Vue中，数据（Model）和DOM（View）之间的交互是通过Vue实例（ViewModel）来完成的。
3. 说说vue操作真实dom性能瓶颈

Vue操作真实DOM的性能瓶颈主要体现在以下几个方面：

• 不必要的DOM操作：过度使用v-if和v-for等指令，可能导致不必要的DOM操作，尤其是在大型列表中。
• 全局搜索：使用全局搜索方法（如document.getElementById）在大型应用中是非常低效的。
• 重排和重绘：直接操作DOM可能导致浏览器的重排和重绘，这是非常昂贵的操作。

为了提高性能，Vue推荐使用数据驱动视图的方式，通过改变数据来自动更新DOM，而不是直接操作DOM。
4. Vue中如何获取dom、操作dom、更新dom

• 获取DOM：使用ref属性给DOM元素添加引用，然后通过this.$refs访问该元素。
• 操作DOM：在Vue中，通常不直接操作DOM，而是通过改变数据来触发视图的更新。但在某些情况下，可以使用原生的DOM API进行操作。
• 更新DOM：通过改变Vue实例中的数据来自动更新DOM。Vue会检测数据的变化，并重新渲染相关的DOM部分。

1. Vue 的双向数据绑定原理是什么

Vue的双向数据绑定原理基于其响应式系统和观察者模式。当Vue实例被创建时，它会将data对象中的属性转换为getter和setter，从而能够追踪每个属性的变化。当数据发生变化时，Vue会触发相应的setter，通知所有依赖这个属性的观察者（Watcher），从而触发视图的更新。同时，当视图发生变化时（如用户输入），Vue也会通过事件监听机制更新数据。
6. mvvm框架是什么

MVVM（Model-View-ViewModel）框架是一种软件架构设计模式，它实现了用户界面与业务逻辑的分离。在这种模式下，Model代表数据模型，View代表用户界面，ViewModel是连接Model和View的桥梁。ViewModel负责将Model的数据转换为View可以展示的格式，并处理用户的输入事件。这种设计模式有助于提高代码的可维护性和可重用性。
7. 谈谈Vue的token存储

在Vue中，token通常用于用户身份验证和授权。token的存储方式有多种，常见的包括：

• localStorage：将数据保存在浏览器本地，没有过期时间。除非手动删除，否则数据会一直存在。
• sessionStorage：与localStorage类似，但数据仅在当前会话中有效，会话结束（通常是浏览器关闭）后数据会被清除。
• Cookies：将数据保存在浏览器中，并随每个请求发送到服务器。可以设置过期时间。
• Vuex或Pinia：如果应用使用了状态管理库（如Vuex或Pinia），也可以将token保存在全局状态中。

选择哪种方式取决于具体的应用需求和安全考虑。
8. 知道nextTick的作用吗，谈谈对它的理解，是什么，怎么用

nextTick是Vue提供的一个方法，用于在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用它，然后等待DOM更新。它常用于需要在DOM更新完成后执行的操作，如获取更新后的DOM元素尺寸

以下是针对您提出的问题的详细回答：

1. nextTick和setTimeout的区别

nextTick 和 setTimeout 在异步环境中的行为有所不同。nextTick 是 Vue.js 提供的一个方法，用于在下次 DOM 更新循环结束之后执行特定的操作。这意味着在 Vue 的数据变化后，使用 nextTick 可以确保在 DOM 更新完成后执行某些操作。而 setTimeout 是 JavaScript 的全局函数，它会在指定的延迟时间后执行代码，并不关心 DOM 的更新状态。

简而言之，nextTick 是为了 Vue 的 DOM 更新而设计的，确保在 DOM 更新后执行操作；而 setTimeout 是一个通用的延迟执行函数，与 DOM 更新无直接关联。

1. Vue中为什么用虚拟DOM而不操作真实DOM

Vue 使用虚拟 DOM（Virtual DOM）的主要原因是为了提高性能和优化渲染过程。直接操作真实 DOM 的性能较低，因为 DOM 的每一次变动都可能触发浏览器的重排（reflow）和重绘（repaint）。通过将 DOM 操作转化为 JavaScript 对象的操作，Vue 可以利用虚拟 DOM 进行比较和差异计算，只更新那些真正发生变化的节点，从而提高页面的渲染效率。此外，虚拟 DOM 还可以实现跨平台的能力，使得 Vue 可以在不同的环境中运行。

1. React中onClick绑定后的工作原理

在 React 中，当给组件（元素）绑定 onClick 事件后，React 会对事件进行注册，并将事件统一注册到 document 上。React 会根据组件唯一的标识（如 key）来对事件函数进行存储。当事件触发时，React 会模拟事件冒泡，找到绑定该事件的组件并执行相应的处理函数。这种机制使得 React 能够抹平不同浏览器之间的兼容性差异，并提供一个抽象的跨平台事件机制。

1. React里面bind与箭头函数

在 React 类组件中，由于 this 的指向问题，通常需要使用 .bind(this) 或箭头函数来确保事件处理函数中的 this 指向组件实例。使用 .bind(this) 可以在构造函数中绑定事件处理函数，而箭头函数则可以直接在类的方法中使用，因为它们会自动绑定到定义它们的上下文（通常是组件实例）。两者都可以达到相同的目的，但箭头函数通常更为简洁。

1. React中的性能优化

React 中的性能优化有多种方式，包括但不限于：

• 使用 React.memo 和 useMemo：缓存组件和计算结果，避免不必要的渲染和计算。
• 避免不必要的渲染：使用 React.PureComponent、shouldComponentUpdate 或 React.memo 来控制组件的渲染。
• 使用列表渲染优化：如 React.Fragment 避免添加额外的 DOM 节点，使用 key 属性优化列表渲染。
• 代码拆分和懒加载：将代码拆分成多个包，按需加载，提高首屏加载速度。
• 使用 Profiler 进行性能分析：React 提供了一个 Profiler 组件和 API，用于分析组件树中的渲染时间和性能瓶颈。

1. React父组件props变化的时候子组件怎么监听

在 React 中，当父组件的 props 发生变化时，子组件可以通过以下方式监听：

• 使用生命周期方法：在类组件中，可以使用 componentDidUpdate 生命周期方法来监听 props 的变化。
• 使用 Hooks：在函数组件中，可以使用 useEffect Hook 来监听 props 的变化。通过比较前后的 props 值，可以判断 props 是否发生了变化。

1. useMemo在React中怎么使用

useMemo 是 React 提供的一个 Hook，用于记忆函数的结果。当依赖项没有发生变化时，它会返回上次计算的结果，从而避免不必要的计算。使用 useMemo 的基本语法如下：

jsx复制代码

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

其中 computeExpensiveValue 是一个计算昂贵的函数，a 和 b 是它的依赖项。只有当 a 或 b 发生变化时，computeExpensiveValue 才会被重新调用并计算新的结果。

1. React Hooks各种函数介绍

React Hooks 提供了一系列函数，用于在函数组件中添加额外的功能，如状态管理、副作用处理、上下文访问等。常用的 Hooks 包括：

• useState：用于在函数组件中添加状态。
• useEffect：用于在函数组件中添加副作用（如数据获取、订阅等）。
• useContext：用于在函数组件中访问 React 上下文。
• useReducer：用于在函数组件中使用 reducer 管理状态。
• useCallback：用于记忆函数，确保在依赖项不变时返回相同的函数实例。
• useMemo：用于记忆函数返回的值。当你有一个需要计算的值，而这个计算非常昂贵（例如，需要遍历大型数组或进行复杂的数学运算），并且这个值只有在依赖项发生变化时才需要重新计算时，useMemo 就非常有用了。