2024最新高频前端面试题总结(附答案)

20.路由模式:hash和history

21.常用的块与行属性内标签有哪些?有什么特征

22.== 和 ===的区别

23.严格模式的限制

24.git

25.tcp和udp协议

26.vuex的五种状态

27.什么是防抖和节流,js 如何处理防抖和节流

28.什么是重绘和回流

29.Css优先级

30.如何解决盒子塌陷

31.清楚浮动的方法

32.Split()和 join()的区别?

33.数组去重

34.什么原因会造成内存泄露

35.第一次加载页面会触发哪几个钩子函数?

36.Vuex 的 5 个核心属性是什么?

37.get和post区别

38.跨域

39.三种存储的区别

40.dom如何实现浏览器内多个标签页之间的通信

41.请说出vue.cli项目中src目录每个文件夹和文件的用法?

42. r o u t e 和 route和 routerouter的区别

43.虚拟dom实现原理

44.普通函数和箭头函数的区别

45.怎样理解vue单项数据流

46.slot插槽

47.vue常见指令

48.vue中keep-alive 的作用

49.vue双向绑定的原理


1.vue双向数据绑定的原理?

mvvm场景:数据操作比较多的场景,需要大量使用DOM元素时,采用mvvm的开放方式,会更加便捷,让开发者更多的经历放在数据的变化上,解放繁琐的DOM元素

  • MVVM 模型,
  • M 数据 从后台获取的商品数据
  • V 视图 就是写好的页面,每一个div,每一个input 都是视图
  • VM 视图模型,
  • 数据发生变化,通过视图模型会改变视图的显示,视图上的改变,也会通过视图模型进而影响数据的变化
  • 核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法。
2.vue的生命周期有哪些

