中级程序员——vue3+js+git面试题

🙂博主：小猫娃来啦
🙂文章核心：vue3+js+git面试题

vue3最大缺点和优点？

vue3组合式里面，如何去调用子组件里面的方法？

watch和watcheffect有什么区别？

计算属性和watch的区别是什么？

计算属性里面的缓存是可以关闭的吗，怎么关闭？

ref和reactive有什么区别？

qref有了解过吗？

深拷贝的浅拷贝的区别？

常用深拷贝的方法？

json.stringify做深拷贝，有什么缺点？

怎么理解声明和提升？

预解析的时候变量提升到最顶端，怎么理解？

面向对象怎么理解？

原型和原型链的理解？

原型链最顶端是什么，最底端是什么？

object和function原型链的关系是什么？

promise和async/await有什么区别？

async/await如何获取到promise的catch？

常用的数组遍历api有哪些？

filter和some的区别是什么？

（filter 主要用于从数组中筛选出符合条件的元素，生成一个新的数组；而 some 主要用于判断数组中是否存在满足条件的元素，返回一个布尔值。两者的主要区别在于其返回值的含义和用途。）

如果现在有一个数组，让你对数组去重，你怎么处理？

比较两个数组的相同和不同，如何处理？

如果两个点，x1y1,x2y2,求两个点的距离，怎么处理，怎么计算？

代码审核的时候，哪些代码会处理一下？

有了解过代码健壮性吗？

git用的工具还是命令?

切换分支用哪个命令？

nexttick的替代方案？

var和let声明的变量，数据存储在哪里？

迭代器 map，foreach，for of。用他们处理数据时，应该怎么选择，使用场景分别是什么？

map可以去重吗？

map 和foreach特征还是比较明显的，有哪些特征？

map，foreach，for of哪个性能会好一些？

es6里的class，它是怎么去继承的？

constructor要继承父类的什么属性吗？通过什么继承的？怎么实现的？

表格里有很多数据，不同的单元格要异步请求根据状态渲染值，会造成高并发问题，作为前端应该如何去优化高并发问题产生的卡顿？

如何通过缓存来优化高并发问题？如果是缓存，怎么去缓存，缓存在哪里？

keep-alive是如何缓存的？

数据变化了，什么时机才能监听到数据变化，怎么监听？

vite实现打包的时候 ，打的包能否动态运行时修改配置？

一套代码，如何部署到多个地方？

你所知道的循环比对，有哪些方法？

some是怎么用的？

every怎么用？

reduce有几个参数？

怎么转换后端要的参数的方式？

如何同时把两条数据的id传到后端，也就是id=2和id=19如何传到后端？是通过数组的形式吗？

如何把表格数据导出excel？

不同的文件通过浏览器识别，有的是展示，有的是下载，为什么表现不一样，浏览器是怎么判断的？靠的是什么属性？

导出Excel时，如何设置这个属性？

单一登录，大概说一下？

事件委托是怎么回事，能说的更细更深点吗？

不借助第三个变量，交换两个变量的值，怎么做？什么是位运算?

数组或对象的遍历有什么方法? 区别是什么？

为什么for循环性能是最好的？什么特定场景下，性能才最好？

有没有用过mixin？代码里面的里一些公共方法，单独封装的组件，是怎么做组件的封装的或者工具的封装？

组件是通过什么方式注册到全局的？怎么在全局不需要import导入就可以使用呢？

高频用的组件，如何在初始化的时候注册进来？这个组件可能在每个页面都要用，应该如何去做？

项目里面有没有初始化加载数据的？

keep-alive用的时候怎么用？都缓存些什么数据？

vue里的storage用过吗？存的时候用set，取得时候不能用get，为什么？

移动端的适配规则？

---

GPT回答：

1. Vue3 最大的优点是性能优化和组合式 API。Vue3 在性能方面做了很多改进，比如使用 Proxy 对象进行响应式数据的追踪，减少了不必要的更新操作。另外，Vue3 引入了组合式 API，使得代码更加模块化和可复用。

   最大的缺点可能是学习成本相对较高，因为 Vue3 在很多方面和 Vue2 有较大的变化，需要重新学习和适应新的 API 和语法。

2. 在 Vue3 组合式 API 中，可以通过 ref 或 reactive 创建子组件的方法并导出，然后在父组件中引入子组件并调用。

3. watch 和 watchEffect 都是用来监听数据变化的。区别在于：

   • watch 需要显式地指定要监听的数据，可以精确控制监听的范围，并提供了更多的选项。
   • watchEffect 则会自动追踪依赖的数据，并在数据变化时执行相应的回调函数。它更适合处理副作用，比如异步请求或者触发其他的操作。

