No169.精选前端面试题，享受每天的挑战和学习

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

type和interface的区别

interface可以重复声明，type不行
继承方式不一样，type使用交叉类型方式，interface使用extends实现。
在对象扩展的情况下，使用接口继承要比交叉类型的性能更好。建议使用interface来描述对象对外暴露的借口，使用type将一组类型重命名（或对类型进行复杂编程）。

在 TypeScript 中，type 和 interface 都用于定义自定义类型，但它们有一些区别：

1. 语法差异：

   • type 使用 type 关键字定义类型别名，例如 type MyType = { /* 类型定义 */ }。
   • interface 使用 interface 关键字定义接口，例如 interface MyInterface { /* 接口定义 */ }。

2. 声明合并：

   • type 支持声明合并，可以多次声明同一个类型，并合并成一个类型。
   • interface 也支持声明合并，但它不能合并带有相同名称的非函数成员。

3. 可扩展性：

   • type 是可扩展的，可以使用交叉类型（&）合并多个类型声明，将它们组合成一个新的类型。
   • interface 也是可扩展的，可以使用继承关键字（extends）扩展多个接口，创建一个新的接口。

4. 可读性与可维护性：

   • 由于 type 具有更灵活的语法，可以使用联合类型、交叉类型、条件类型等高级类型功能，有时可能会产生更复杂的类型定义，可读性可能稍差，但灵活性更高。
   • interface 的语法相对简单清晰，更接近面向对象编程的思维方式，可读性较好，适合定义对象的形状和行为。

在使用上，通常可以根据需求来选择 type 或 interface：

• 如果主要是描述对象的形状和行为，更接近面向对象的设计思想，可以使用 interface。
• 如果需要更灵活和复杂的类型定义，例如联合类型、交叉类型、条件类型等，可以使用 type。

需要注意的是，interface 可以通过 implements 关键字用于类的实现，而 type 不支持。此外，对于函数类型的定义，两者的语法略有不同，但功能类似。

总结来说，type 和 interface 在 TypeScript 中都是用于定义自定义类型的关键字，差异在于语法、声明合并、可扩展性、可读性与可维护性等方面。具体选择要根据使用场景和需求来决定。

下面是关于type和interface在 TypeScript 中的区别的表格总结：

这个表格简洁地总结了type和interface之间的一些重要区别，可以根据具体需求选择适合的关键字来定义自定义类型。

computed和watch的区别

在 Vue.js 中，computed 和 watch 是两种用于响应式地处理数据变化的方式，它们的区别如下：

computed：

• computed 是一个计算属性，用于派生出一个新的响应式属性。
• computed 的值根据依赖的响应式数据（如 data 或其他 computed）自动进行缓存，并且只有依赖的数据发生变化时，才会重新计算该属性。
• computed 属性是基于它的依赖项进行缓存的，只有当依赖项发生改变时，才会重新计算，否则会直接返回缓存的值。
• 适用于需要基于其他数据进行计算的场景，例如根据输入值计算结果、格式化数据等。

watch：

• watch 是一个观察者，用于监听特定数据的变化，并在数据变化时执行相应的操作。
• watch 监听的数据发生变化时，它会执行指定的回调函数，可以在其中进行一些逻辑处理、异步操作，或者触发其他操作。
• watch 不会自动进行缓存，每当监听的数据发生变化时，都会触发回调函数，因此可以执行一些与数据变化相关的副作用操作。
• 适用于需要对数据变化做出实时响应、需要执行异步操作或需要执行一些副作用操作的场景，例如监听输入字段的变化并发送请求。

总结来说，computed 用于派生出一个新的响应式属性，并且在依赖的数据发生变化时才会重新计算，而 watch 用于监听特定数据的变化，并在数据变化时执行相应的操作。computed 主要用于计算属性的场景，而 watch 主要用于监听数据变化并执行相关操作的场景。

下面是关于computed和watch在Vue.js中的区别的表格总结：

该表格提供了一个简明的比较，总结了computed和watch在不同方面的特点和用法。根据需求选择合适的方式来处理数据变化，可以提高Vue.js应用程序的效果和可维护性。

