skip to content
Logo Castle's Blog

前端面试相关问题

/

面试

前端面试相关问题

vue相关

1.vue的优点

Vue是一个渐进式JavaScript框架，它专注于构建用户界面。Vue的核心思想是数据驱动和组件化。通过将页面拆分成独立的组件，可以更好地管理代码，提高代码的复用性和可维护性。

Vue的响应式数据绑定机制是Vue最核心的特性之一。通过对数据进行劫持和监听，可以实现数据的双向绑定，即数据变化会自动更新视图，同时视图的变化也会反映到数据上。

vue是操作虚拟DOM，极大提升效率。

2.对 Vue 生命周期的理解

解：生命周期通俗说就是Vue实例从创建到销毁的过程

  1. beforecreate （初始化界面前）
  2. created （初始化界面后）
  3. beforemount （渲染界面前）
  4. mounted （渲染界面后）
  5. 更新前：beforeUpdate
  6. 更新后：updated
  7. 销毁前：beforeDestroy
  8. 销毁后：destroyed

注：在钩子函数mounted()中才能开始访问操作dom，因为在mounted()生命周期前，dom刚好渲染好，但还未挂载到页面，如果在这之前进行dom操作，将找不到dom节点

3.什么是axios，怎样使用它

Axios 是一个基于 promise 异步的 HTTP 库，用于在客户端和服务器之间进行异步数据传输。一般都是通过axios来发起ajax请求

什么是Ajax请求

Ajax是一种创建快速动态网页的技术，可以在不刷新页面的情况下对部分网页内容进行更新

4.vue-router 中常用的路由模式

哈希模式（Hash Mode）

哈希模式是 Vue Router 的默认路由模式。URL 中会包含一个哈希值#，哈希值后面的部分被用作路由路径。

优点
  • 兼容性好，支持所有浏览器。
  • 不会触发浏览器的页面刷新。

历史模式（History Mode）

历史模式是使用 HTML5的方法来管理路由，使得url更像传统的url。特点：会使URL 更加美观，不包含哈希值。但缺点：需要服务器端配置支持，需要确保所有路由都正确指向，否则会出现404

5.Vue组件通信有哪些方式

Props（父传子）父组件通过 props 将数据传递给子组件。子组件通过声明 props 来接收这些数据
Provide 和 Inject（父传子孙）祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。
事件（子传父）通过 $emit 方法触发一个自定义事件，并将数据传递给父组件
Vuex（状态管理）适用于 父子、隔代、兄弟组件通信

6.在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以进行调用，但最好在 created 钩子函数中调用异步请求，因为在 created 创建可以更快的获得相关数据，减少页面加载

7.什么是vue的双向绑定，如何实现？

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。如何实现简单来讲，就是通过对数据进行监听，如果有变化就重新编译

8.computed、 watch是什么，有什么区别？