4. 计算属性是基于依赖的数据进行计算，并缓存计算结果。当依赖的数据变化时，计算属性会重新计算。而 watch 则是在特定的数据变化时执行回调函数，并可以处理更复杂的逻辑。

5. 计算属性的缓存是默认开启的，不过你可以通过将计算属性声明为一个普通的函数来关闭缓存功能。

6. ref 是用来创建一个响应式的数据对象，它返回一个包含响应式数据的引用。而 reactive 则是用来创建一个响应式的数据对象，它返回一个包含多个属性的响应式对象。

7. qref 不是 Vue3 提供的 API，可能是你的笔误。

8. 浅拷贝和深拷贝的区别在于拷贝的程度。浅拷贝只复制对象的引用，而不复制对象本身。深拷贝则是创建一个新对象，并递归地复制原始对象及其所有子对象。

9. 常用的深拷贝方法有：

   • 使用 JSON.stringify 和 JSON.parse：这种方法可以将对象转换成字符串，再将字符串转换回对象，实现深拷贝。但是它无法拷贝函数和特殊对象。
   • 使用递归方式手动复制对象：通过遍历对象的属性，递归地复制每个属性，包括嵌套的对象和数组。

10. 使用 JSON.stringify 进行深拷贝的缺点是，它无法拷贝函数和特殊对象（比如正则表达式、日期对象等），并且遇到循环引用时会报错。

11. 在 JavaScript 中，声明提升是指变量和函数的声明会在代码执行之前被提升到作用域的顶部。这意味着你可以在声明之前使用变量和函数，而不会报错。

12. 在预解析阶段，变量的声明会被提升到作用域的顶部，但是初始化的赋值不会被提升。所以在声明之前使用变量时，它的值为 undefined。

13. 面向对象是一种编程范式，它将程序看作是一组对象的集合，每个对象都可以接收消息、处理数据，并与其他对象进行交互。面向对象编程的核心概念包括封装、继承和多态。

14. 原型是 JavaScript 对象的一个内置属性，它指向另一个对象，用于实现对象之间的继承关系。原型链是多个对象通过原型链接起来的一种结构，使得对象可以共享属性和方法。

15. 原型链的最顶端是 Object.prototype，最底端是 null。所有的对象都直接或间接地继承自 Object.prototype。

16. object 是所有对象的基类，而 function 是 object 的一个子类。通过 __proto__ 属性，函数对象可以访问到 Function.prototype，而 Function.prototype 又继承自 Object.prototype。

17. Promise 是一种处理异步操作的方式，它可以更好地组织和管理异步代码。而 async/await 是基于 Promise 的语法糖，使得异步代码的编写更加简洁明了。

18. 使用 async/await 获取 Promise 的 catch 可以通过 try/catch 块来实现。在 async 函数内部，可以使用 try/catch 来捕获 Promise 的错误。

19. 常用的数组遍历 API 有：

    • forEach：遍历数组的每个元素，并对每个元素执行回调函数。
    • map：遍历数组的每个元素，并根据回调函数的返回值创建一个新数组。
    • filter：遍历数组的每个元素，并根据回调函数的返回值过滤出符合条件的元素。
    • some：遍历数组的每个元素，并根据回调函数的返回值判断是否存在符合条件的元素。

20. filter 和 some 的区别是：

    • filter 返回一个包含符合条件的元素的新数组。
    • some 返回一个布尔值，表示数组中是否存在符合条件的元素。

21. 对数组去重可以使用 Set 数据结构或者利用对象的属性唯一性进行去重。

22. 比较两个数组的相同和不同，可以使用循环遍历的方式，逐个比较数组中的元素，并根据需要进行处理。

23. 两个点的坐标为 (x1, y1) 和 (x2, y2)，可以使用勾股定理计算两点之间的距离：distance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)。

24. 在代码审核过程中，需要重点关注以下几个方面：

    • 可读性：代码是否易于理解和维护。
    • 安全性：代码是否存在潜在的安全漏洞。
    • 性能：代码是否高效，是否存在性能瓶颈。
    • 规范性：代码是否符合编码规范和最佳实践。

25. 代码的健壮性指的是代码的稳定性和可靠性。健壮的代码应该能够处理各种异常情况，并且在出错时能够正确地进行错误处理。

26. Git 可以通过命令行工具或者图形化界面来使用，具体使用哪种方式取决于个人的习惯和需求。切换分支可以使用 git checkout 命令。

