前端JS常见面试题

数据双向绑定

Bug解决

集成工作涉及

版本node

依赖包报错

版本问题！！！ElementUI、Cesium、ant-design

配置、代码和其他

混入

在Vue中，混入（Mixins）是一种非常有用的功能，它允许你创建可复用的功能。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混入”该组件本身的选项。

混入的基本使用

定义混入：首先，你需要定义一个混入对象。这个对象可以包含任何组件选项。

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

使用混入：然后，你可以在组件中通过mixins选项来使用这个混入。

// 定义一个使用混入的组件  
Vue.component('my-component', {  
  mixins: [myMixin],  
  created() {  
    console.log('component created!');  
  }  
})

在这个例子中，当my-component组件被创建时，它首先会调用myMixin中的created钩子，然后调用它自己的created钩子。同时，my-component也继承了myMixin中的hello方法，可以在组件的其它部分调用这个方法。

注意事项

选项合并：当组件和混入对象含有同名选项时，这些选项将以一定方式被合并。对于生命周期钩子，混入对象的钩子将在组件自身的钩子之前调用。对于值为对象的选项，如methods、components和directives，混入对象的选项将被合并到组件的选项中，如果两个对象有相同的键名，则组件的选项会覆盖混入对象的选项。
全局混入：Vue.mixin() 允许你注册一个混入，影响之后创建的每一个Vue实例。请谨慎使用全局混入，因为它会影响每一个之后创建的组件实例（包括第三方组件库）。
合并策略：Vue为不同类型的选项定义了不同的合并策略。例如，data选项在合并时会进行递归合并，而methods、components和directives等选项则是简单地合并到一个对象中。
使用场景：混入非常适合为Vue组件添加跨组件逻辑。然而，滥用混入可能会导致组件间的依赖关系变得难以追踪，特别是在大型项目中。因此，建议仅在确实需要跨组件共享逻辑时使用混入。

keep-alive与动态组件（缓存组件）

在Vue.js中，<keep-alive> 是一个内置的抽象组件，用于缓存不活动的组件实例，而不是销毁它们。这样做可以保留组件状态或避免重新渲染，从而提高性能，尤其是在处理动态组件或组件频繁切换的场景下。Vue 2 和 Vue 3 都支持 <keep-alive>，但它们在细节和性能优化上有所不同。

Vue 2 中的 `<keep-alive>`

在Vue 2中，<keep-alive> 通常包裹在动态组件 <component> 或 <router-view> 周围，以便缓存这些组件。你可以通过 include 和 exclude 属性来指定哪些组件需要被缓存。

<keep-alive :include="['ComponentA', 'ComponentB']">  
  <component :is="currentView"></component>  
</keep-alive>  
  
<!-- 或者用于路由视图 -->  
<keep-alive>  
  <router-view></router-view>  
</keep-alive>

Vue 2 的 <keep-alive> 还支持一个 max 属性，用于指定缓存组件的最大数量，一旦这个数量被超过，最老的组件实例将被销毁。

包裹动态组件

<template>  
  <keep-alive :include="['ComponentA', 'ComponentB']">  
    <component :is="currentComponent"></component>  
  </keep-alive>  
</template>  
  
<script>  
import ComponentA from './ComponentA.vue';  
import ComponentB from './ComponentB.vue';  
  
export default {  
  components: {  
    ComponentA,  
    ComponentB,  
    // 如果currentComponent不是直接引入的组件，需要注册在components中  
  },  
  data() {  
    return {  
      currentComponent: 'ComponentA',  
    };  
  },  
};  
</script>

包裹路由视图

<template>  
  <keep-alive>  
    <router-view></router-view>  
  </keep-alive>  
</template>  
  
<script>  
// 无需特别脚本，Vue Router会处理路由的切换  
</script>

使用include和exclude属性

<template>  
  <keep-alive :include="['ComponentA', 'ComponentC']">  
    <component :is="currentComponent"></component>  
  </keep-alive>  
</template>  
  
<script>  
// 假设你有ComponentA, ComponentB, ComponentC等组件  
// 这里只缓存ComponentA和ComponentC  
</script>

Vue 3 中的 `<keep-alive>`

Vue 3 保留了 <keep-alive> 的基本用法和功能，但做了一些改进和性能优化。与Vue 2相比，Vue 3的 <keep-alive> 在处理组件缓存时更加高效，尤其是在组件树重建时。

Vue 3 的 <keep-alive> 同样支持 include、exclude 和 max 属性，用法与Vue 2相同。但是，Vue 3的响应式系统和组合式API（Composition API）为 <keep-alive> 提供了更多的灵活性和控制力。

