2022年前端Vue常见⾯试题⼤全（三万长⽂）持续更新
⽬录
1.Vue和React有什么不同？使⽤场景分别是什么？
vue是双向绑定
react没有数据双向绑定，react是单向数据流
使⽤场景：
react：期待构建⼤型应⽤程序，期待同时适⽤与web端和原⽣app的框架，期待最⼤的⽣态系统
vue：期待模板搭建应⽤，期待简单和能⽤就⾏的东西，期待应⽤尽可能的⼩和快
2.axios是什么？怎么使⽤它，怎么解决跨域？
是什么？
Axios 是⼀个基于 promise 的 HTTP 库，可以⽤在浏览器和 node.js 中。前端最流⾏的 ajax 请求库，
react/vue 官⽅都推荐使⽤ axios 发 ajax 请求
特点:
基于 promise 的异步 ajax 请求库，⽀持promise所有的API
浏览器端/node 端都可以使⽤，浏览器中创建XMLHttpRequests
⽀持请求／响应
⽀持请求取消
可以转换请求数据和响应数据，并对响应回来的内容⾃动转换成 JSON类型的数据
批量发送多个请求
安全性更⾼，客户端⽀持防御 XSRF，就是让你的每个请求都带⼀个从cookie中拿到的key, 根据浏览器同源策略，假冒的⽹站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是⽤户在假冒⽹站上的误导输⼊，从⽽采取正确的策略。
常⽤语法：
axios(config): 通⽤/最本质的发任意类型请求的⽅式
jquery框架面试题axios(url[, config]): 可以只指定 url 发 get 请求
<(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
: 请求的默认全局配置
quest.use(): 添加请求
sponse.use(): 添加响应
axios.Cancel(): ⽤于创建取消请求的错误对象
axios.CancelToken(): ⽤于创建取消请求的 token 对象
axios.isCancel(): 是否是⼀个取消请求的错误
axios.all(promises): ⽤于批量执⾏多个异步请求
axios.spread(): ⽤来指定接收所有成功数据的回调函数的⽅法
3.说说Vue，React，angularjs，jquery的区别
1. JQuery与另外⼏者最⼤的区别是JQuery是事件驱动，其他两者是数据驱动
2. JQuery业务逻辑和UI更该混在⼀起，UI⾥⾯还参杂着交互逻辑，让本来混沌的逻辑更加混乱
3. Angular，Vue是双向绑定，⽽React不是
4.什么阶段（⽣命周期）才能访问操作dom？为什么
在钩⼦函数mounted()中才能开始访问操作dom，因为在mounted()⽣命周期前，dom刚好渲染好，但还未挂载到页⾯，如果在这之前进⾏dom操作，将不到dom节点
5.组件中的data为什么是个函数？
因为组件是⽤来复⽤的，因为js⾥对象是引⽤关系，如果data是对象形式，那么data的作⽤域是没有隔离的，在多个⼦组件时，会被外部因素影响，如果data是⼀个函数，那么每个实例可以独⾃拥有⼀份返回对象的拷贝，组件实例之间的data属性值不会互相影响
6.说⼀说scoped样式隔离
Vue在创建组件的时候，会给组件⽣成唯⼀的id值，当style标签给scoped属性时，会给组件的html节点都加上这个id值标识，如data-v4d5aa038，然后样式表会根据这id值标识去匹配样式，从⽽实现样式隔离
7.v-if与v-show的区别？
相同点：
v-show和v-if都能控制元素的显⽰和隐藏。
不同点：
实现本质⽅法不同:v-show本质就是通过设置css中的display设置为none；控制隐藏v-if是动态的向DOM树内添加或者删除DOM元素;
v-show都会编译，初始值为false，只是将display设为none，但它也编译了;v-if初始值为false，就不会编译了总结：v-show只编译⼀次，后⾯其实就是控制css，⽽v-if不停的销毁和创建，如果要频繁切换某节点时，故v-show性能更好⼀点。
8.什么是MVVM？
model-view-viewModel(MVVM)是⼀个软件架构设计模式，能够实现前端开发和后端业务逻辑的分离，其中model指数据模型，负责后端业务逻辑处理，view指视图层，负责前端整个⽤户界⾯的实现，viewModel则负责view层和model层的交互
9.Vue修饰符有哪些？
1.事件修饰符：
stop 阻⽌事件继续传播
.prevent阻⽌标签默认⾏为
.capture 使⽤事件捕获模式，即元素⾃⾝触发的事件先在此处处理，然后才交由内部元素进⾏处理
.self 只当在event.target 是当前元素⾃⾝时触发处理函数
.once 事件将只会触发⼀次
.passive 告诉浏览器你不想阻⽌事件的默认⾏为
2.v-model的修饰符：
.lazy通过这个修饰符，转变为在change事件再同步
.number 将⾃动过滤⽤户的输⼊值转化为数值类型
.trim ⾃动过滤⽤户输⼊的⾸位空格
3.键盘事件的修饰符：
.enter 回车
.tab
.
delete 删除或回退
.esc
.space 空格
.up 上键
.down 下键
.left 左键
.right 右键
4.系统修饰符：
.ctrl
.alt
.shift
.
meta
5.⿏标按钮修饰符：
.left
.right
.middle
10.函数式组件使⽤场景和原理
函数式组件与普通组件的区别：
函数式组件需要在声明组件是指定 functional：true
不需要实例化，所以没有this，this通过render函数的第⼆个参数context来代替
没有声明周期钩⼦函数，不能使⽤计算属性，watch
不能通过$emit对外暴露事件，调⽤事件只能通过context.listeners.click的⽅式调⽤外部传⼊的事件
因为函数式组件是没有实例化的，所以在外部通过ref去引⽤组件时，实际引⽤的是HTMLElement
函数式组件的props可以不⽤显⽰声明，所以没有在props⾥⾯声明的属性都会被⾃动隐式解析为prop,⽽普通组件所有未声明的属性都解析到$attrs⾥⾯，并⾃动挂载到组件根元素上⾯(可以通过inheritAttrs属性禁⽌)
复制代码
优点：
由于函数组件不需要实例化，⽆状态，没有⽣命周期，所以渲染性能要好于普通组件
函数式组件结构⽐较简单，代码结构更清晰
使⽤场景：
1. ⼀个简单的展⽰组件，作为容器组件使⽤ ⽐如 router-view 就是⼀个函数式组件
2. ⾼阶组件—⽤于接收⼀个组件作为参数，返回⼀个被包装过的组件
11.能说下 vue-router 中常⽤的路由模式实现原理吗？
hash模式：
1. location.hash的值实际就是URL中 #后⾯的东西，它的特点在于：hash虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，
因此改变hash不会重新加载页⾯
2. 可以为hash的改变添加监听事件，每⼀次改变hash（window.location.hash）都会在浏览器的访问历史中增加⼀个记录利⽤hash的以上特点，
基于可以来实现前端路由“更新视图但不重新请求页⾯”的功能了
history模式：
利于了HTM5 History lnterface中新增的pushState()和replaceState()⽅法，这两个⽅法应⽤与浏览器的历史记录栈，在当前已有的back，forward，go的基础之上，它们提供了对历史记录进⾏修改的功能，这两个⽅法有个共同的特点：当调⽤他们修改浏览器历史栈后，虽然URL改变了，但浏览器不会刷新页⾯，这就为但也应⽤前端路由“更新视图但不重新请求页⾯”提供了基础
12.GET和POST的区别
1. get参数通过url传递，post放在request body中
2. get请求在url中传递的参数是有长度限制的，⽽post没有
3. post⽐get更安全，因为get参数都暴漏在url中，所以不能⽤来传递敏感信息
4. get请求只能进⾏url编码，⽽post⽀持多种编码⽅式
5. get请求会浏览器主动cache，⽽post⽀持多种编码⽅式
6. get请求参数会被完整保留在浏览器历史记录⾥，⽽post中的参数不会被保留
7. get和post本质上就是TCP链接，并⽆差别，但由于HTTP的规定和浏览器/服务器的限制，导致他们在应⽤过程中体现出⼀些不同
8. get产⽣⼀个TCP数据包；post产⽣两个
1. cookie数据存放在客户的浏览器上，session存放在服务器
2. cookie不是很安全，别⼈可以分析存放在本地的COOKIE进⾏COOKIE欺骗，考虑安全应该使⽤seesion
3. session会在⼀定事件内保存在服务器上，当访问增多，会⽐较占⽤你的服务器的性能，考虑到减轻服务器性能⽅⾯，应当使⽤cookie
4. 单个cookie保存的数据不能超过4k，很多浏览器都限制⼀个站点最多保存20个cookie
14.跨域的⽅法
浏览器为了安全机制，采⽤同源策略，域名，协议，端⼝号⼀致的才可以进⾏访问;
1. jsonp：是通过script标签的src属性来实现跨域的，通过src传过去⼀个函数，把数据放在函数的实参调⽤就可以拿到数据，由
于是⽤src的链接，所以jsonp只⽀持get⽅式
2. cors：改变请求头信息，客户端加：Origin：地址。服务器：Access-Control-Allow-Origin：地址.⽀持IE10以上。
3. webpack:devServer⾥配置proxy:{api:‘地址’};
4. nginx反向代理：
upstream tomcatserver{
server 192.168.72.49:8081//3.到代理服务器的ip地址进⾏请求
}
server{
listen        80;
server_name  8081.max;//1.客户端调⽤名
location / {
proxy_pass    tomcatserver;//2.到代理服务器
index  index.html  index.html;
}
}
15.Vue组件通信有哪些⽅式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。