前端Vue+TypeScript面试题

VUE面试题

• 1、Vue3的主要新特性是什么？

VUE的核心特性是数据驱动（MVVM)，MVVM表示的是 Model-View-ViewModel：
Model：模型层，负责处理业务逻辑以及和服务器端进行交互
View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

而Vue 3 的新特性包括：
Composition API：提供更灵活的代码组织方式。
性能优化：使用 Proxy 实现响应式，性能更好。
Tree-shaking：支持按需引入，减小打包体积。
TypeScript 支持：对 TypeScript 的支持更好。
Fragment、Teleport、Suspense：新增内置组件。

• 2、什么是Composition API（组合式API）？

Composition API 是 Vue 3 引入的新特性，允许将逻辑组织为可复用的函数。

• 3、Vue 3 中的 setup 函数是什么？

setup 是 Composition API 的入口函数，在组件创建之前执行。

• 4、Vue 3 中的 ref 和 reactive 有什么区别？

ref：用于定义基本类型的响应式数据，通过 .value 访问。
reactive：用于定义对象类型的响应式数据。

• 5、Vue 3 中的 toRef 和 toRefs 是什么？

toRef：将对象的某个属性转换为 ref。
toRefs：将整个响应式对象的所有属性转换为 ref。

• 6、v-show与v-if的区别？

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

• 7、Vue组件之间的通信方式都有哪些？

vue中8种常规的通信方案：
通过 props 传递
通过 $emit 触发自定义事件
使用 ref
EventBus
$parent 或$root
attrs 与 listeners
Provide 与 Inject
Vuex

• 8、Vue的生命周期有哪些？

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期
生命周期	描述
beforeCreate	组件实例被创建之初
created	组件实例已经完全创建
beforeMount	组件挂载之前
mounted	组件挂载到实例上去之后
beforeUpdate	组件数据发生变化，更新之前
updated	组件数据更新之后
beforeDestroy	组件实例销毁之前
destroyed	组件实例销毁之后
activated	keep-alive 缓存的组件激活时
deactivated	keep-alive 缓存的组件停用时调用
errorCaptured	捕获一个来自子孙组件的错误时被调用

• 9、Vue 3 中的 v-bind 和 v-model 有什么区别？

v-bind：单向绑定，数据变化影响视图。
v-model：双向绑定，数据和视图相互影响。

• 10、Vue 3 中的 v-for 和 v-if 的优先级是什么？

v-if 的优先级高于 v-for。

TypeScript面试题

• 1、TypeScript与JavaScript的区别是什么？

TypeScript是JavaScript的超集，它扩展了JavaScript，主要区别包括：

类型系统：TypeScript提供静态类型检查
面向对象特性：提供接口、泛型、枚举等特性
开发工具支持：更好的IDE支持，包括代码补全、重构等
及早发现错误：在编译时就能发现潜在问题
JavaScript互操作性：可以逐步将JavaScript代码迁移到TypeScript

• 2、TypeScript中的基本类型有哪些？

TypeScript包含以下基本类型：

基础类型：
number：数字
string：字符串
boolean：布尔值
null和undefined
void：通常用于函数返回值
any：任意类型
never：永不存在的值的类型

对象类型：
object：对象类型
array：数组类型
tuple：元组类型

• 3、什么是泛型？为什么要使用泛型？

泛型是一种在定义函数、接口或类时不预先指定具体类型，而在使用时再指定类型的特性。

优点：
代码复用
类型安全
减少冗余代码

• 4、TypeScript中如何实现接口继承？

接口继承允许我们从一个接口复制成员到另一个接口，实现代码重用。

• 5、如何在TypeScript中处理异步操作？

TypeScript完全支持现代JavaScript的异步特性，包括Promise、async/await等。

• 6、type 和 interface 共同和区别，如何选择？

（1）共同：都能描述一个对象结构、都能被 class 实现、都能被扩展
（2）区别：type 可以声明基础类型、type 有联合类型和交差类型、type 可以被 typeof 赋值
（3）选择：能用 interface 就尽量用 interface，除非必须用 type 的时候才用 type

• 7、枚举（enum）是什么？

枚举是一种对数字值集合进行命名的方式。它们可以增加代码的可读性，并提供一种便捷的方式来使用一组有意义的常量。

• 8、unknown 和 any 区别？

unknown 是更安全的 any：
any 任何类型，会忽略语法检查
unknown 不可预知的类型，不会忽略语法检查（这就是最大区别）

• 9、keyof 和 typeof 有什么区别？

typeof 是 JS 基础用法，用于获取类型。
keyof 是 TS 语法，用于获取所有 key 的类型。

• 10、数组 Array 和元组 Tuple 的区别是什么？

数组元素只能有一种类型，元祖元素可以有多种类型。