2022年的vue、react面试题目汇总集合(持续更新)

2023-11-05

 vue系列:

​​​​2021 Vue.js 面试题汇总及答案 - Jack Niu - 博客园

react系列:

React面试题及答案(2021年React面试题大全带答案) - 知乎

2021年React常见的面试题以及答案(持续更新中...)_再见已是路人的博客-CSDN博客_react面试题及答案2021

2021年前端React面试题大汇总(收藏)-js教程-PHP中文网

掘金 高频前端面试题汇总之React篇(上)

掘金 高频前端面试题汇总之React篇 (下)

综合面试系列:

前端知识库,前端试题库,这个很全面啥都有

2021 面试笔记(react +js) - 西柚_w - 博客园

前端面试题2021及答案_細水、長流√的专栏-CSDN博客_前端面试题2021及答案

2021年前端最新最全面试题(答案持续更新中~) - 良人非良 - 博客园

写给女朋友的中级前端面试秘籍(含详细答案,15k级别) - 掘金

2019十道精选前端面试题整理汇总

vue2.x高阶问题,你能答多少 - 掘金

/********下面是杂项记录********/

js变量提升和函数提升讲解(1)

js中的变量提升、函数提升及变量访问原则(2)

fun();
console.log(b);//9
console.log(c);//9
console.log(a);// undefine
function fun(){
    var a = b = c = 9;
   //  这里有个陷阱,  上面的相当于:var a=9;b=9;c=9  b、c 是没有var的,是全局变量
    console.log(a);
    console.log(b);
    console.log(c);
}

1.var a=12
    function fn(){
      console.log(a)       //undefined
      var a=45
      console.log(a)      //45
    }
 fn()

2.var a=12;
     function fn(){
       console.log(a)        //12
       a=45
       console.log(a)        //45
    }
  fn()


3.函数与变量同名时的变量提升规则 
alert(fun); // 最终输出结果为:输出fun函数体
function fun(){
    alert(“我是一个函数”);
}
var fun = “我是一个变量”;
alert(fun); // 输出:我是一个变量

/* 为什么第一个alert输出的是fun函数体,而第二个alert输出的是“我是一个变量”?
因为用var声明的变量及function声明的函数在执行前都会将声明提升到最前面,如果变量与函数同名,
那么在声明的时候会忽略变量,只提升函数声明! */
/*
上面这段代码相当于:
function fun(){
    alert(“我是一个函数”);
}
alert(fun);
fun = “我是一个变量”;
alert(fun);
*/
this 指向规则

情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。

情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象,下面的例子可以证明,如果不相信,那么接下来我们继续看几个例子。

情况4:this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的

情况3的demo
var o = {
    a:10,
    b:{
        // a:12,
        fn:function(){
            console.log(this.a); 
            //undefined  因为这里b已经注释了,访问不了b的对象,  如果不注释b的a,那就是12    
        }
    }
}
o.b.fn();

情况4的demo:
var j = o.b.fn;
j();  // 这种比较特殊,里面this是指向window的 



当this 遇上return  new
如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。
function fn()  
{  
    this.user = '追梦子';  
    return { v:123 };  
}
var a = new fn;  
console.log(a.user); //undefined  实际a 是{ v:123 }





call(): 改变函数的this指向,还会马上执行函数
       第一个参数是你想改变的this指向的对象
       后面的其它参数就是该函数的实参

apply():改变函数的this指向,还会马上执行函数
         第一个参数是你想改变的this指向的对象
         第二个参数是数组,数组里面存放函数的实参

bind(): 改变函数的this指向, 不会立马执行函数,在该函数调用的时候才会改变this指向
       第一个参数是你想改变的this指向的对象
       后面的其它参数就是该函数的实参
2021-11-25号更新 

如果想多个js同步执行不依赖任何异步,可以用:Promise.allSettled()

1.webpack打包、构建原理?
2.loader加载原理?常用loader的原理?loader执行顺序?
3.plugins加载原理?怎样自己写插件?webpack plugin执行顺序?
4.webpack HMR原理、热更新原理?

link 加载图片优化

js事件循环机制(宏任务、微任务)、

事件委托:本身是在子元素,却注册到父级元素,利用event.target.nodeName。优点:减少减少内存消耗

事件冒泡:从内到外,逐级传播

事件捕获:当鼠标点击或者触发dom事件时(被触发dom事件的这个元素被叫作事件源),浏览器会从根节点 =>事件源(由外到内)进行事件传播

JS自定义事件的定义和触发(createEvent, dispatchEvent)

什么是重排(回流)、 重绘

从输入URL到页面成功展示到浏览器的过程?

