位置: IT常识 - 正文
2022年前端Vue常见面试题大全（三万长文）持续更新...(vue前端常见面试题)
编辑：rootadmin目录
1.Vue和React有什么不同？使用场景分别是什么？
2.axios是什么？怎么使用它，怎么解决跨域？
3.说说Vue，React，angularjs，jquery的区别
4.什么阶段（生命周期）才能访问操作dom？为什么
5.组件中的data为什么是个函数？
6.说一说scoped样式隔离
7.v-if与v-show的区别？
8.什么是MVVM？
9.Vue修饰符有哪些？
10.函数式组件使用场景和原理
11.能说下 vue-router 中常用的路由模式实现原理吗？
12.GET和POST的区别
14.跨域的方法
15.Vue组件通信有哪些方式
16.Vue的优点是什么？
17.vue-loader是什么 ？使用它的用途有哪些？
18.你的接口请求一般放在哪个生命周期中？
19.说一下指令v-el的作用是什么？
20.说几种如何实现vue首屏加载优化的
21.请说出vue.cli项目中src目录每个文件夹和文件的用法？
22.$route和$router的区别
23.对于vue3.0特性你有什么了解吗？
24.虚拟DOM的优缺点
25.虚拟DOM实现原理
26.直接给一个数组项赋值，Vue能检测到变化吗？
27.简述原型与原型链，原型链的作用有哪些？
28.普通函数，箭头函数的区别
29.怎样理解Vue的单向数据流？
30.vue-router是什么？有哪些组件？
31.Vuex解决了什么问题？
32.什么时候用Vuex
33.Vuex中状态存储在那里？怎么改变它
34.Vue和JQuery的区别在哪？为什么放弃JQuery用Vue？
35.slot插槽
36.v-if和v-for为什么不建议一起使用？
37.vue初始化页面闪动问题 什么原因 怎么解决？
38.Vue的两个核心点
39.什么是闭包，用途有哪些？
40.组件间的通讯
41.Promise的作用
42.map与set的区别
43.构造函数与普通函数的区别
44.hash与history的区别
45.vue常用指令？
46.Vue父子组件的生命周期顺序
47.vue-router路由的两种模式
48.vue 中 keep-alive 组件的作用
49.v-show和v-if指令的共同点和不同点
50.Vue.extend 作用和原理
51.异步同步
52.Vue.set 方法原理
53.不用Vuex会带来什么问题？
54.对SSR有了解吗，它主要解决什么问题？
55.SSR优缺点？
56.Vuex 为什么要分模块
57.Vuex 页面刷新数据丢失怎么解决？
58.nextTick 使用场景和原理
59.页面渲染为什么使用 key？
60.VNode 是什么？虚拟 DOM 是什么？
61.setup组合api的优点
62.辅助函数的实现
63.Vuex响应式
64.Vue项目性能优化
65.vue-router 路由模式有几种？
66.vue生命周期钩子函数有哪些？
67.Vue. js有什么特点？
68.axios是什么？如何使用它？
69. 如何在 Vue. js中循环插入图片？
70.如何解决数据层级结构太深的问题
71.如何让CSS只在当前组件中起作用？
72.vue-router 是什么?它有哪些组件
73.在哪个生命周期内调用异步请求？为什么？优点？
74.computed 和 watch 的区别和运用的场景？
75.Vue 的父组件和子组件生命周期钩子函数执行顺序？
76.v-model 的原理？
77.vuex有哪几种属性
78.vuex 的 getter 特性是什么
79.vue2.x中如何监测数组变化
80.可以被vue拦截到的数组方法以及不能被拦截到的数组方法？
81.谈谈单页面（SPA）的理解？
82.谈谈你对 Vue 生命周期的理解？
83.Class 与 Style 如何动态绑定？
84.vue-router 路由钩子函数是什么？
85.Vue3.0 和 2.0 的响应式原理区别
86.axios和ajax的区别：
87.vue中解决跨域问题
88.vue的原理
89.watch、methods 和 computed 的区别?
90.webpack有哪些优点？
91.Vue生命周期钩子是如何实现的
92.Vue的双向数据绑定原理是什么？
93.在webpack中，为什么要打包发布？
94.路由守卫
95.SPA首屏加载速度慢的怎么解决？
96.Vue初始化过程中（new Vue(options)）都做了什么？
97.对MVVM的理解？
98.Vue数据双向绑定原理
99.Vue的响应式原理
100.Vue3.x响应式数据原理
101.Vue3.0 里为什么要用 Proxy API替代 defineProperty API？
102.Proxy 与 Object.defineProperty 优劣对比
103.vue中组件的data为什么是一个函数？而new Vue 实例里，data 可以直接是一个对象
104.vue中data的属性可以和methods中方法同名吗，为什么？
105.vue中created与mounted区别
106.Vue中computed与method的区别
107.虚拟DOM中key的作用
108.用index作为key可能会引发的问题
109.Vue中watch用法详解
110.vue中对mixins的理解和使用
111.为什么vue采用异步渲染
112.Vue 的异步更新机制是如何实现的？
113.$nextTick的理解
114.vue的自定义指令
115.你有写过自定义指令吗？自定义指令的应用场景有哪些？
116.vue为什么在 HTML 中监听事件？
117.Vue.set 改变数组和对象中的属性
118.vm.$set(obj, key, val) 做了什么？
119.第一次页面加载会触发哪几个钩子？
120.vue-router有几种钩子函数？
121.vue-router路由跳转方式
122.Vuex是什么？怎么使用？
123.Vuex和单纯的全局对象有什么区别？
124.为什么 Vuex 的 mutation 中不能做异步操作？
125.Vue项目前端开发环境请求服务器接口跨域问题
126.做过哪些Vue的性能优化？
127.Vue中的插槽
128.v-for 为什么要加上 key
129.Vdom的理解（虚拟DOM）
130.vue 的缺点
131.vue 和 react 区别
132.slot插槽种类以及原理
133.template 模板引擎的渲染过程
134.Vue.use是做什么的，原理是什么
135.组件中写 name 选项有哪些好处
136.data 里面数据量比较大如何优化
137.子组件里面可以修改父组件的值吗
138.生命周期钩子是如何实现的
139.vue 是怎么检测数组的变化的
140.vue 组件渲染和更新的过程
141.vue 为什么要使用异步组件
142.vue 如何快速定位那个组件出现性能问题的
143.v-html 会导致那些问题
144.v-el作用
145.说说vue的动态组件
146.怎么定义vue-router的动态路由？怎么获取传过来的值？
147.自定义指令
1.Vue和React有什么不同？使用场景分别是什么？vue是双向绑定react没有数据双向绑定，react是单向数据流
推荐整理分享2022年前端Vue常见面试题大全（三万长文）持续更新...(vue前端常见面试题)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:2021web前端vue经典面试题,2021vue前端经典面试题,vue前端常见面试题,vue前端面试题2021及答案,vue前端实战,vue前端实战,2019前端vue面试题及答案,vue前端面试题2021及答案,内容如对您有帮助，希望把文章链接给更多的朋友！
使用场景：
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): 通用/最本质的发任意类型请求的方式axios(url[, config]): 可以只指定 url 发 get 请求axios.request(config): 等同于 axios(config)axios.get(url[, config]): 发 get 请求axios.delete(url[, config]): 发 delete 请求axios.post(url[, data, config]): 发 post 请求axios.put(url[, data, config]): 发 put 请求axios.defaults.xxx: 请求的默认全局配置axios.interceptors.request.use(): 添加请求拦截器axios.interceptors.response.use(): 添加响应拦截器axios.create([config]): 创建一个新的 axios(它没有下面的功能)axios.Cancel(): 用于创建取消请求的错误对象axios.CancelToken(): 用于创建取消请求的 token 对象axios.isCancel(): 是否是一个取消请求的错误axios.all(promises): 用于批量执行多个异步请求axios.spread(): 用来指定接收所有成功数据的回调函数的方法3.说说Vue，React，angularjs，jquery的区别JQuery与另外几者最大的区别是JQuery是事件驱动，其他两者是数据驱动JQuery业务逻辑和UI更该混在一起，UI里面还参杂着交互逻辑，让本来混沌的逻辑更加混乱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.meta5.鼠标按钮修饰符：
.left.right.middle10.函数式组件使用场景和原理函数式组件与普通组件的区别：
函数式组件需要在下一篇：3D人体骨架检测（mediapipe）(3d人体骨骼模型软件)
