![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
面试
面试理论
外下羊.
这个作者很懒,什么都没留下…
展开
-
Vue 前端基础面试
1.vue优点?答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 kb ;简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;双向数据绑定:保留了 angular 的特点,在数据操作方面更为简单;组件化:保留了 react 的优点,实现了 html 的封装和重用,在构建单页面应用方面有着独特的优势;视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;虚拟DOM:dom 操作是非常耗费性能的, 不再使用原生的 do原创 2020-11-11 15:32:22 · 271 阅读 · 0 评论 -
Vue前端面试题总结(三十八)Vue数组中的某个对象的属性发生变化,视图不更新如何解决 详解
Vue数组中的某个对象的属性发生变化,视图不更新产生原因 :vue实现响应式渲染更新原理,在于监听data里的数据,但针对于对象、数组这类结构较深的数据无法完全监测第一种解决方式 Vue.set(val,object,val)例如:Vue.sett...原创 2020-09-21 08:17:08 · 620 阅读 · 0 评论 -
Vue前端面试题总结(三十七)什么是虚拟dom?什么是diff算法?详解
什么是虚拟dom?它是一个object对象模型 用来模拟真实的dom作用是高效的渲染页面 减少不必要的dom操作 提高渲染效率什么是diff算法?diff算法就是用JavaScript来表示一个dom树的结构然后用这个dom去构建一个真实的dom 插入到文档中当状态变更的时候 重新构造一个dom树 比较新旧dom树 记录两个dom树的差异 并且通知视图开始更新diff算法就 用来比较vdom结构的...原创 2020-09-18 18:52:39 · 1918 阅读 · 0 评论 -
Vue前端面试题总结(三十六)如何理解Object.defineProperty()方法有何作用 详解
作用:会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象参数Object.defineProperty( obj, prop, desc );obj 要在其上定义属性的对象。prop 要定义或修改的属性的名称。descriptor 将被定义或修改的属性描述符。返回值返回被操作的对象,即返回 obj 参数用途vue 通过 getter-setter 函数来实现双向绑定俗称属性挂载器专门监听对象数组变化的 Object.observe()(es7)也用到了该方法两原创 2020-09-18 08:38:58 · 413 阅读 · 0 评论 -
Vue前端面试题总结(三十五)Keep-alive的作用详解
Keep-alive的作用keep-alive 是用来缓存组件 避免多次加载相应的组件 增加性能消耗 如果频繁切换组件就需要keep-alive1.include 字符串或者正则表达式 只有名称匹配的组件会被缓存2.exclude 字符串或者正则表达式 任何名称匹配的组件都不会缓存3.max 设置最大缓存多少组件...原创 2020-09-18 08:13:33 · 1682 阅读 · 0 评论 -
Vue前端面试题总结(三十四)Vue 常用修饰符 详解
Vue提供了一些修饰符,这些修饰符在使用起来非常方便,比如阻止默认事件、冒泡等。.lazy:v-modeil不用多说,输入框改变,这个数据就会改变,lazy这个修饰符会在光标离开input框才会更新数据:.trim:输入框过滤首尾的空格:.number:先输入数字就会限制输入只能是数字,先字符串就相当于没有加number,注意,不是输入框不能输入字符串,是这个数据是数字:.stop:阻止事件冒泡,相当于调用了event.stopPropagation()方法。这个应该不需要解释:<b原创 2020-09-18 08:13:16 · 493 阅读 · 2 评论 -
Vue前端面试题总结(三十三)Vue自定义指令如何使用? 详解
什么自定义指令?指令的注册方式和过滤器,组件是一样的都是分为全局注册和局部注册1.全局注册Vue.directive('name',{})2.局部注册directive:{ name:''}然后在模块中直接使用即可Vue也提供了几种自定义指令的钩子函数bind:指令第一次绑定到元素时调用,只执行一次。inserted:被绑定的元素,插入到父节点的 DOM 中时调用。update:组件更新时调用。componentUpdated:组件与子组件更新时调用。unbind:指令与元原创 2020-09-18 08:13:02 · 3585 阅读 · 0 评论 -
Vue前端面试题总结(三十二 )Vue Key的作用 详解
Key值的作用key 值:用于管理可复用的元素。因为 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了 vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法当页面的数据发生变化时,Diff算法只会比较同一层级的节点:如果节点类型不同,直接干原创 2020-09-18 08:12:43 · 836 阅读 · 0 评论 -
Vue前端面试题总结(三十) 路由导航有几种 如何实现 详解
路由导航有几种路由分别有三种全局路由守卫组件路由守卫路由独享守卫什么是全局路由守卫全局路由守卫有两个第一个是全局前置守卫第二个是全局后置守卫router.beforeEach((to,from,next)=>{ to// 到那个页面 from //从那个页面俩 next() // 一个回调函数 )什么是组件路由守卫组件路由守卫是写在每个单独的 vue 文件里面的路由守卫什么是路由独享守卫路由独享守卫是在路由配置页面单独给路由配置的一个守卫...原创 2020-09-18 08:12:13 · 402 阅读 · 0 评论 -
Vue前端面试总结(二十九)Vue路由传参如何实现 详解
Vue路由传参路由传参分为两种query 和 params 来实现query如何实现传参通过在router-link 或者 this.$router.push() 传递原创 2020-09-18 08:11:58 · 542 阅读 · 0 评论 -
Vue前端面试题总结(二十八)Vue生命周期 详解
Vue生命周期在vue中每一个组件都是独立的 每一个组件都有自己的生命周期从创建 到数据初始化 挂载 更新 销毁 这就是一个组件的生命周期初始化- beforecreate(创建前)在组件或者实例中通过 new vue()创建出来之后会有初始化事件跟生命周期 然后执行beforeCreate钩子函数 这个时候只有一些默认的生命周期钩子和默认事件 无法访问 数据 跟 Dom- created(创建后)dom和methods已经初始化完成 这个时候已经可以使用 可以修改数据 在这个阶段一般做一原创 2020-09-18 08:11:44 · 591 阅读 · 0 评论 -
Vue前端面试题总结(二十七) 如何理解vue里的父传子 子传父 和兄弟组件传值 详解
如何父传子父组件通过import引入子组件 并且注册 在子组件标签上挂载需要传递的值 子组件通过props验证 接收接收有两种第一种是通过数组的方式 [‘要接受的属性’]第二种是通过对象的方式传递设置数据类型和值而数组只是简单的接收如何子传父子传父是通过绑定的事件触发函数 在其中的设置的this.$emit传递自定义的事件和要传递的值$emit中有两个参数 一个是要派发的自定义事件 一个是要传递的值如何兄弟组件传值创建一个空的Vue实例并且暴露出去 这个作为公共的Bus 作为兄弟组件原创 2020-09-18 08:11:32 · 688 阅读 · 0 评论 -
Vue前端面试题总结(二十六)双向数据绑定的原理 详解
Vue双向数据绑定的原理1.Vue双向数据绑定是通过 数据劫持 结合 发布订阅者 的方式来实现的 也就是说数据和视图一起更新 数据发生变化 视图也发生变化 视图发生变化 数据也发生变化2.关于双向数据绑定 其核心是object.defineProperty()方法双向绑定的核心object.defineProperty()是什么采用数据劫持结合发布者-订阅者模式的方式- Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者原创 2020-09-17 19:13:15 · 2225 阅读 · 0 评论 -
Vue前端面试题总结(二十五) props验证和默认值 详解
Props会接收不同的数据类型常用的数据类型的默认设置的写法是Number, String, Boolean, Array, Function, Objectprop 数据单项传递,父不影响子,子不影响父不能再组件中直接修改prop传递的值,Vue会发出警告...原创 2020-09-17 18:57:51 · 411 阅读 · 0 评论 -
Vue前端面试题总结(二十四)如何理解watch methods computed的区别?详解
methods computed watch的区别methods中定义的是具体的方法,根据一些特定的触发条件,调用一次执行一次,比如说点击事件computedcomputed是vue中独有的计算属性,它是基于他们的依赖进行缓存的,只有依赖发生改变,才会重新计算就算在data中没有直接声明出要计算的变量,也可以在computed中写入计算属性默认只有getter 需要的时候可以自己设置setter方法 setter默认传递一个参数,这个参数就是当前对象watchwatch的作用是监听一个值的变原创 2020-09-17 17:12:13 · 345 阅读 · 0 评论 -
Vue前端面试题总结(二十三)如何理解URL 到页面加载完成发生了什么?详解
URL到页面的加载1.DNS解析2.TPS解析(三次握手)3.发送HTTP请求4.服务器处理需要返回的数据5.浏览器解析页面6.链接结束(四次挥手)这里一般会衍生服务器状态跟三次握手和四次挥手的原理如何理解三次握手第一次握手客户端向服务器发送链接请求第二次握手服务器如果同意连接 发送应答请求第三握手当客户端收到链接同意的应答后 还要给服务器发送一个确认信息如何理解四次挥手第一次挥手客户端认为数据已经发送完成 它还要先服务器发送一个释放请求状态第二次挥手服务器收到客原创 2020-09-17 17:02:51 · 194 阅读 · 0 评论 -
Vue前端面试题总结(二十二)如何解决跨域 ?详解
如何解决跨域 ?如何产生跨域产生跨域的情况有:不同协议,不同域名,不同端口以及域名和 ip 地址的访问都会产生跨域。跨域的解决方案Jsonpjsonp如何解决跨域主要是利用创建script标签后 请求后端接口地址然后传递callback参数 后端接收callback参数后端处理完参数 返回callba函数的调用形式callba参数里面就是json优点:浏览器兼容性好缺点:只支持get请求方式代理通过前端代理 在vue中通过脚手架中的config 中 的index文件来配置原创 2020-09-17 16:48:27 · 623 阅读 · 0 评论 -
Vue前端面试题总结(二十一)什么是跨域?详解
什么是跨域?跨域就是不是同源策略什么是同源策略 就是?协议、域名、端口都相同才算是同源只要一个不是就是不算同源如何理解跨域理解跨域的概念:协议、域名、端口都相同才同域,否则都是跨域...原创 2020-09-17 16:15:51 · 306 阅读 · 0 评论 -
Vue前端面试总结(二十)Ajax是什么?如何创建Ajax ?详解
Ajax是什么?Ajax并不是一种全新的技术 全称是asychronous javascript and xml可以说是已有技术的集合主要是为了实现客户端与服务端的之间的异步通信效果实现页面的局部刷新如何创建Ajaxvar xhr =null;//创建对象if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open(“方式原创 2020-09-17 16:08:38 · 207 阅读 · 0 评论 -
Vue前端面试题总结(十九)generator 迭代器 详解
generator 迭代器generator 迭代器 作为 Es6 引入的新特性是作为一种异步解决方案 跟传统的函数是不一样的在形式上generator 函数 是一个普通的函数但是有两个特征1 . 在function关键字里面有一个星号2.在函数内部使用yield 表达式 定义不同的内部状态调用generator函数 返回一个遍历对象 必须使用next() 调用 否则不会向下执行...原创 2020-09-17 16:02:01 · 507 阅读 · 0 评论 -
Vue前端面试总结(十八)for in 和 for of 详解
为什么要使用for in 和for offor in 和for of 都是js里面的循环语句那什么时候使用for in?什么时候使用 for of?1.for infor in 循环是用来遍历数组的for in 是有条件限制的for in 循环返回的是Key值2. for offor of 是用来循环对象的循环出的是value值而且 for of 循环的不是普通的对象 必需通过 object.keys()搭配使用注意的是for of 是Es6 引入的新特性 是为了修复原创 2020-09-17 15:46:48 · 1554 阅读 · 0 评论 -
Vue前端面试题总结(十七) promise是什么?有哪些状态 详解
promise是什么?promise 主要用于异步计算用于异步操作队列化可以按照我们预期的顺序执行 和返回我们想要的结果可以在对象之前传递和操作promise 帮助我们处理队列promise 有三个状态pengding 初始状态fulfilled 操作成功rejected 操作失败当promise的状态改变后 会触发then() 里的响应函数处理promise的状态只要经过改变 就不会在改变promise的状态改变 只有两种可能从 pengding 初始状态变成 fu原创 2020-09-17 15:28:09 · 1157 阅读 · 0 评论 -
Vue前端面试题总结(十六)如何在Vue中使用promise封装思路详解
使用promise封装思路详解首先先创建三个js文件 ,分别是core.js(核心文件) config.js(配置文件) index.js(入口文件)(1)、在核心文件中首先创建一个axios实例 里面写baseURl(请求头)和超时时间 2、抛出去一个函数作用判断是get请求还是post请求 3、封装返回请求的方式,4、 在核心文件里面引入配置文件里面的请求的封装方式; (2)在配置文件中1、封装请求方式 2、封装请求路径(3)在入口文件中 1、 引入核心文件 和配置文件 2、在一个对象里面原创 2020-09-16 19:13:52 · 1696 阅读 · 0 评论 -
Vue前端面试题总结 (十五)Es6有哪些扩展详解
Es6作为Es5的升级版新增了不少语法上ES6新增的一些特性新增了块级作用域,let和const新增了class用来定义类新增了一种基本数据类型symbol,symbol表示独一无二,允许设置默认值,不能用new关键字新增了结构赋值新增了箭头函数,引入了rest参数函数允许设置默认值新增了set和map数据结构set可以用来快速去重map的特点就是key可以是任意类型新增了模块化,import导入和export导出。数组新增了一些api,如 isArray(判断是否为数组) / f原创 2020-09-16 15:30:54 · 258 阅读 · 0 评论 -
Vue前端面试题总结(十四) async/await 详解
async/awaitasync跟await是一个同步的写法 但还是异步的操作asyncasync的用法,作为一个关键字放到函数之前,表示函数是异步的函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行,async 函数返回的是一个promise 对象async function A(){ return 'hello'}console.log(A())awaitawait的含义为等待。意思就是代码需要等待await后面的函数运行完并且有原创 2020-09-16 14:26:47 · 625 阅读 · 0 评论 -
Vue前端面试题总结(十三) 解构赋值详解
解构赋值什么是解构赋值在数组跟对象中快速取到我们需要拿到的值就是分开将对应的键值拿到我们想要的数组跟对象里面 解构结构然后可以对其进行赋值解构赋值分为数组解构赋值对象解构赋值解构赋值的基本用法let [name ,age,sex] = [ '张三',22,'男']console.log(name)console.log(age)console.log(sex)数组解构赋值let [a,[b,[c,d]]] = [1,[2,[3,4]]]; a = 3conso原创 2020-09-16 10:11:50 · 1651 阅读 · 0 评论 -
Vue前端面试题总结(十二)瀑布流原理 详解
瀑布流原理很多时候我们会看到一些网站或者展示图片的网站,它们的图片明明每一张的高度大小都不同,但是却能自动地适应,排成一行一行地展示,并且下拉到底的时候,加载的图片也会自动适应,这就是瀑布流瀑布流实现1.第一排css需要我们自己来实现,使图片等宽不等高2.利用js计算出每一列图片高度最小的那一列,然后循环插入,然后继续找到下一个图片高度最小的位置,继续插入...原创 2020-09-16 09:50:37 · 457 阅读 · 0 评论 -
Vue前端面试题总结(十一)什么是图片懒加载详解
为什么要使用懒加载主要目的是作为服务器前端的优化,减少请求数或延迟请求数,为服务器减小压力实现原理先加载一部分数据,当触发某个条件时异步加载剩余数据,新得到的数据不会影响原有数据的显示,同时最大程度上的减少服务器端的资源消耗实现方式第一种是纯粹的延迟加载,使用seTimeOut或setInterval进行加载延迟第二种是条件加载,符合某些条件,或触发了某些事件才开始异步加载第三种是可视区域加载,即只加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在某用户看到某图片前一定.原创 2020-09-16 09:39:38 · 722 阅读 · 0 评论 -
Vue前端面试总结(十)sessionStorage localStorage cookie 详解
sessionStorage localStorage cookie 的区别1.生命周期Cookie:可设置失效时间,默认是关闭浏览器后失效sessionStorage:仅在当前网页会话下有效,关闭页面或浏览器后就会被清除localStorage:除非手动清除,否则永久保存2. 存放数据大小:cookie:4KB左右localStorage和sessionStorage:可以保存5MB的信息。http请求:cookie:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来原创 2020-09-16 09:11:38 · 317 阅读 · 0 评论 -
Vue前端面试题总结(九)Axios拦截详解
Axios拦截axios拦截分为请求式拦截跟响应式拦截request请求拦截器:发送请求前统一处理,如:设置请求头headers等。response响应拦截器:有时候我们要根据响应的状态码来进行下一步操作Axios请求式拦截axios.interceptors.request.use(config => { config.interceptors = '请求拦截器' return config}, function(error) { })Axios响应式拦截//原创 2020-09-16 09:05:44 · 1794 阅读 · 0 评论 -
Vue前端面试题总结(八) h5 和css3 的新特性详解
H5 新特性语义化标签:header、footer、section、nav、aside、article增强型表单:input 的多个 type新增表单元素:datalist、keygen、output新增表单属性:placehoder、required、min 和 max音频视频:audio、videocanvas 地理定位拖拽本地存储:localStorage - 没有时间限制的数据存储;sessionStorage - 针对一个 session的数据存储,当用户关闭浏览器窗口后,数据原创 2020-09-15 20:43:16 · 396 阅读 · 0 评论 -
Vue前端面试题总结 (七)事件捕获和事件冒泡
事件捕获和事件冒泡什么是事件当一个HTML元素产生一个事件时该事件会在元素节点与根节点之间的路径传播,路径所经过的节点都会收到该事件,这个传播的过程叫做DOM事件流什么是事件捕获事件捕获:事件捕获会从document开始触发一级一级往下传递,依次触发,直到真正事件目标为止什么是事件冒泡事件冒泡:事件冒泡会从当前触发的事件目标一级一级往上传递,依次触发,直到document为止...原创 2020-09-15 20:37:18 · 542 阅读 · 0 评论 -
Vue前端面试题总结(六)深拷贝和浅拷贝详解
深拷贝和浅拷贝什么是深拷贝深拷贝相对于对象方法的时候 是全部拷贝 意思就是直接复制在一份完整的对象或者方法就好比我创建了一个a 利用深拷贝 复制出了 b 但是b不会对原来的a数据有任何影响只是把原有a的值 完完整整复制到b里面 两个互不干涉 没有影响什么是浅拷贝而浅拷贝相比于深拷贝 对对象和方法则是引用将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用...原创 2020-09-15 20:19:08 · 696 阅读 · 0 评论 -
Vue前端面试题总结(四) 闭包详解
闭包什么是闭包闭包就是一个函数的返回值是另外一个函数 并且这个返回的函数调用父函数的内部变量并在外执行就形成了闭包闭包的特性函数套用函数内部函数可以直接访问外部函数的内部变量和参数变量和参数不会让垃圾回收机制回收闭包的优点变量长期驻扎在内存中允许私有成员的存在避免了全局变量的污染闭包的缺点使用不当会导致内存泄漏常驻内存 会导致内存使用量变大闭包的应用场景:通过闭包制作计数器封装私有属性方法回调函数函数防抖节流...原创 2020-09-15 19:22:22 · 1800 阅读 · 0 评论 -
Vue前端面试题总结(三) 原型和原型链详解
原型和原型链原型在JavaScript中有这么一句话万物皆可对象在声明一个函数跟对象的时候 它在声明的时候就有一个原型对象prototype这个属性指向函数的原型对象,并且这个属性是一个对象数据类型的值。而protortype 的指向是它的隐式原型 proto举个例子Person.prototype.constructor == Person;person1.__proto__ == Person.prototype;person1.constructor == Person;原型原创 2020-09-15 18:53:32 · 3433 阅读 · 9 评论 -
如何理解Vuex 的原理
在官方回答中VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。Vuex有五个核心概念: state, getters, mutations, actions, modules。 1. state:vuex的基本数据,用来存储变量 2. geeter:从基本数据(state)派生的数据,相当于state的计算属性 3. mutation:提交更新数据的方法,必须是同步的(原创 2020-08-24 09:21:26 · 241 阅读 · 1 评论 -
Vue前端面试题总结(二) 数据类型判断详解
数据类型判断我们常见的数据类型有两种基本数据类型 和 引用数据类型基本数据类型NumberStringNullBooleanundefinedSymbol(ES6新增)引用数据类型1.Object2.Array3.Date4.Function5.Error6.RegExp7.Math8.Number9.String10.Boolean11.Globle。通常判断数据的方法有四种typeofinstanceofconst原创 2020-09-15 15:36:15 · 9045 阅读 · 0 评论 -
Vue前端面试题总结 响应式布局详解(一)
1、 响应式布局如何实现我们如何理解响应式布局响应式布局是为了在开发中网站适应不同分辨率 不同设备的下提供的方法1.1 常见的响应式布局分别有1.百分比布局2.利用媒体查询(css3新增特性 @media)3.rem 响应式布局4.vw vh 响应式布局5.利用弹性盒子 Flex 布局百分比布局利用相对于父元素的设置 子元素会随着父元素的设置而改变是不是这样理解有点难到底是对于那个父元素的设置会导致根元素的改变子元素的height或width中使用百分比,是相对于子元素的直原创 2020-09-15 15:09:01 · 2305 阅读 · 0 评论 -
前端Vue基础面试精选总结
1、 响应式布局如何实现2、 数据类型判断3、 原型和原型链4、 闭包5、 js 继承6、 什么是深拷贝,浅拷贝,如何实现7、 事件冒泡,事件捕获8、 h5 和css3 的新特性9、 Axios 拦截做过哪些10、 sessionStoragelocalStorage cookie 的区别11、 图片懒加载实现原理12、 解构赋值13、 async/await14、 es6 有哪些拓展15、 请写出在vue 中使用promise 封装项目api 接口的思路?16、 promis原创 2020-09-15 09:07:10 · 677 阅读 · 0 评论