浏览器渲染页面的原理及流程?

apply、call   JS原生实现bind()

new 操作符做了什么?__proto__ 和 prototype 有什么区别?   

ES6 中 class 与构造函数的关系

手写 防抖、节流

vuex相关原理、mobx原理、react-redux状态管理原理(Provider 、connect 原理)

/***********欢聚考察基本功************/
0.css盒模型有哪些?box-sizing有哪些值
1.描述一下Dom事件流,怎么判断当前是处在哪个阶段
2.描述一下什么是变量提升?为什么要有变量提升
3.Css怎么处理样式冲突
4.setTimeout(() => {}, 0), 是什么时候执行的,如果想要更快执行回调怎么做?微任务有哪些?,js为什么要这样设计?
5.0.1+02 为什么不等于0.3
6.Promise有什么不足,除了它还有哪些异步解决方案,async await原理
7.Vue2中组件为什么只能有一个根节点,为什么Vue3组件可以有多个根节点?
8.Vue为什么使用虚拟dom?
9.Vue改变数据为什么是一次性收集之后再改,详情说一下这个原理,这里涉及到哪种设计模式,观察者和发布订阅有什么区别
10.Computed 之前为什么能互相引用
11.什么是浏览器缓存,有哪些,怎么跳过强缓存而使用协商缓存,页面怎么考虑要设置哪种缓存
11.按需导入的原理是什么
12.tree-shaking的原理是什么,为什么只对esmodule有用?
13.webpack热更新的原理?
链接:https://juejin.cn/post/7003714997951922184
页面白屏有哪些原因造成的?

1.前端代码错误,你的JS报错了,运行时抛出异常,接口报错导致前端错误处理,导致白屏

2.静态资源加载失败,如:js、css文件加载失败,导致白屏。

3.网络问题

4.如果有用cdn,CDN报错

2022-2-24号

diff算法   
虚拟dom
template编译过程
webpack 十连问掘金
vue数组重写过程
Vue初始化的过程
 Vue data 中随意更改一个属性,视图都会被更新吗?
强缓存和协商缓存
浏览器渲染过程
Url输入浏览器的过程
前端性能优化
es5和es6区别
postcss-pxtorem搭配amfe-flexible(监听窗口改变,viewWidth / 10 +'px')设置viewport放大缩小比例为1

es5实现继承方式
SubaaaaType.prototype = new SuperType(); 原型链
function Child() {
    Parent.call(this); 通过call改变this指向,子类里面调用父类
}

手写节流防抖 call  bind  apply  new过程

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

2022年的vue、react面试题目汇总集合(持续更新) 的相关文章

  • cannot find -l 问题处理

    graalvm打包最后一步 第七步 报错 主要错误简述 It appears as though libstdc a is missing Please install it cannot find lstdc 几个要点 1 l是link的