例如，在Vue 3中，你可以结合使用 <keep-alive> 和 <teleport> 来将缓存的组件移动到DOM的不同位置，或者利用Composition API中的响应式状态来控制缓存的行为。

性能优化

Vue 3 在多个方面对 <keep-alive> 进行了性能优化，包括更快的组件实例化、更好的内存管理和更智能的缓存策略。这些优化使得在Vue 3中使用 <keep-alive> 时，能够更高效地处理大量组件的缓存和复用。

Vuex与Pinia

Vue的状态管理——Vuex3&4&Pinia-CSDN博客

防止恶意登录

SQL注入、XSS攻击

XSS攻击-CSDN博客

WebSocket

聊天室，应用

轮询

Set与Map

Set

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。它有以下特点：

唯一性：Set 中的元素是唯一的，不会出现重复的值。
无序性：Set 中的元素没有特定的顺序，你无法通过索引来访问 Set 中的元素。

使用场景

去重：这是 Set 最直接和常用的功能。你可以通过将一个数组转换为 Set 来快速去除其中的重复元素。

const array = [1, 2, 2, 3, 4, 4, 5];  
const uniqueArray = [...new Set(array)];  
console.log(uniqueArray); // [1, 2, 3, 4, 5]

对象集合：当需要存储不重复的对象时，Set 可以作为一个有效的集合来使用。不过需要注意的是，即使对象的内容相同，但如果它们是不同的对象实例，也会被 Set 视为不同的元素。
交集、并集、差集操作：利用 Set 提供的 add、delete、has 等方法，可以方便地进行集合操作。

Map

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。

键值对：Map 中的每个元素都是一个键值对。
有序性：Map 记住了元素的插入顺序，因此你可以通过迭代来按顺序访问其中的元素。
键的唯一性：Map 中的键是唯一的。

使用场景

需要记住元素插入顺序的场景：当你想根据元素的插入顺序来访问它们时，Map 是一个很好的选择。
键是复杂数据类型的场景：与对象不同，Map 的键可以是任何数据类型，包括函数、对象或任何原始值。这意味着，如果键是对象，则只要两个键对象引用的是同一个对象，Map 就会将它们视为相同的键。
性能敏感的场景：在一些情况下，当你需要频繁地访问数据并且性能是关键考虑因素时，Map 可能比对象更高效，特别是在涉及到复杂键时。
数据映射：当你想实现数据之间的映射关系时，Map 提供了一个直观且方便的方式来存储和访问这些数据。

JS多线程

Web Workers 是 JavaScript 的一种机制，它允许你在与主线程（通常是UI线程）分离的后台线程中运行脚本。这样做的好处是，你可以执行耗时的计算或操作而不会阻塞用户界面。这对于需要处理大量数据或复杂计算的Web应用尤其有用。

基本概念

主线程：负责执行脚本、处理事件、渲染UI等。
Worker 线程：运行在后台的脚本，不会干扰主线程的UI渲染。
消息传递：主线程和 Worker 线程之间通过传递消息来通信，而不是直接共享内存。

如何使用 Web Workers

1. 创建一个 Worker

首先，你需要创建一个指向 Worker 脚本的 URL。这个脚本会在 Worker 线程中运行。

const myWorker = new Worker('worker.js');

2. 监听 Worker 的消息

你可以在主线程中监听来自 Worker 的消息。

myWorker.onmessage = function(e) {

console.log('Received message from worker:', e.data);

};

3. 向 Worker 发送消息

你可以使用 postMessage() 方法向 Worker 发送消息。

myWorker.postMessage('Hello Worker!');

4. Worker 脚本

在 worker.js 文件中，你可以使用 self（等同于 Worker 线程的全局对象）来接收消息并发送响应。

self.onmessage = function(e) {  
    console.log('Message received from main script', e.data);  
      
    // 处理数据  
    const result = e.data.toUpperCase();  
      
    // 将结果发送回主线程  
    self.postMessage(result);  
};

5. 错误处理

监听 Worker 线程中的错误。

myWorker.onerror = function(error) {  
    console.error('Worker error:', error);  
};

6. 终止 Worker

当不再需要 Worker 时，你可以调用 terminate() 方法来停止它。

myWorker.terminate();

进阶使用

多个 Worker：你可以创建多个 Worker 来并行处理任务。
数据共享：虽然 Worker 之间不能直接共享内存，但可以使用 postMessage() 传递数据，或使用 SharedArrayBuffer 和 Atomics（在支持的环境下）来在 Worker 之间共享和同步数据。
Worker 之间的通信：Worker 之间不能直接通信，但可以通过主线程作为中介来间接通信。
模块化 Worker：在 Worker 脚本中使用 ES6 模块，可以更好地组织代码和重用功能。