面试题
文章平均质量分 51
管理界的扫地僧
这个作者很懒,什么都没留下…
展开
-
2022前端面试经历
前端面试题原创 2022-10-28 09:34:24 · 441 阅读 · 2 评论 -
Vue高级面试题汇总(一)
说说你对SPA单页面的理解,它的优缺点分别是什么?是一种只需要将单个页面加载到服务器之中的web应用程序。当浏览器向服务器发出第一个请求时,服务器会返回一个index.html文件,它所需的js,css等会在显示时统一加载,部分页面按需加载。url地址变化时不会向服务器在请求页面,通过路由才实现页面切换。优点:良好的交互体验,用户不需要重新刷新页面,获取数据也是通过Ajax异步获取,页面显示流畅; 良好的前后端工作分离模式。缺点:SEO难度较高,由于所有的内容都在一个页面中动态替换原创 2021-11-21 17:23:50 · 3398 阅读 · 0 评论 -
Vue中级面试题汇总(二)
Vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么?要,不然会造成多次绑定和内存泄露Vue组件里的定时器要怎么销毁?如果页面上有很多定时器,可以在data选项中创建一个对象timer,给每个定时器取个名字一一映射在对象timer中,在beforeDestroy构造函数中for(let k in this.timer){clearInterval(k)};如果页面只有单个定时器,可以这么做。const timer = setInterva..原创 2021-11-07 15:09:16 · 863 阅读 · 0 评论 -
Vue中级面试题汇总(一)
Vue在created和mounted这两个生命周期中请求数据有什么区别呢?在created中,页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态,DOM节点没出来,无法操作DOM节点。在mounted不会这样,比较好。说说你对keep-alive的理解keep-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。其有三个参数include定义缓存白名单,会缓..原创 2021-11-06 13:32:26 · 606 阅读 · 0 评论 -
数组和字符串转换 数字转换布尔类型
一、数组转字符串var a, b;a = new Array(0,1,2,3,4);b = a.join("-");二、字符串转数组var s = "abc,abcd,aaa";ss = s.split(",");// 在每个逗号(,)处进行分解。三、数字转换布尔类型//布尔值转数字let a = true a * 1 = 1 +a = 1let b = false b * 1 = 0 +b = 0//数字转布尔值let c = 1 !!c = tr原创 2021-09-24 14:34:34 · 388 阅读 · 0 评论 -
webpack5 和 webpack4 的区别有哪些 ?
一、压缩代码1.webpack4webpack4 上需要下载安装 terser-webpack-plugin 插件,并且需要以下配置:const TerserPlugin = require('terser-webpack-plugin')module.exports = { // ...other configoptimization: { minimize: !isDev, minimizer: [ new TerserPlugin({ extrac原创 2021-09-23 22:51:20 · 6535 阅读 · 0 评论 -
Vuex的使用及原理
一、Vuex 是什么?Vuex是专门为Vuejs应用程序设计的一款状态管理模式,类似于React中的Redux。它采用集中式存储管理应用的所有组件的状态。官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解:Vuex就是用来进行组件之间进行数据交换的第三方 “仓库”,组件可以把想要共享的数据存放在这里面,别的组件想要的之后直接调取即可。Vuex原理理解个人理解.原创 2021-09-22 11:50:16 · 739 阅读 · 0 评论 -
promise与async-await有什么区别
Promise链式调用相当于一个回调地狱,也不能统一处理异常。Async Await用同步的写法使得可读性更强,同时方便try catch捕获异常。Promise本身是同步函数,多个不会等待Async Await有明确的前后关系,可读性好promise和async await都是解决回调地狱的方法,promise是纵向发展形成回调链,遇到复杂的情景不美观Async Await是基于promise实现,是改良版的promise,使代码看起来更加简洁,异步代码执行像同步代码一样..原创 2021-09-19 21:19:48 · 930 阅读 · 0 评论 -
eval 是什么
eval 是全局对象上的一个函数,会把传入的字符串当做 JavaScript 代码执行。如果传入的参数不是字符串,它会原封不动地将其返回。eval 分为直接调用和间接调用两种,通常间接调用的性能会好于直接调用。直接调用时,eval 运行于其调用函数的作用域下;var context = 'outside';(function(){ var context = 'inside'; return eval('context');})();// return 'inside'..原创 2021-09-18 17:25:01 · 5187 阅读 · 0 评论 -
history与hash路由的区别
vue-router有两种模式:hash和historyhash前端路由,无刷新history 会去请求接口vue-router提供两种模式的原因:hash :hash 虽然出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。history :history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏...原创 2021-09-17 15:11:51 · 282 阅读 · 0 评论 -
vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
第一步:在components目录新建你的组件文件(smithButton.vue),script一定要export default {第二步:在需要用的页面(组件)中导入:import smithButton from ‘../components/smithButton.vue’第三步:注入到vue的子组件的components属性上面,components:{smithButton}第四步:在template视图view中使用,问题有:smithButton命名,使用的时候则smi..原创 2021-09-16 09:02:25 · 961 阅读 · 0 评论 -
第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子原创 2021-09-16 08:50:30 · 1217 阅读 · 0 评论 -
vue你知道nextTick吗,它是干什么的,实现原理是什么?
Vue.nextTick([callback,context])在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新之后的DOMnextTick方法的实现原理 vue用异步队列的方式来控制DOM更新和nextTick回调先后执行 microtask因为其高优先级特性,能确保队列中的微任务在一次事件循环前被执行完毕 因为兼容性问题,vue不得不做了microtask向macrotask的降级方案 ...原创 2021-09-13 20:38:21 · 395 阅读 · 0 评论 -
JS 暂时性死区
ES6 规定,如果代码区块中存在 let 和 const 命令声明的变量,这个区块对这些变量从一开始就形成了封闭作用域,直到声明语句完成,这些变量才能被访问(获取或设置),否则会报错ReferenceError。这在语法上称为“暂时性死区”(英temporal dead zone,简 TDZ),即代码块开始到变量声明语句完成之间的区域。1、通过var声明的变量拥有变量提升、没有暂时性死区,作用于函数作用域:当进入变量的作用域(包围它的函数),立即为它创建(绑定)存储空间,立即被初始化并被赋...原创 2021-09-12 20:58:33 · 1784 阅读 · 0 评论 -
使用iframe的优缺点
iframe的优点:1.iframe能够原封不动的把嵌入的网页展现出来。2.如果有多个网页引用iframe,那么只需要修改iframe的内容,就可以实现调用每一个页面的更改,方便快捷。3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe嵌套,可以增加代码的可重用。4.如果遇到加载缓慢的第三方内容,如图标或广告,这些问题可以由iframe来解决。5.iframe会堵塞主页面的Onload事件。6.iframe和主页面共享连接池,而浏览器对相同域的连接原创 2021-09-10 18:48:10 · 708 阅读 · 0 评论 -
vue/react: 父组件中请求数据好?还是子组件中请求数据好?
1、如果现在有一个父组件,3个子组件。 每个组件展示的数据不同,现在有2种数据获取方式。第一种,在父组件中获取所有的数据,然后使用props传递给每个子组件。第二种:各个子组件中获取各自的数据。 、你觉得哪种好?为什么?答:根据实际业务来如果数据其他组件用不到,那么可以由子组件自己获取如果数据可能被同级组件 复用 共享那么由父组件统一获取然后分发下去如果数据可能被跨级组件 复用 共享那么你需要vuex 或者eventshub 统一分发至不同级别的组件子组件复用率高或...原创 2021-09-10 18:10:24 · 1295 阅读 · 0 评论 -
let const var 区别
var 具有变量提升,let,const没有var 可以重复声明,let,const不会var 不具备块级作用域,会造成变量穿透,let,const具有块级作用域(for,if都是),不会造成穿透let,const会造成暂时性死区let 在最外层作用域声明的变量同样不属于全局变量,即无法使用window.xx来获取varvar只有函数作用域,没有块作用域,可以声明全局/局部变量(在一共函数内声明的变量,只在该函数有效) var定义的变量不能跨函数访问,但是可以跨块访问! var 定.原创 2021-09-10 13:23:06 · 541 阅读 · 0 评论 -
引入的js文件的执行顺序
【1】同层级:不同的<script>块,<script>块间的执行顺序为从上到下;个人认为,只有第一个<script>块的所有层级的js代码执行完了,才开始执行下一个<script>块。【2】不同层级:比如通过document.write("<script src=*.js></script>")的形式,在1.js中引用2.js文件的情况下,先执行上层级别的(1.js中的)代码块,再执行子层级2.js中的代码。但是非引用外.原创 2021-09-10 13:07:07 · 1592 阅读 · 0 评论 -
margin重叠,塌陷,穿透问题的解决
margin塌陷问题解决(1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合 (可以设置成透明:border: 1px solid transparent)(2)为父盒子添加overflow: hidden;(3)为父盒子设定padding值;(4)为父盒子添加position:fixed;(5)利用伪元素给子元素的前面添加一个空元素.box1:before{ content:""; overflow:hidden; }原创 2021-09-08 10:30:51 · 1781 阅读 · 0 评论 -
vue路由传参的三种方式
方法一:params传参:this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id}}) //这个组件对应的路由配置{ //组件路径 path: '/admin', //组件别名 name: 'admin', //组件名 component: Admin,}原创 2021-09-08 10:12:17 · 686 阅读 · 0 评论 -
什么是BFC?
1.BFC到底是什么东西BFC 全称:Block Formatting Context, 名为 "块级格式化上下文"。W3C官方解释为:BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context提供了一个环境,HTML在这个环境中按照一定的规则进行布局。简单来说就是,BFC是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢,BFC可以看做是一个CSS元素属性2.怎原创 2021-09-07 16:58:38 · 3464 阅读 · 0 评论 -
数组遍历的方法
1. for 循环let arr = [1, 2, 3]for(let i = 0; i < arr.length; i++){ console.log(arr[i]) }2. forEach 方法const arr1 = [1, 2, 3, 4, 5]; //声明数组arr1.forEach(function(item) { console.log(item) //item为每一项,不是每一项的索引(切记)})//使用箭头函数arr1.forEa原创 2021-09-07 16:07:46 · 1371 阅读 · 0 评论 -
vue响应式原理
vue响应式原理vue响应式也叫作数据双向绑定,大致原理阐述: 首先我们需要通过Object.defineProperty()方法把数据(data)设置为getter和setter的访问形式,这样我们就可以在数据被修改时在setter方法设置监视修改页面信息,也就是说每当数据被修改,就会触发对应的set方法,然后我们可以在set方法中去调用操作dom的方法。 此外,如果页面有input用v-model绑定数据,我们需要在这种绑定了data的input元素上添加监听,添加input事件监听,每.原创 2021-09-07 15:14:48 · 31688 阅读 · 1 评论 -
路由守卫中在beforeRouteEnter 中怎么拿到组件数据
在 vue 项目中,经常需要通过判断从不同的页面进入,显示不同的内容,beforeRouteEnter非常好判断从哪个路由进去,但在这里面因为获取不到this,操作不了data中的数据,即使我们知道是从哪个路由进入,也没法对他进行差异化的操作。在官方文档中,beforeRouteEnter在渲染该组件的对应路由被confirm前调用不能获取组件实例this因为当前守卫执行前,组件实例还没被创建。beforeRouteEnter(to, from, next) { //...转载 2021-09-07 12:01:21 · 2068 阅读 · 0 评论 -
延时加载的方式哪些
JS延迟加载:也就是**等页面加载完成之后再加载 JavaScript 文件。js的延迟加载有助与提高页面的加载速度。一般有以下几种方式:defer 属性 async属性 动态创建DOM方式 使用jquery的getScript方法 使用settimeout延迟方法 让js最后加载。1、defer属性用途:表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕之后再执行。HTML 4.01 为<script>标签定义了defe..原创 2021-09-05 10:51:13 · 802 阅读 · 0 评论 -
万恶的前端内存泄漏及解决方案
什么是内存泄漏系统进程不再用到的内存,没有及时释放,就叫做内存泄漏内存溢出:指程序在申请内存时,没有足够的内存空间供其使用。(就是内存不够用了)引起内存泄漏的原因1、意外的全局变量由于 js 对未声明变量的处理方式是在全局对象上创建该变量的引用。如果在浏览器中,全局对象就是 window 对象。变量在窗口关闭或重新刷新页面之前都不会被释放,如果未声明的变量缓存大量的数据,就会导致内存泄露。未声明变量function fn() { a = 'global varia.原创 2021-09-05 10:39:40 · 1127 阅读 · 0 评论 -
事件捕获、事件冒泡以及事件代理
通常,我们将这种事件流向分为三个阶段:捕获阶段,目标阶段,冒泡阶段。捕获阶段是指事件响应从最外层的Window开始,逐级向内层前进,直到具体事件目标元素。在捕获阶段,不会处理响应元素注册的冒泡事件。 目标阶段指触发事件的最底层的元素,如上图中的。 冒泡阶段与捕获阶段相反,事件的响应是从最底层开始一层一层往外传递到最外层的Window。 DOM事件流的三个阶段是先捕获阶段,然后是目标阶段,最后才是冒泡阶段。我们时常面试所说的先捕获后冒泡也由此而来。事件代理就是利用事件冒泡或事件捕获...原创 2021-09-05 10:16:40 · 278 阅读 · 0 评论 -
vue全家桶和react全家桶都包含哪些
vue全家桶:vue + vuex (状态管理) + vue-router (路由) + vue-resource +axios +elementuireact全家桶 : react + redux(状态管理) +react-router(路由) + axios + antd || antd-model原创 2021-09-04 09:51:45 · 289 阅读 · 0 评论 -
虚拟 DOM 实现原理?
虚拟 DOM 的实现原理主要包括以下 3 部分:用 JavaScript 对象模拟真实 DOM 树,对真实 DOM 进行抽象; diff 算法 — 比较两棵虚拟 DOM 树的差异; pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。...原创 2021-09-02 14:29:37 · 438 阅读 · 0 评论 -
Vue中的异步组件
异步组件是 vue 的一种新能优化的方法,比如可以运用在首屏加载等等场景。使用过vue 都知道Vue自定义组件,和组件引入方式。下面介绍vue 组件的三种引入方式。 传统引入方式,即最常见的引入方式 这是使用本地注册的方式将组件引入,在项目初始加载时,组件就被引入、使用、加载.当项目越来越大的时候,就需要考虑速度性能的问题,显然上面的方法是不合理的,这就需要用下面的两种方法了 import leftLine from "@/views/admanage/components..原创 2021-09-02 12:06:37 · 450 阅读 · 0 评论 -
vue中data为什么是函数而不是对象
vue组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的.基于这一理念,组件每复用一次,data数据就会被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响。总结:如果data是对象的话,每当被复用是,复用的对象和源对象都会指向同一个内存地址(浅拷贝),互相之间相互影响,所以要是函数1、函数<template> <di.原创 2021-09-02 11:44:52 · 788 阅读 · 0 评论 -
map 和 forEach 的区别
相同点:1.都是循环遍历数组中的每一项2.forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item(当前每一项)、index(索引值)、arr(原数组)3.匿名函数中的this都是指向window4.只能遍历数组不同点:forEach(): 没有返回值,改变原数组map(): 有返回值,返回新的数组,原数组不变.用途:forEach(): 不改变数据,只是用数据做一些事情map(): 你需要返回一个新数组打断问题:map和forE..原创 2021-09-01 14:38:27 · 398 阅读 · 0 评论 -
JS 对象数组获取指第五个元素
数组中有指定idvar result= arr.find( function (obj) { f (obj.id== "5") { return obj; } });数组没有指定slice() 方法 tmpArr.slice(start,end)(1) start: 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。(2.原创 2021-08-29 15:45:37 · 1148 阅读 · 0 评论 -
如何把二维数组放到一维数组,一维数组放到二维数组
一维数组放到二维数组var list = [1,2,3,4,5,6,7,8,9,10];function pages (list) { const pages = [] list.forEach((item, index) => { const page = Math.floor(index / 8) if (!pages[page]) { pages[page] = [] } pages[p原创 2021-08-27 22:57:05 · 3426 阅读 · 0 评论