随机推荐

  • c++模板的概念全新解释

    文章目录 前言 一 模板的概念 强类型的严格性和灵活性 解决冲突的路径 模板的概念 一 1 函数模板 函数模板的定义 函数模板的实例化 函数模板的重载 1 函数模板的重载 2 用普通函数重载函数模板 3 用特定函数重载函数模板 类模板 类模
  • Jsch网络工具包的使用及源码简析

    一 背景 最近 导师安排了些看论文文献并整理论文至文件服务器的工作 在实验的过程中 我们知道常见的上传文件至服务器有以下方式 ftp sftp协议进行上传 ssh连接 并通过scp命令进行上传 通过xftp xshell ftplina等图
  • 【QT】Qt Creator 右击添加库无反应解决方案【转发】

    一 软件版本 Qt 5 9 0 二 问题现象 想向工程添加外部库 但点击添加库无反应 三 解决方案 1 打开 pro 文件 2 在 pro 文件界面内 右击鼠标 选择添加库 3 添加库的 UI 弹出 四 总结 Qt 5 9 0 Creato
  • c#.net常用的小函数参考

    选择自 crabapple2 的 Blog c net常用的小函数和方法集 1 DateTime 数字型 System DateTime currentTime new System DateTime 1 1 取当前年月日时分秒 curre
  • 记录JsonNode文本处理asText()和toString()的差异

    原文地址 https blog csdn net xudc0521 article details 89926158 最近使用JsonNode解析json字符串时 遇到一个与预期不一致的小问题 记录一下 先来看一个Test author x
  • log4j问题解决:log4j:WARN No appenders could be found for logger

    在resources目录下新建log4j properties文件 添加以下代码 log4j rootLogger ERROR log4j appender CONSOLE org apache log4j ConsoleAppender
  • 浙江大学 陈越_浙江大学陈越教授开展“程序设计课程建设”讲座

    12月10日下午 媒体工程学院耿卫东院长邀请了浙江大学陈越教授开展 程序设计课程建设 讲座 学院各课程群负责人 专业主任及其他专业教师共30余人聆听了讲座 并围绕 程序设计课程建设 的主题展开了深入探讨和交流 学院副院长章化冰主持讲座 代表
  • java基础学习 day25(二维数组)

    什么是二维数组 在数组中存放数组 二维数组的应用场景 当我们需要把数据分组管理的时候 就需要用二维数组 静态初始化格式 数据类型 数组名 new 数据类型 元素1 元素2 元素1 元素2 简化格式 数据类型 数组名 元素1 元素2 元素1
  • Java使用JVM工具检测问题

    1 jps 显示运行程序的进程 编码 主类目录信息 public class Demo01 jps 显示进程ID 主类名称 jps v 显示进程ID 主类名称以及详细编码信息 jps l 显示进程ID 主类目录 param args thr
  • 简单理解B树和B+树

    前言 前面我们说了红黑树 他是一种特殊的搜索树 但是由于他只是二叉树 所以这就导致他在大量的数据面前深度过高 同时会造成大量的磁盘空间浪费 所以我们又研究出来了B树和B 树 B树 他是人们早期的一种设计 他打破了二叉树的方式 它可以有多个分
  • android小项目之新闻客户端二

    基于Android的小巫新闻客户端开发 UI设计 主界面 2013年2月15日 由于太多事情要乱 不可能只专注一样东西 因为怕完成不了任务 原本这系列博客就是要在寒假搞定的 没想到拖了那么久 没办法 现在只能有空的时候就回顾一下小巫新闻客户
  • 多输入多输出

    多输入多输出 MATLAB实现DNN全连接神经网络多输入多输出 目录 多输入多输出 MATLAB实现DNN全连接神经网络多输入多输出 预测效果 基本介绍 模型结构 程序设计 参考资料 预测效果 基本介绍 DNN的结构不固定 一般神经网络包括
  • 所见即所得,使用Java将HTML解析为Excel,支持多级表头嵌套、单元格合并

    最近项目需要实现如题 所见即所得 的功能 之前每次生成Excel都需要重新从数据库查询一遍 降低效率不说 那些嵌套的表头实在是很难用Sql嵌套拼接实现 而且这样做还没有通用性 不同的表格需要写不同的Sql实现 非常繁琐 在网上找了很多关于H
  • SAP 程序中权限检查和用户权限缺失检查 SU53

    1 在程序中调用权限对象 在很多SAP标准程序中 已经存在了对权限数据的调用及管控功能 在程序中可以通过ABAP程序编辑器快速插入调用权限的代码 权限代码需要放在AT SELECTION SCREEN 事件块里 AUTHORITY CHEC
  • 飞飞影视php 漏洞,飞飞影视SQL injection exploit[转]

    飞飞影视管理系统 SQL injection 飞飞影视系统PHP版 v1 9 injection exploit by www 08sec com fans keyword Powered by www ff84 com error rep
  • vue.js关于动态绑定数据

    最近在写vue的时候发现一个问题 在后台传过来的一个数组需要给页面进行渲染 需要为每个 li 标签吧绑定一个点击事件 这个点击事件需要取这个 li li 标签的name属性的值 然后再进行页面的跳转 如何给name赋值呢 刚开始如上图写的
  • vue+element+el-table表格简单封装成组件

    封装后调用 我的页面是这样的 像那些图片 按钮 和状态这些 都是埋好的具名插槽 配置的时候先传插槽的名字 然后在table组件中对应名字 就形成了 具体看代码 比较详细 直接复制引用就可以展示 我在props里定义了点默认值 引用时方便理解
  • FPGA常用通信协议之IIC

    目录 1 概述 2 IIC时序 2 1数据位的有效性规定 2 2起始 终止 应答 非应答信号 2 3数据传送格式 2 4总线的寻址 3 FPGA读写EEPROM 3 1EEPROM芯片手册 3 1 1写时序 3 1 2读时序 3 1 3硬件
  • CSliderCtrl::ClearSel

    CSliderCtrl ClearSel void ClearSel BOOL bRedraw FALSE Parameters bRedraw Redraw flag If this parameter is TRUE the slide
  • 2022年的vue、react面试题目汇总集合(持续更新)

    vue系列 2021 Vue js 面试题汇总及答案 Jack Niu 博客园 react系列 React面试题及答案 2021年React面试题大全带答案 知乎 2021年React常见的面试题以及答案 持续更新中 再见已是路人的博客 C