vue-router的路由守卫

Vue Router 提供了一些称为路由守卫（Route Guards）的功能，用于在路由导航过程中控制和管理路由的行为。路由守卫可以用于执行验证、权限控制、重定向等操作，以及在路由切换前后执行一些特定的逻辑。

Vue Router 的路由守卫包括全局守卫、路由独享守卫和组件内的守卫。

1. 全局守卫：

   • beforeEach: 在每个路由导航之前被调用，可以用于进行全局的权限验证或重定向。
   • beforeResolve: 在每个路由导航解析之前被调用，在 beforeEach 守卫和组件内的 beforeRouteEnter 守卫之后调用。
   • afterEach: 在每个路由导航之后被调用，可以用于执行一些后续操作，例如统计信息或日志记录。

2. 路由独享守卫：

   • beforeEnter: 在单个路由配置中定义的守卫，在路由激活之前被调用。

3. 组件内的守卫：

   • beforeRouteEnter: 在组件被路由激活之前被调用，无法直接访问组件实例（this），可以通过一个回调函数接收组件实例作为参数。
   • beforeRouteUpdate: 在组件被复用时（例如同一个组件不同参数的路由之间切换）调用，可以访问组件实例。
   • beforeRouteLeave: 在组件离开路由之前被调用，可以访问组件实例，用于执行一些确认操作或保存用户输入的内容。

这些路由守卫可以通过在 Vue Router 的路由配置中定义相应的函数来使用。例如，在创建 Vue Router 实例时：

const router = new VueRouter({
  routes: [
    {
      path: '/example',
      component: ExampleComponent,
      beforeEnter: (to, from, next) => {
        // 执行路由独享的守卫逻辑
        // 调用 next() 进行路由导航
      },
    },
  ],
});
1
2
3
4
5
6
7
8
9
10
11
12

在路由配置中使用守卫函数时，可以在函数中执行逻辑并通过调用 next 方法控制路由导航的行为。

了解和使用 Vue Router 的路由守卫可以实现更精细的路由控制和处理各种场景下的路由导航需求。有关路由守卫的更详细信息，可以参考 Vue Router 的官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

composition Api对比 option Api的优势

Composition API 是 Vue 3 中引入的一种新的组合式 API，与传统的选项 API（Options API）相比，具有以下几个优势：

1. 更好的逻辑组织：选项 API 基于选项对象，将不同的逻辑分散在不同的选项字段中，而 Composition API 则更加关注逻辑的功能性组织。你可以根据功能将相关逻辑放在一起组织成自定义的函数，使得组件更加清晰、易于维护和理解。

2. 更好的代码重用：Composition API 提供了更灵活的代码组合方式，使得组件之间的逻辑更容易共享和重用。你可以将一部分逻辑抽离出来，创建自定义的函数，然后在多个组件中进行复用。

3. 更好的响应式处理：在选项 API 中，使用响应式数据需要借助 data、computed、watch 等选项来实现。而在 Composition API 中，可以使用 ref、reactive 等函数来定义响应式数据和依赖关系，使得代码更加简洁和直观。

4. 更好的类型推导：由于 Composition API 更加函数式，依赖关系更明确，因此对 TypeScript 等静态类型检查工具更加友好。你可以更容易地为自定义的函数提供类型注解，获得更好的类型推导和编译时检查。

5. 更好的生命周期管理：Composition API 提供了 onMounted、onUpdated、onUnmounted 等函数，用于替代选项 API 中的生命周期钩子函数。这些函数在组件的不同生命周期阶段被调用，使得对生命周期的管理更加直观和灵活。

请注意，Composition API 并不取代选项 API，而是作为一种补充和扩展。你可以根据项目的具体需求选择合适的 API 使用。对于简单的组件，选项 API 仍然是一个有效且简单的方式。而对于更复杂的组件，特别是需要代码重用和更好的逻辑组织的情况下，Composition API 更具优势。

总结起来，Composition API 提供了更好的逻辑组织、代码重用、响应式处理、类型推导和生命周期管理等优势，使得 Vue 组件的开发更加灵活、清晰和可维护。