beforeCreate(创建前)、created(创建后)、beforeMount(载入前)、mounted(载入后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(销毁前)、destroyed(销毁后)

mounted 真实dom挂载完成 updated只要data数据被改变 就会自动更新触发 destroy销毁全局计时器和自定义事件

如果使用了keep-alive会在多两个:activated、deactivated当组件初次加载会执行前4个生命周期,分别为: beforeCreate、created、beforeMount、mounted

3.v-if 和v-show有什么区别?
  • 相同点:都可以控制dom元素的显示和隐藏
  • 不同点:v-show只是改变display属性,dom元素并未消失,切换时不需要重新渲染页面
  • v-if直接将dom元素从页面删除,再次切换需要重新渲染页面
4.async await 是什么?它有哪些作用?

async await 是ES7的新增,async用于声明一个函数,await用于等待一个异步方法执行完成。async函数返回的是一个promise对象,可以用.then方法添加回调函数,在函数执行的中,一旦遇到await就回先返回,等到这个异步操作完成之后,它再进行函数体内后面的这个语句

5、数组常用的方法?哪些方法会改变原数组,哪些不会
  • 会改变原数组:

    • pop (删除数组的最后一个元素并返回删除的元素)
    • push(向数组的末尾添加一个或更多元素,并返回新的长度)
    • shift(删除并返回数组的第一个元素)
    • unshift(向数组的开头添加一个或更多元素,并返回新的长度)
    • reverse(反转数组的元素顺序)
    • sort(对数组的元素进行排序)
    • splice(用于插入、删除或替换数组的元素)
  • 不会改变原数组:

    • concat—连接两个或更多的数组,并返回结果。
    • every—检测数组元素的每个元素是否都符合条件。
    • some—检测数组元素中是否有元素符合指定条件。
    • filter—检测数组元素,并返回符合条件所有元素的数组。
    • indexOf—搜索数组中的元素,并返回它所在的位置。
    • join—把数组的所有元素放入一个字符串。
    • toString—把数组转换为字符串,并返回结果。
    • lastIndexOf—返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
    • map—通过指定函数处理数组的每个元素,并返回处理后的数组。
    • slice—选取数组的的一部分,并返回一个新数组。
    • valueOf—返回数组对象的原始值
6.什么是原型链?

每一个实例对象上有一个proto属性,指向的构造函数的原型对象,构造函数的原型对象也是一个对象,也有proto属性,这样一层一层往上找的过程就形成了原型链。

7.什么是闭包?闭包有哪些优缺点?
  • 概念:函数嵌套函数,内部变量能访问外部变量,这个变量称为自由变量
  • 解决的问题:保存变量
  • 带来的问题:会造成内存泄漏问题
  • 闭包的应用:防抖节流
8.es6有哪些新特性?
  • 新增模板字符串
  • 箭头函数
  • for-of(用来遍历数据—例如数组中的值。)
  • ES6 将 Promise 对象纳入规范,提供了原生的 Promise 对象。
  • 增加了 let 和 const 命令,用来声明变量。
  • 还有就是引入 module 模块的概念
9.v-for 循环为什么一定要绑定key ?

给每个dom元素加上key作为唯一标识 ,diff算法可以正确的识别这个节点,使页面渲染更加迅速!

10.组件中的data为什么要定义成一个函数而不是一个对象?

每个组件都是 Vue 的实例。组件共享 data 属性,当 data 的值是同一个引用类型的值时,改变其中一个会影响其他

11.常见的盒子垂直居中的方法有哪些请举例3种?

利用子绝父相定位方式来实现

    <style>
        .container{
            width: 300px;
            height: 300px;
            position: relative;
        }
        .conter{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>

利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

   <style>
        .container{
            position: relative;
        }
        .conter{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

flex

   <style>
        .container{
         display: flex;
         justify-content: center;
         align-items: center;
        }
        .conter{
            
        }
    </style>
12.js数据类型有哪些,区别是什么
  • 基本类型:string,number,boolean,null,undefined,symbol,bigInt
  • 引用类型: object,array
  • 基本类型存储在栈中,空间小,操作频繁
  • 引用数据类型存放在堆中,它的地址在栈中,一般我们访问就是它的地址
13.什么是symbol

是es6引入新的原始数据类型Symbol,表示独一无二的值

14.什么是同源策略

所谓同源策略就是浏览器的一种安全机制,来限制不同源的网站不能通信(域名、协议、端口号相同)

15.promise是什么,有什么作用
  • promise 是一个对象, 可以从改变对象获取异步操作信息
  • 他可以解决回调地狱的问题,也就是异步深层嵌套问题
16.什么是递归,递归有哪些优缺点?
  • 递归:如果函数在内部可以调用其本身,那么整函数就是递归函数,简单理解:函数内部自己调用自己,这个函数就是递归函数,
  • 优点:机构清晰,可读性强
  • 缺点:效率低,调用站可能溢出,其实每一次函数调用会在内存栈中分配空间,而每个进程的栈的内容粮食有限的。当调用的层次太多时,就会超出栈的容量,从而导致栈溢出
17.let和const 的区别是什么
  • let 命令不存在变量提升,如果在 let 前使用,会导致报错
  • 如果块区中存在 let 和 const 命令,就会形成封闭作用域
  • 不允许重复声明
  • const定义的是常量,不能修改,但是如果定义的是对象,可以修改对象内部的数据
18.vue性能优化
  • 函数式组件
  • 路由懒加载
  • v-for要绑定key key是虚拟dom唯一标志,能帮vue高效的动态渲染页面,渲染页面时会使用diff算法,会比较新旧dom,在比较时只比较同一级,不进行跨级比较,key发生变化节点进行销毁,并且是子节点先销毁。
  • computed缓存数据和watch keep-alive缓存组件
  • v-if和v-for不要同时使用,v-show是display,销毁是display-none.v-if为true创建.false销毁。
  • 设计vue响应式数据时不能设计太深.会做全量递归的计算.
  • 组件的颗粒度不能设计太细.合理划分.层级越深性能消耗越大
  • 防抖节流
  • ui组件库按需引入
19…mvvm和mvc
  • m(数据层)v(视图层)vm(数据视图交互层)简化了大量dom操作 ,只用于单页面,通过数据来显示视图层而不是节点操作。
  • mvc还需要获取dom,使页面渲染性能低且加载速度慢
  • 面试可以说的项目优化:
  • 设计vue响应式数据时不能设计太深.会做全量递归的计算.
  • 组件的颗粒度不能设计太细.合理划分.层级越深性能消耗越大
20.路由模式:hash和history
  • 实现的功能:
  1. 改变url且不让浏览器向服务器发请求
  2. 检测url的变化
  3. 截获url地址 并解析出需要的信息匹配路由规则
  • hash基于url传参 会有体积限制,不会包括在http请求中对后端完全没有影响,改变hash不会重新加载页面; history可以在url里放参数 还可以将数据存放在一个特定对象中.history模式浏览器白屏解决方法是在服务端加一个覆盖所有的情况候选资源,必须要服务端在服务器上有对应的模式才能使用,如果服务器没配置,可以先使用默认的hash。
21.常用的块与行属性内标签有哪些?有什么特征
  • 块标签:div、h1~h6、ul、li、table、p、br、form。
  • 特征:独占一行,换行显示,可以设置宽高,可以嵌套块和行
  • 行标签:span、a、img、textarea、select、option、input。
  • 特征:只有在行内显示,内容撑开宽、高,不可以设置宽、高(img、input、textarea等除外)
22.== 和 ===的区别
  • ==是非严格意义上的相等
    • 值相等就相等
  • ===是严格意义上的相等,会比较两边的数据类型和值大小
    • 值和引用地址都相等才相等
23.严格模式的限制
  • 变量必须声明后再使用
  • 函数的参数不能有同名属性,否则报错
  • 不能使用 with 语句
  • 禁止 this 指向全局对象
24.git
  • git init 初始化仓库
  • git clone 克隆
  • git status 检查文件状态
  • git add. 将文件添加到暂存区
  • git commit -m 描述信息
25.tcp和udp协议
  • tcp安全性更高 http协议是建立在tcp基础上的
  • udp效率比tcp高 容易丢数据
26.vuex的五种状态
  • mutations(修改state里面的数据,但是他只能执行同步的操作,异步必须写在action里面)
  • state(放数据)
  • action(执行异步操作)
  • getter(计算属性)
  • moudel(允许将单一store拆分多个store并且同时保存在单一的状态中)

传递过程

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation,mutation会修改state中对应的值。 最后通过getter把对应值跑出去,在页面的计算属性中,通过,mapGetter来动态获取state中的值

27.什么是防抖和节流,js 如何处理防抖和节流
  • 首先 防抖就是触发下一个事件时停止掉上一个事件
  • 节流是 触发当前事件需要在上一个事件结束以后
  • 通过设置节流阀(定时器)
28.什么是重绘和回流
  • 重绘:当元素内容以及布局没有发生改变,只是元素外观发生改变(background-color),就会重绘
  • 回流:当一部分内容或者布局发生了改变,重新构建页面就会产生回流
  • 产生回流一定会造成重绘,但是重绘不一定造成回流
29.Css优先级

!importent>行内> id> 类,伪类,属性>标签,伪元素选择器 > 继承和通配符

计算机网络

  • HTTP 缓存

  • 你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?

  • HTTP 常用的请求方式,区别和用途?

  • HTTPS 是什么?具体流程

  • 三次握手和四次挥手

  • 你对 TCP 滑动窗口有了解嘛?

  • WebSocket与Ajax的区别

  • 了解 WebSocket 嘛?

  • HTTP 如何实现长连接?在什么时候会超时?

  • TCP 如何保证有效传输及拥塞控制原理。

  • TCP 协议怎么保证可靠的,UDP 为什么不可靠?

算法

  • 链表

  • 字符串

  • 数组问题

  • 二叉树

  • 排序算法

  • 二分查找

  • 动态规划

  • BFS

  • DFS

  • 回溯算法

加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值