Web前端开发常见面试题总结
时间：2023-07-02 17:03:02 | 来源：网站运营
时间：2023-07-02 17:03:02 来源：网站运营
Web前端开发常见面试题总结：简述清除浮动的几种方式。
请描述一下 cookies、sessionStorage、localtorage区别。
常见的HTTP的状态码。
css的选择器有哪些。
css优化、提高性能的方法有哪些？
margin和padding分别适合什么场景使用。
什么是闭包，为什么要使用闭包？
Ajax是什么？如何创建一个Ajax？
同步和异步的区别。
Vue中的v-if和v-show有什么区别？
Vue的双向数据绑定原理是什么？
Vue的指令有哪些？
Vuex是什么？有那几种属性？
Vue之间的组件传值。
路由懒加载。
get和post的区别。
v-for中key的作用是什么？
什么是路由守卫？
vue-router的路由模式有几种？
Vue组件中data为什么是一个函数？
Vue-loader是什么？
谈谈你对vue生命周期的理解。
谈谈你对keep-alive的理解。
虚拟Dom的实现原理。
computed和watch的区别
路由的导航钩子
路由跳转的四种方式
什么是回调函数
异步请求在哪个周期发起
vuex和本地存储的区别
vue插槽
axios和ajax的区别
vue的src目录详解
vue的常用修饰符
webpack创建打包
1.介绍一下项目
2.介绍一下vueX
前端存储的值，当页面更新的时候，刷新这个值会保留吗？
3.vue的指令都有那些？
4.v-if和v-show的区别？
5.vue组件之间的传值通过什么方式？
6.当gitpor的时候，文件产生了冲突，如何如何拉取代码？
7.vue封装组件的过程？
8.vue的生命周期
9.和后端交互，Ajax请求一般在哪个生命周期中进行请求】
10.Vuex是一个用来管理组件之间通信的插件
【让自己介绍了一下上个项目；
说一下axios和ajax的区别，有关promise同时发送两个请求如何实现、如何从一个页面把滚动条的位置发送到另一个页面；
客户端渲染和服务器渲染；
没耐心的朋友想领取更多面试题及解析答案请戳下方链接，或直接关注公粽号：程序员子木 3.盒子模型.
1、W3C标准盒子模型
2、IE盒子模型
1.说一下你在项目中遇到的技术难点，并且是如何解决的
2.js的基本数据类型
3.如果要你自己封装一个级联选择框，你会封装哪些属性
4.跨域问题
1.小程序的传参方法有哪几种
2.你使用过哪些方法，来提高微信小程序的应用速度
3.请谈谈小程序的生命周期
4.微信小程序的跳转方式
5.你在开发微信小程序的时候遇到的问题
6.如何使用vuex保存自己想要的数据，删除不需要的数据
7.除了属性绑定和vuex，还可以使用什么方式进行父子通信
8.cookie和localStorage的区别，以及cookie不设置时间的问题
9.怎样用微信小程序实现H5的一些特性
10.路由的哈希模式和history模式
11.微信小程序，如何做背景图片
12.微信小程序页面栈的问题
13.微信小程序关于授权的系列问题】
1.最近项目介绍
2.flex布局
3.自适应原理
4.js中数组求和了解几种
5.watch 和 computed methods的区别
1.vue前端开发流程
3.权限问题（axios请求响应拦截）
4.数据双向绑定原理
5.项目优化】
vuex 一般在什么场景下使用
引进组件的步骤
如何阻止事件冒泡
简述清除浮动的几种方式。
父级div定义height
结尾处加空div标签clear：both
父级div定义伪类：after和zoom
父级div定义overflow：hidden 超出盒子部分会被隐藏，不推荐使用
请描述一下 cookies、sessionStorage、localtorage区别。
cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。Cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不能持久保存；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久保存数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
常见的HTTP的状态码。
1）200-请求成功
2）301-资源(网页等)被永久转移到其它URL
3）400-客户端请求的语法错误，服务器无法理解
4）401-请求要求用户的身份验证
5）404-请求的资源(网页等)不存在
6）500-内部服务器错误
css的选择器有哪些。
标签选择器
类选择器
Id选择器
全局选择器
组合选择器
继承选择器
css优化、提高性能的方法有哪些？
合并css文件
减少css嵌套，最好不要套三层以上
不要再id选择器前面进行嵌套
建立公共样式类，把相同样式提取出来作为公共类使用
巧妙运用css的继承机制，如果父节点定了，子节点就无需定义
拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里
Gzip压缩
margin和padding分别适合什么场景使用。
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔
margin用来布局分开元素，使得元素与元素之间互相不影响
padding用来布局元素与内容之间的间隔，让内容与元素之间有一段空间
使用margin的场景：
若需要在border外侧添加空白时
空白处不需要背景(色)时
使用padding的场景：
不要再border内侧添加空白时
空白处需要背景(色)时
什么是闭包，为什么要使用闭包？
闭包本质上就是将函数内部和函数外部连接起来的一座桥梁，它最大的用处有两个，一是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
闭包避免了使用全局变量，此外，闭包允许将函数与其操作的某些数据(环境)关联起来。
Ajax是什么？如何创建一个Ajax？
Ajax即异步的JavaScript和xml，是一种用于创建快速动态网页的技术；传统的网页(不适用ajax)如果需要更新内容，必须重载整个网页，使用ajax则不需要加载更新整个网页
创建ajax的基本步骤：
创建XML httpRequest对象，即创建一个异步调用对象；
创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
设置相应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JavaScript和DOM实现局部刷新
同步和异步的区别。
同步，就是发出一个功能调用时，在没有得到结果之前，该调用就不返回或继续执行后续操作。这时程序时阻塞的，只有接收到返回的值或消息后才往下执行其他的命令。
异步，与同步相对，当一个异步过程调用发出后，调用者在没有得到结果之前，就可以继续执行后续操作。当这个调用完成后，一般通过状态、通知和回调来通知调用者。
Vue中的v-if和v-show有什么区别？
共同点：v-if和v-show都可以动态显示DOM元素
v-if比v-show的优先级更高
区别：
1.手段：
v-if是动态的向Dom树内添加或者删除DOM元素
v-show是通过设置DOM元素的display样式属性控制显示和隐藏
2.编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听子组件
v-show只是简单的基于css切换
3.编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译
v-show是在任何条件下都被编译，然后被缓存，而且DOM元素保留
4.性能消耗：
v-if有更高的切换消耗
v-show有更高的初始渲染消耗
5.使用场景：
v-if适合运营条件不大可能改变
v-show适合频繁切换
Vue的双向数据绑定原理是什么？
Vue.js是采用数据劫持结合发布者-订阅者，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
首先我们需要对数据进行劫持监听，所以我们需要先设置实现一个监听器Observer，用来劫持并监听所有的属性，一旦属性发生变化，就通知订阅者
然后我们需要设置一个订阅者Watcher，用来接收属性变化的一个通知并执行相应的函数，从而更新视图
最后设置实现一个解析器Compile，用来可以扫描和解析每个节点的相关指令，然后初始化相应的模板数据以及订阅者。
Vue的指令有哪些？
v-model、v-bind、v-on、v-if、v-for、v-show、v-text
Vuex是什么？有那几种属性？
Vuex是一个专为vue.js应用程序开发的状态管理模式
state：vuex的基本数据，用来存储变量
getter：从基本数据(state)派生的数据，相当于store的计算属性；getter的返回值会根据它的依赖被缓存起来，且只有当它的以来至发生了改变才会被重新计算
mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)
action：和mutation的功能大致相同，不同之处在于1、action提交的是mutation，而不是直接变更状态；2、action可以包含任意异步操作
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，管理更为方便
Vue之间的组件传值。
父传子：父传子的实现方式就是通过props属性，子组件通过props属性接受父组件传过来的值，而父组件传值的时候使用v-bind将子组件中预留的变量名绑定为data里面的数据即可
子传父：子传父的实现方式就是用了this.$emit来遍历getData时间，首先用按钮来触发setData事件，在setData中用this.$emit来遍历getData事件，最后返回this.msg
非父子：vue中没有直接子对子传参的方法，如果一定需要子对子传参，可以先传到父组件，再传到子组件(相当于一个公共的bus文件)
路由懒加载。
懒加载即组件并非一次性全部加载，而是需要时再加载，也叫“按需加载”
当一个vue项目很大的时候，对于一些“暂时”用不到的组件，我们可以不进行加载，等到用到此组件时再加载。这样可以优化spa应用首次加载白屏情况
常见的懒加载方式有两种：即ES中的import和vue异步组件
没耐心的朋友想领取更多面试题及解析答案请戳下方链接，或直接关注公粽号：程序员子木 未使用懒加载
使用ES中的import进行懒加载(最常用的)
使用vue中的异步组件进行懒加载
get和post的区别。
url可见性：
get参数url可见；posturl参数不可见
数据传输上：
get通过拼接url进行传递参数；post通过body体传递参数
缓存性：
get请求可以缓存；post请求不可以缓存
后退页面的反应：
get请求页面后退时不产生影响；post请求页面后退时，会重新提交请求
传输数据的大小：
Get一般传输数据大小不超过2k-4k；post请求传输数据的大小根据php.ini配置文件设定，也可以无限大
v-for中key的作用是什么？
Key属性可以用来提升v-for渲染的效率。使用v-for的时候，vue需要给每个元素添加一个key属性，这个key属性是唯一的，可以避免数据混乱的情况出现，vue列表进行渲染的时候，就不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去
什么是路由守卫？
一般用在登录页面后是否允许访问某个页面，没有登录就不允许访问。如果用户没有登录，但是直接通过url访问特定页面，就需要重新导航登录页面，多数用于判断token是否在这个需要重新导航的页面，这就路由守卫：router.beforEach()
vue-router的路由模式有几种？
vue-router有三种路由模式：hash，history，abstract
hash：使用url hash值来做路由。支持所有浏览器
实现原理：早期的前端路由的实现就是基于location.hash来实现的，location.hash得知救赎url中的#后面的内容
history：依赖HTML5 history PAI和服务器配置
实现原理：HTML5提供了history API来实现url的变化
abstract：支持所有JavaScript运行环境，如Node.js服务器端，如果发现没有浏览器的API，路由会自动强制进入这个模式
Vue组件中data为什么是一个函数？
Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；
JavaScript只有函数构成作用域(注意理解作用域，只有函数的{}构成作用域，对象的{}以及if(){}都不构成作用域)，data是一个函数时，每个组件实力都有自己的作用域，每个实例相互独立，不会互相影响
Vue-loader是什么？
基于webpack的一个loader，解析和转换.vue文件，提取出其中的逻辑代码script、样式代码style、以及HTML模板template，再分别把它们交给对应的Loader去处理
谈谈你对vue生命周期的理解。
Vue实例从创建到销毁的过程，就是生命周期。详细来说就是从开始创建、初始化数据、编译模板、挂载dom、渲染—>更新—>渲染、卸载等一系列过程
beforeCreate--create—beforeMount--mounted—beforeUpdate—updated—beforeDestory--destroved
谈谈你对keep-alive的理解。
Keep-alive是vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会渲染成一个DOM元素
虚拟Dom的实现原理。
为什么要用：
直接操作DOM引发页面重排重绘，频繁操作会造成频繁渲染，非常消耗性能；我们希望的是每次修改能够只修改我们想要修改的DOM而不是重新渲染所有的DOM
1） 将DOM树转换成JS对象树，产生第一个虚拟DOM树（与真实DOM树一样）
2） 数据发生变化时（当你有增删操作）产生第二个虚拟DOM树
3） diff算法逐层比较两个虚拟DOM树并标记增删操作（不会渲染）
4） 将标记出来的差异（虚拟节点）应用到真正的 DOM 树，而不是将整个虚拟DOM树覆盖到真正的DOM树上
computed和watch的区别
计算属性computed：
支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步缓存操作时无效，无法监听数据的变化
Computed的属性值会默认缓存计算属性是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
监听属性watch：
不支持缓存，数据变，直接会触发相应的操作
Watch支持异步
监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值
当一个属性发生变化时，需要执行对应的操作
路由的导航钩子
主要用来拦截导航，让其完成跳转或者取消跳转
全局钩子：beforeEach、afterEach(after钩子没有next方法，不能改变导航)
路由跳转的四种方式
router-link
this.$router.push()
this.$router.replace()
this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数
什么是回调函数
函数指针的调用，即是一个通过函数指针调用的函数
回调函数是一段可执行的代码段，它作为一个函数传递给其他的代码，因此函数是在需要的时候方便调用这段(回调函数)代码
异步请求在哪个周期发起
一般在created里面就可以，如果涉及到需要页面加载完成之后的操作的话就用mounted
Created阶段的优势是：请求时间比较早，页面loading时间相对较短
Mounted阶段的优势是：页面已经渲染完成，如果想请求之后进行dom操作的话，必须在mounted阶段发起请求
vuex和本地存储的区别
vuex存的是状态，存储在内存，localstorage是浏览器提供的接口，让你存的是文件，以文件的形式存储在本地
vuex用于组件之间的传值，localstorage则主要用于页面之间的传值
正向代理和反向代理
正向代理：
用户发送请求到自己的代理服务器
自己的代理服务器发送请求到服务器
服务器将数据返回到自己的代理服务器
自己的代理服务器再将数据返回给用户
反向代理：
用户发送请求到服务器
反向代理服务器发送请求到真正的服务器
真正的服务器将数据返回给反向代理服务器
反向代理服务器再将数据的返回给用户
vue插槽
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填充任何模块代码，如HTML、组件等，填充的内容会替换子组件的<slot></slot>标签
axios和ajax的区别
axios是通过promise实现对ajax技术的一种封装，就像jquery实现ajax封装一样。
ajax技术实现了页面的局部数据刷新，axios实现了对ajax的封装。axios是ajax，ajax不止axios。
vue的src目录详解
assets：放置静态资源
components：放置通用模块组件
http：放置与后台api相关的文件
pages：放置主要页面的组件
router：放置路由设置文件，指定路由对应的组件
store：放置vuex需要的状态关联文件，设置公共的state、mutations等
app.vue：入口组件，pages里的组件会被插入此组件中，此组件再插入index.html文件里，形成的单页面应用
main.js：入口js文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等
vue的常用修饰符
.once 事件只触发一次
.native 绑定在组件上 点击组件触发事件
.stop 阻止事件冒泡
.prevent 阻止默认事件
.capture 在事件捕获阶段触发
.self 事件只有在本身元素触发
.lazy 使input事件变成change事件
. trim 过滤首尾空白字符
.number 规定只能输入数字
webpack创建打包
创建：vue init webpack xxx
启动： npm run dev
打包：npm run build
一般如果对方提出让介绍一下项目，我们就挑一个最熟悉的去回答即可 并且问简历上前两个项目的概率会大一点
所以熟悉简历 最好有方向！！！ 以下内容是以往客户面试的总结万变不离其宗 可以结合以下总结以及自己简历上的项目来复习
1.介绍一下项目
2.介绍一下vueX
Vuex是一个专为Vue.js应用程序开发的状态管理模式。
前端存储的值，当页面更新的时候，刷新这个值会保留吗？
1、页面跳转后将数据存在vuex里面
2、在当前页面刷新页面得时候将值存到sessionStroage里面
3、注意：在改变vuex里面值得时候要删除sessionStroage里面得数据，从新存储
在vuex得Mutation里面删除sessionStroage里面得数据；
3.vue的指令都有那些？
v-if v-for v-show v-on v-bind
4.v-if和v-show的区别？
1. v-show
不管初始的条件是什么，元素总是会被渲染，并且只是简单的基于 CSS display: none 或者 display: block 的属性进行切换。
2. v-if
会根据初始的条件（data里自己的定义的数据）来进行真正的渲染（组件真正的销毁和重建），
如果条件为真，才会开始渲染条件块，如果条件为假，则不会渲染条件块。
没耐心的朋友想领取更多面试题及解析答案请戳下方链接，或直接关注公粽号：程序员子木 5.vue组件之间的传值通过什么方式？
父传子
方法：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数props接收即可。
子传父
方法：子组件通过vue实例方法$emit进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理。
6.当gitpor的时候，文件产生了冲突，如何如何拉取代码？
7.vue封装组件的过程？
● 首先，使用Vue.extend()创建一个组件
● 然后，使用Vue.component()方法注册组件
● 接着，如果子组件需要数据，可以在props中接受定义
● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法
8.vue的生命周期
从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
- 运行期间的生命周期函数：
beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
- 销毁期间的生命周期函数：
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
9.和后端交互，Ajax请求一般在哪个生命周期中进行请求】
Mounted created
10.Vuex是一个用来管理组件之间通信的插件
【让自己介绍了一下上个项目；
说一下axios和ajax的区别，有关promise同时发送两个请求如何实现、如何从一个页面把滚动条的位置发送到另一个页面；
axios是通过promise实现对ajax技术的一种封装，
ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
说一下经常使用的es6的新特性，结构赋值有使用过吗；
promise承诺
主要解决回调地狱 ，回调函数的嵌套。
就能够让ajax请求按照我们要求的顺序执行，也能代码不嵌套。
客户端渲染和服务器渲染；
好像是前端如何实现20条进程的问题，我也不太明白这个问题；
3.盒子模型.
把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。
盒子模型有几种模式？
1、W3C标准盒子模型
2、IE盒子模型
1.说一下你在项目中遇到的技术难点，并且是如何解决的
2.js的基本数据类型
1.JavaScript（以下简称js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；
2.js常用的基本数据类型包括undefined、null、number、boolean、string；
3.js的引用数据类型也就是对象类型Object
3.如果要你自己封装一个级联选择框，你会封装哪些属性
4.跨域问题
Vue反向代理
【
1.小程序的传参方法有哪几种
2.你使用过哪些方法，来提高微信小程序的应用速度
3.请谈谈小程序的生命周期
4.微信小程序的跳转方式
5.你在开发微信小程序的时候遇到的问题
6.如何使用vuex保存自己想要的数据，删除不需要的数据
7.除了属性绑定和vuex，还可以使用什么方式进行父子通信
8.cookie和localStorage的区别，以及cookie不设置时间的问题
9.怎样用微信小程序实现H5的一些特性
10.路由的哈希模式和history模式
11.微信小程序，如何做背景图片
12.微信小程序页面栈的问题
13.微信小程序关于授权的系列问题】
【
1.最近项目介绍
2.flex布局
3.自适应原理
4.js中数组求和了解几种
5.watch 和 computed methods的区别
计算属性：computed
computed:计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。
监听属性：Watch
methods是方法
computed 和 methods 相比，最大区别是 computed 有缓存：如果 computed 属性依赖的属性没有变化，计算属性会立即返回之前的计算结果，而不必再次执行函数。而methods里的函数在每次调用时都要执行。
watch 和 computed 相比，computed 是计算出一个属性（废话），而 watch 则可能是做别的事情（如上报数据）
1 、watch无缓存；2、watch适用于：需要在数据变化时执行异步或开销较大的操作时
【
1.vue前端开发流程
3.权限问题（axios请求响应拦截）
4.数据双向绑定原理
数据改变，试图发生改变
5.项目优化】
一、路由懒加载
二、keep-alive缓存页面
三、v-for 遍历避免同时使用 v-if
四、图片懒加载
五、第三方插件按需引入
vuex 一般在什么场景下使用
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车vuex是一种集中式状态管理模式，它按照一定的规则管理状态，保证状态的变化是可预测的。
state：定义初始化状态
getters：获取状态
mutations:设置状态
actions：异步提交mutations
modules：把状态管理模块化，各自的组件构成各自的模块
引进组件的步骤
在template中引入组件；
在script的第一行用import引入路径；
用component中写上组件名称。
vuex是怎么使用的
axios的封装，怎么封装
vue中的路由怎么配置
都用过element ui的哪些组件
————————————————
领取更多面试题及解析答案请戳下方链接，或直接关注公粽号：
程序员子木
在线咨询
