1.let,var,const区别
1.作用域:
·var:var声明的变量存在函数作用域或全局作用域,这意味着它们在声明它们的函数内部可见,而不在块级作用域内可见。
·let和const:let和const声明的变量存在块级作用域,这意味着它们在声明的块内可见,例如,if语句、循环或花括号内的代码块。
2.变量提升:
·var:var声明的变量会被提升到它们所在作用域的顶部,但初始化的值不会提升。
·let和const:let和const声明的变量也会被提升,但它们不会被初始化。这意味着在声明之前访问 它们会导致暂时性死区(Temporal Dead Zone,TDZ)错误。
3.可变性:
·var:var声明的变量可以被多次赋值,并且可以在同一作用域内重复声明。
·let:let声明的变量可以被多次赋值,但不允许在同一作用域内重复声明。
·const:const声明的变量必须被初始化,并且不能被重新赋值,但对象和数组等复杂类型的内容可以被修改
4.全局对象属性:
·var声明的变量会成为全局对象的属性(在浏览器环境中通常是 window 对象)。
·let和const不会成为全局对象的属性。
5.适用场景:
·var在ES6之前是唯一的声明关键字,但由于它的一些问题,现在通常不推荐使用。
·let通常用于需要重新赋值的变量。
·const通常用于不需要重新赋值的常量。
2.map和foreach区别
-
返回值:map操作会返回一个新的集合,该集合包含了原始集合中每个元素经过指定函数处理后的结果;而foreach操作没有返回值,它仅对原始集合中的每个元素执行指定的操作,不会生成新的集合。
-
函数作用:map通常需要一个函数作为参数,这个函数定义了如何将原始集合中的每个元素转换为新元素;foreach同样需要一个函数,但这个函数用于指定对每个元素执行的操作,这些操作不一定会产生新的结果。
-
数据不变性:map操作不会改变原始集合中的数据,它创建了一个新的集合来存储转换后的结果;foreach操作可能会改变原始集合中的元素,因为它直接在原始元素上执行操作。
-
用途:map常用于需要根据现有数据生成新数据的场景,如数据转换、计算等;foreach则适用于需要对每个元素执行某些操作,而这些操作不需要返回值的场景,如打印日志、更新状态等。
-
性能考虑:由于map会创建一个新的集合,因此在处理大量数据时可能会占用更多的内存;foreach则直接在原始集合上操作,不需要额外的内存空间。
3.v-model组成
v-model本质上是一个语法糖,它是v-bind和v-on的组合。具体来说,v-model通过v-bind绑定一个value属性,并通过v-on指令监听input事件来实现数据的双向绑定。
4.vue中的data为什么是函数
Vue中的data是函数的主要原因是为了确保每个组件实例都有独立的数据作用域,避免数据污染和状态共享问题。
1.数据隔离:当data是一个函数时,每次创建组件实例时都会调用这个函数,返回一个新的数据对象。这样,每个组件实例都有自己的数据对象,互不干扰。如果data是一个对象,所有的组件实例将共享同一个数据对象,导致数据污染和状态共享问题12。
2.避免共享状态:如果data是一个对象,当一个组件实例修改了数据,其他所有实例的数据也会被修改。这通常是不希望的,因为不同的组件实例通常需要有不同的状态。通过将data定义为一个函数,每个组件实例都有自己的数据对象,避免了状态的共享2。
3.支持组件复用:Vue中的组件是可复用的UI构建块。通过将data定义为一个函数,每个组件实例在创建时都会生成一个新的数据对象,这使得组件的复用更加安全和可靠。每个组件实例都有独立的数据,不会受到其他实例的影响
5.es6新增的两个set和map
Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。
Map 对象保存键值对,并且能记住键的原始插入顺序。
6.vue中数据更新了视图没更新的解决办法
1.使用watch监听对象属性变化
2.使用this.$set()强制更新响应式变量
3.使用this.$forceUpdate()强制性重新渲染
7.react中的hook
react hook是react 16.8推出的方法,能够让函数式组件像类式组件一样拥有state、ref、生命周期等属性
8.for函数和foreach区别
1.适用对象: for循环适用于任何需要重复执行指定次数的情况,而foreach循环专门用于遍历集合类型的数据,更加简洁易读。
2.循环变量: for循环需要在外部显式声明循环变量,并在循环体内进行更新操作。而foreach循环则不需要显式声明循环变量,直接将集合中的元素赋值给一个临时变量。
3.索引访问: for循环可以通过索引访问数组或列表中的元素,因为循环变量i可以作为索引。而foreach循环只能逐个访问集合中的元素,不能直接获取索引。
4.遍历方式: for循环可以根据需要自由设置循环条件和迭代步长,可以实现倒序遍历等复杂遍历方式。而foreach循环只能顺序遍历集合中的元素。
9.ts的数据类型
1.基本数据类型:
number:用于表示数值类型,包括整数和浮点数。例如:let num: number = 123。
string:用于表示文本数据。例如:let str: string = 'abc'。
boolean:表示逻辑值,只有 true 和 false。例如:let isDone: boolean = false。
null 和 undefined:表示空值。null 和 undefined 是所有类型的子类型,但使用严格空检查可以避免意外的空值。
symbol:表示唯一标识符,通常用于对象属性的键。
2.复合数据类型:
Array:表示数组类型,可以包含多个相同类型或不同类型的元素。例如:let arr: number[] = 。
Tuple:表示元组类型,可以定义具有固定数量和类型的元素的数组。例如:let tuple: [string, number] = ['abc', 123]。
Object:表示对象类型,可以包含多个键值对。例如:let obj: object = {name: 'abc'}。
Function:表示函数类型,包括函数的参数类型和返回值类型。
3.特殊数据类型:
any:可以代表任何类型,但过度使用会削弱TypeScript的类型安全特性。例如:let anyVar: any = 'hello'。
void:用于标识没有返回值的函数。例如:function sayHello(): void { console.log('Hello'); }。
never:表示那些永不会达到终点的代码,例如无限循环的函数。例如:function infiniteLoop(): never { while (true) {} }。
10.watch和computed区别
一、指代不同
1、computed: (用计算机或计数器)计算;估计。
2、watch:注视;看守;观看;手表;监视;看守;值班。
二、侧重点不同
1、computed: 多用于表示人在使用计算机或计算器在进行计算、估算。
2、watch:多用于表示对某事物或人的看守、监视;同时表示物体:手表之意。
三、引证用法不同
1、computed:compute作计算,估算解时,是正式用法,指计算结果、答案、数目等;用作及物动词时,可接名词、代词或that从句作宾语。
2、watch:watch的基本意思是观看、注视,指用眼睛跟踪某物以观察到每一个动作、变化、危险迹象、机会等。引申可表示照管、守护、保卫等,指明确需要警觉,做好防止危险发生的准备,强调连续性和职务性。
11.vue3中的ref和rective区别
-
数据类型不同:ref用于包装JavaScript基本类型的数据(如字符串、数字、布尔值等),而reactive可以用于包装JavaScript对象和数组等复杂类型的数据。
-
使用方式不同:ref需要通过在模板中使用ref指令以及在JavaScript代码中使用ref函数进行创建和使用,而reactive则需要通过调用Vue.js提供的reactive函数进行包装和创建。
-
访问方式不同:对于通过ref函数创建的响应式数据,我们可以通过.value属性来访问其实际值;而对于通过reactive函数创建的响应式对象,我们可以直接访问其属性或调用其方法。
-
设计理念不同:ref主要是为了解决单一元素/数据的响应式问题,而reactive则是为了解决JavaScript对象和数组等复杂数据结构的响应式问题。
12.vue2中的Mixins和vue3中的hook
1.语法和用法:Hooks 是在 Vue 3 的 Composition API 中引入的一种函数式编程的方式,而 Mixins 是在 Vue 2 中的一种对象混入机制。Hooks 使用函数的方式定义和使用,而 Mixins 则是通过对象的方式进行定义和应用。
2.组合性和灵活性:Composition API 的 Hooks 允许开发者根据逻辑功能来组合和复用代码,可以将相关的逻辑和状态封装为自定义的 Hook 函数。而 Mixins 在组件中的属性和方法会与组件本身的属性和方法进行合并,可能会导致命名冲突或不可预料的行为。
3.响应式系统:Vue 3 的 Composition API 使用了一个新的响应式系统,可以通过 reactive 和 ref 来创建响应式数据。这样可以更精确地控制组件的更新和依赖追踪。而 Mixins 使用 Vue 2 的响应式系统,对数据的追踪和更新较为简单,可能存在一些性能上的问题。
4.生命周期钩子:在 Vue 3 的 Composition API 中,可以使用 onMounted、onUpdated 等钩子函数来替代 Vue 2 中的生命周期钩子。这样可以更灵活地管理组件的生命周期。Mixins 依然使用 Vue 2 的生命周期钩子。
总结
以上是我面试遇到的问题,答案可能有错漏,可自行查阅。