27. 在 Vue3 中，nextTick 的替代方案是使用 queueMicrotask 函数。它可以在下一个微任务时执行回调函数，实现类似的效果。

28. var 声明的变量存储在函数作用域或全局作用域中。而 let 声明的变量存储在块级作用域中。

29. 迭代器是一种对象，它提供了一种统一的方式来遍历容器中的元素。map、forEach 和 for...of 都是用来遍历数据的方法，选择使用哪种方法取决于具体的需求和使用场景。

• map：将原数组中的每个元素映射为一个新的元素，并返回一个新的数组。
• forEach：对原数组中的每个元素执行回调函数，没有返回值。
• for...of：以迭代的方式遍历数组或类数组对象，可以使用 break 和 continue 控制循环的流程。

1. map 方法不能直接去重，它只是根据回调函数的返回值创建一个新的数组。如果需要去重，可以借助 Set 数据结构或者其他方法来实现。

2. map、forEach 和 for...of 三者之间的特征有：

• map：返回一个新数组，长度与原数组相等。
• forEach：没有返回值，只是对原数组进行遍历操作。
• for...of：以迭代的方式遍历数组或类数组对象。

1. for...of 的性能相对较好，因为它是基于迭代器的方式进行遍历，不会创建新的数组或执行额外的操作。

2. 在 ES6 中，使用 class 关键字可以定义一个类，并通过 extends 关键字实现继承。

3. 子类的构造函数需要通过 super 关键字调用父类的构造函数，并且在子类的构造函数中使用 super 之前不能使用 this 关键字。

4. 如果大量的异步请求导致高并发问题和卡顿，可以采取以下优化措施：

• 使用节流或者防抖来限制请求的频率。
• 合并多个请求，减少请求次数。
• 使用分页加载或者懒加载，减少一次性获取大量数据。
• 在前端实现局部缓存，减少不必要的重复请求。

1. 通过缓存来优化高并发问题可以将请求结果缓存在内存或者本地存储中，避免重复的网络请求。缓存可以存储在客户端的内存、浏览器的本地存储（如 localStorage）或者服务器端的缓存中，具体需要根据实际场景来选择合适的缓存策略。

2. keep-alive 是 Vue 中的一个组件，用于缓存动态组件或者路由组件，以便在组件切换时保留组件的状态或避免重复渲染。它可以通过设置 include 和 exclude 属性来控制哪些组件需要被缓存。

当然，我来继续回答你的问题：

1. 要监听数据变化，可以使用 Vue3 提供的响应式 API，比如 watch、watchEffect 或者计算属性。这些 API 可以帮助你实时地监听数据的变化，并在数据变化时执行相应的操作。

2. 在 Vue3 中，template 标签是用来定义模板的，它可以包含 Vue 模板语法，用于生成最终的 DOM 结构。而 render 函数则是一种用 JavaScript 来描述 DOM 结构的方式，可以更加灵活地控制 DOM 的生成过程。

3. 在 Vue3 中，provide 和 inject 是用来实现跨层级组件之间数据传递的。通过 provide 提供数据，然后在子组件中使用 inject 来注入相应的数据。

4. 在 Vue3 中，setup 函数是用来替代 Vue2 中的 data、methods 等选项的。setup 函数接收两个参数，一个是 props，用于接收父组件传递的数据；另一个是 context，用于访问组件实例的属性和方法。

5. TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查的功能，并且支持 ECMAScript 6 及以上的语法。使用 TypeScript 可以帮助你在开发过程中发现潜在的错误，并提高代码的可维护性和可读性。

6. 在 Vue3 中使用 TypeScript 可以通过为 .vue 文件添加 <script lang="ts"> 标签，并在 setup 函数中显式声明 props 的类型。

7. 在 Vue3 中，可以通过 v-model 指令来实现双向数据绑定。v-model 通常用于表单元素，比如输入框、复选框等，可以方便地将输入的值与数据进行双向绑定。

8. Vuex 是 Vue.js 的状态管理库，用于集中管理应用的所有组件的状态。可以通过 Vuex 实现数据在各个组件之间的共享和管理，并且提供了一套规范的状态管理方案。

9. 在 Vuex 中，可以通过 state 属性来定义应用的状态，通过 mutations 属性来定义修改状态的方法，通过 actions 属性来定义异步操作，以及通过 getters 属性来定义派生状态。

10. 在 Vue3 中，如果需要使用 Vuex，可以通过 createStore 函数来创建一个 Vuex 的 store，并在根组件中使用 provide 来提供该 store，然后在子组件中使用 inject 来注入该 store。

---

关注我，后续会持续更新

---