computed、和watch` 是vue中三种不同的属性，用于处理组件中的数据和逻辑

computed： 是计算属性，依赖其它属性值，有缓存

watch主要起到监听作用，实现某些数据的监听回调

9.说一下 v-if 与 v-show 的区别

当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display)，切换当前DOM的显示和隐藏。

10.v-model 是如何实现的，语法糖实际是什么？

v-model 是 语法糖，将 v-bind 和 v-on 指令结合在一起使用，用于双向绑定表单元素的值和数据对象的值。v-model 可以轻松地实现父子组件之间的双向数据绑定，让父组件能够更加方便地控制子组件的状态。

父组件

<template>
  <ChildComponent v-model="parentMessage" />
  <p>父组件的消息: {{ parentMessage }}</p>
</template>


<script>
import ChildComponent from './ChildComponent.vue';


export default {
  data() {
    return {
      parentMessage: 'Vue 3的魔法'
    };
  },
};
</script>

子组件

<template>
  <input :value="value" @input="sendValueToParent" />    #:value是v-bind:value的简写  @input是v-on的简写
</template>


<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
  },
  emits: ['update:value'], // 声明你将发出这个事件


  methods: {
    sendValueToParent(event) {
      this.$emit('update:value', event.target.value); // 当输入改变时，发送新的值给父组件
    },
  },
};
</script>

11.vue3中是如何处理响应式数据

vue3是通过利用es6中的Proxy来实现响应式数据，替代了Vue 2中的Object.defineProperty。而在vue3 中主要有两个方法来实现，分别是reactive和ref。ref是适用于基本数据类型，而reactive是适用于对象或数组等复杂数据结构

12.Vue-router中路由守卫的用法

  • 全局守卫：

    • beforeEach: 在路由进入前被调用，可以决定导航是否继续。
    • afterEach: 在路由进入后被调用，不会改变导航本身。

  • 路由独享的守卫：访问这个特定的路由时才会触发

  • 组件内的守卫：控制用户是否可以进入或离开某个组件的特定函数

13.Vue 3.0 中的 Vue Composition API和vue2有啥区别？

Vue2 中是 Options API 风格的，简单但不够灵活

Vue 3.0 中的 Vue Composition API允许开发者更好地利用JavaScript函数来组织和复用代码，会更加灵活。

14.什么是虚拟dom，有什么优点？

Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。

优点

  • 虚拟DOM可以减少直接操作DOM的次数，从而提高应用的性能。
  • 无需手动操作DOM元素，而是通过改变组件的状态来自动管理DOM更新。这使得代码更加简洁，易于维护。

javascript相关

1.JavaScript闭包的概念

解：JavaScript闭包是一种特殊的作用域概念，指的是当一个函数可以访问并操作其外部函数作用域中的变量，即便外部函数已经执行完毕，这种现象称为闭包。

2.Js中同步和异步

  • 同步执行意味着代码按照书写的顺序逐行执行，如果某段代码卡死，整个程序会等待这段代码执行完成，然后继续执行下一行代码。

  • 异步执行则允许代码在等待耗时操作（如I/O操作、数据库查询、网络请求等）完成的同时，继续执行后续的代码，而不会阻塞主线程。

    • promise通过.then和.catch来处理异步

      • Async/Await：基于Promises，ES2017引入的语法糖。使用async关键字定义一个异步函数，await关键字用于等待Promise解析

3.Js 的数据类型

基本类型（六种）

  • Number
  • String
  • Boolean
  • Undefined
  • null
  • symbol

引用类型（主要三种）

  • Object

    • let person = {
          name: "Nicholas",
          "age": 29,
          5: true
      };

  • Array

    • let colors = ["red", 2, {age: 20 }]
      colors.push(2)

  • Function

    • // 函数声明
      function sum (num1, num2) {
          return num1 + num2;
      }
      //函数表达式
      let sum = function(num1, num2) {
          return num1 + num2;
      };
      //箭头函数
      let sum = (num1, num2) => {
          return num1 + num2;
      };

数组中常用方法

增

下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响

  • push()
  • unshift()
  • splice()
  • concat()
#push()

push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度

let colors = []; // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
console.log(count) // 2
#unshift()

unshift()在数组开头添加任意多个值，然后返回新的数组长度

let colors = new Array(); // 创建一个数组
let count = colors.unshift("red", "green"); // 从数组开头推入两项
alert(count); // 2
#splice

传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素，返回空数组

let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 0, "yellow", "orange")
console.log(colors) // red,yellow,orange,green,blue
console.log(removed) // []
#concat()

首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组

let colors = ["red", "green", "blue"];
let colors2 = colors.concat("yellow", ["black", "brown"]);
console.log(colors); // ["red", "green","blue"]
console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]

es6

1.说说var、let、const之间的区别

  • 在函数外声明的var变量是全局的，在函数内声明的var变量只在该函数内部可见。var变量会使变量提升，但不会赋值，只会输出undefined
  • let声明的变量只能在let命令所在的代码块内有效; let不允许在相同作用域中重复声明。
  • const声明一个只读的常量。一旦声明变量，就必须立即初始化。

3.跨域问题通常如何解决？请描述几种常见的解决策略。

常见的跨域解决策略包括使用CORS头部信息、JSONP、代理服务器等方法。