2024前端面试题汇总

1、全局变量与局部变量

• 以下代码输出什么结果？

	for (var i = 0; i < 10; i++) {
	    setTimeout(() => {
	        console.log(index);
	    }, 1000)
	}
	// 答案：1秒后输出 10 个 10
1
2
3
4
5
6

• 如果要正确输出 0 到 9 应该如何修改？

	for (var i = 0; i < 10; i++) {
	    (function(index) {
           setTimeout(() => {
                console.log(index);
            }, 1000)
        })(i)
	}
	// 或
	for (var i = 0; i < 10; i++) {
	    let fn = function(index) {
           setTimeout(() => {
                console.log(index);
            }, 1000)
        }
        fn(i)
	}
	// for循环时 i 赋值给局部变量index， 则其值将不会随着i的变化而变化，立即执行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、Vue3 区分ref 与 reactive 的原因

• 定义数据角度对比：
  ref 用来定义：基本类型数据
  reactive 用来定义：引用类型，例如对象、或数组类型的数据
  备注：ref也可以用来定义对象或数组类型数据，它内部会自动通过 reactive 转为代理对象
             ref.value 返回的是一个 proxy 对象，他是通过代理 reactive 实现的
• 原理角度对比：
  ref 通过 Class 的 get 与 set 来实现响应式的（数据劫持）
  reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过Reflect 操作源对象内部的数据。
• 使用角度对比：
  ref 定义的数据：操作数据需要 .value,读取数据时模版中直接读取不需要 .value
  reactive 定义的数据：操作数据与读取数据，均不需要 .value
  可以得出 data.value.name === obj.name，但是对象更推荐用 reactive 定义，语义化更强

3、关于服务端渲染（SSR）与客户端渲染（CSR）的理解

• 服务器渲染
  后端渲染HTML的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串，这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的（模板引擎），在这种情况下，浏览器只进行了HTML的解析，以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把HTML所代表的图像显示给用户。
• 前端渲染
  简单来说：客户端渲染，就是每个人从服务器获取到的html文件是一样的，再在客户端去通过接口获取数据，拼装成页面展示

4、单页面应用（SPA）与多页面应用（MPA）的优劣

• 单页面应用（SPA）
  概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。
  优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。
  缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。
  (seo优化) 就可以提升搜索时网站靠前
• 多页面应用（MPA）
  概念：整个项目有多个html页面，所有跳转方式都是页面之间相互跳转的。
  优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。
  缺点：页面跳转较慢。

5、Vue2 与 Vue3 的具体区别

• 响应式原理
  vue2的响应式原理的基础是Object.defineProperty，每个数据属性被定义成可观察具有getter和setter方法，当这些属性被修改后，vue会自动追踪并重新计算相关的渲染函数，并更新视图。
  vue3响应式原理基础是使用了ES6中的Proxy代理对象来代替Object.defineProperty（）方法，proxy对象可以拦截对象上的一些操作，从而实现更加灵活的响应式更新。
• diff原理
  vue2 diff算法是通过比较新旧虚拟DOM树来确定必须更新的DOM元素的最小集合
  vue3 diff采用了编译时优化的动态标记，只需要对动态节点进行比较，避免了对静态节点不必要操作，从而提高了性能
  Vue2 Options API （选项式API）存在的问题, 新增或者修改一个需求，就需要分别在data，methods，computed里修改
  Vue3 Componsition API （组合式API） 只需要在特定的代码块新增修改，代码维护性更强开发者可以只需关注实际的业务逻辑
  ref 和 reactive 区别?
  原理：ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
  reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
  ref通常用来定义基本类型数据, reactive用来定义引用类型数据

6、Ts定义变量类型的方法