2023，Web热门前端面试题（二）Vue篇总结，学习常见，加油年轻人

vue篇

1.v-if和v-for一起使用的弊端以及解决办法
在v-for的外层或内层包裹一个元素来使用v-if

2.v-if 和 v-show 的区别
1.**v-if：**令是通过修改元素的displayCSS属性让其显示或者隐藏
2.v-show: 指令是直接销毁和重建DOM达到让元素显示和隐藏的效果，初始值设置为false，只是将display设置为none。

v-show有更高的初始渲染开销，如果频繁的切换，用v-show好一些。
v-if有更高的切换开销，如果在运行时条件很少改变，则用v-if较好。

v-for 与 v-if 的优先级
答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

3.vue-router有两种传参方式
(1)通过在router.js文件中配置path的地方动态传递参数 eg: path: ‘/detail/:id’ 然后在组件内通过this.$route.params.id即可获取

(2).在router-link标签中传递参数
组件：< router-link >和< router-view>和< keep-alive>

4.$route和 $router的区别是什么？
router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

5.vue路由钩子函数：
总体来讲vue里面提供了三大类钩子，两种函数
1、全局钩子: beforeEach、afterEach
2、某个路由的钩子: beforeEnter 写在某个路由里头的函数，本质上跟组件内函数没有区别。
3、组件内钩子
两种函数：
1、Vue.beforeEach(function(to,form,next){}) /在跳转之前执行/
2.Vue.afterEach(function(to,form))/在跳转之后判断/

4.完整的 vue-router 导航解析流程
1.导航被触发；
2.在失活的组件里调用beforeRouteLeave守卫；
3.调用全局beforeEach守卫；
4.在复用组件里调用beforeRouteUpdate守卫；
5.调用路由配置里的beforeEnter守卫；
6.解析异步路由组件；
7.在被激活的组件里调用beforeRouteEnter守卫；
8.调用全局beforeResolve守卫；
9.导航被确认；
10…调用全局的afterEach钩子；
11.DOM更新；
12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

6.vue组件的通信
vue父组件向子组件传递数据：通过props
子组件像父组件传递事件：$emit方法

7.如何让CSS只在当前组件中起作用？
在组件中的style前面加上scoped

8.keep-alive组件的作用是什么?
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

9.$ nextTick的使用
修改data的是不能直接获取到更新后的值的，需要使用$nextTick回调，修改的data值渲染更新到dom元素之后在获取，才能成功。

10.vue更新数组时触发视图更新的方法
答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()

11. vue-router实现路由懒加载（ 动态加载路由 ）
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

12.分别简述computed和watch的使用场景
computed:当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的栗子： 购物车商品结算的时候
watch:当一条数据影响多条数据的时候就需要用watch
　　　　栗子：搜索数据
　　　　
13.axios的特点有哪些
从浏览器中创建XMLHttpRequests；
node.js创建http请求；
支持Promise API；
拦截请求和响应；
转换请求数据和响应数据；
取消请求；
自动换成json。
axios中的发加粗样式送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求，data一般适用于post put 请求。

14.vue获取数据在哪个周期函数
一般 created/beforeMount/mounted 皆可.
vue created钩子函数不能获取到dom元素 可以在mounted里面进行获取dom元素的操作

15.vue生命周期的理解
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后
beforeCreated**：实例挂载元素**$ el和对象data都为undefined**，还未初始化。
created:阶段，vue实例的数据对象data有了，$el还没有。beforeMount:vue实例的$ el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
mounted*段: vue实例挂载完成，data.message成功渲染。
activated::keep-alive组件激活时调用
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

16.vue-router 有哪几种导航钩子?
1、全局守卫：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
2、全局解析守卫： router.beforeResolve
3、全局后置钩子： router.afterEach
4、路由独享的守卫： beforeEnter
5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

17.vue slot
答：简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

18…vue中解决跨域问题
1、后台更改header**(所有来源访问 访问方式）
2、使用JQuery提供的jsonp
3、使用axios请求数据时直接使用“/api
4、更改config配置proxyTable的属性changeOrigin: true, //改变源

19.Vuex的原理和使用方法
Vuex原理:
1、什么是vuex，怎么使用？哪种功能场景使用它？
vue框架中状态管理:有五种，分别是 State、 Getter、Mutation 、Action、 Module
只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，…… export 。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
state
Vuex 数据单向流动,使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

20.内存泄露
导致网站/软件反应迟缓,崩溃,高延迟
原因：变量使用没有被回收,造成了内存泄漏,一般由定时器,闭包导致
vue如何处理 生命周期 beforeDestroy 销毁前做处理

21:如何防止xss攻击
XSS防御的总体思路是：对输入(和URL参数)进行过滤，对输出进行编码。

22、vue.js：vue-cli工程的核心，主要特点是 双向数据绑定 和 组件系统。
双向绑定原理：通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
组件通信：vue父组件向子组件传递数据：通过props
子组件像父组件传递事件：$emit方法
兄弟组件传值：eventBus

23、axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
(异步请求基于Promise 转载：https://blog.csdn.net/shan1991fei/article/details/78966297)
24、vue常用的修饰符，常用指令
常用指令: v-for / v-if、v-else、v-show：条件渲染/
v-bind：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM语法
v-on：可以监听多个方法

vue常用的修饰符：
答：
.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用
.once：只会触发一次。

25、vue中 key 值的作用
答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

26、Vue 组件中 data 为什么必须是函数
vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。
如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

27、vue等单页面应用及其优缺点
答：优点：无刷新体验,提升了用户体验；前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
API 共享，同一套后端程序代码不用修改就可以用于Web界面、手机、平板等多种客户端
用户体验好、快，内容的改变不需要重新加载整个页面。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

28、Vue与Angular以及React的区别？
1.与AngularJS的区别
相同点：
都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。

不同点：
AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。

2.与React的区别
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
不同点：
React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

29 列举Http请求中常见的请求方式？

get
向特定的路径资源发出请求，数据暴露在url中
post
向指定路径资源提交数据进行处理请求，数据包含在请求体中
options
返回服务器针对特定资源所支持的http请求方法，允许客户端查看，测试服务器性能
head
向服务器与get请求相一致的响应，响应体不会返回，可以不必传输整个响应内容
put
从客户端向服务器端传送的数据取代指定的文档的内容
delete
请求服务器删除指定的页面
trace
回显服务器收到的请求，主要用于测试或者诊断
connect
http/1.1协议中预留给能够将连接改为管道方式的代理服务

30.Vue实例属性
$props:使用这个属性可以接受上级组件向下传递的数据
$options:获取vue实例属性，包含自定义属性
$el:vue实例的根doom元素
$children:获得vue实例的直接子组件
$root:用获取当前组件树的根vue实例
$attrs:可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。

31.下面是Vue实例挂载过程的不同阶段，请选择他们的正确顺序是？
A.初始化组件依赖注入内容
B.初始化组件生命周期标识符
C.实例化属性合并，包含extend/mixins属性
D.初始化事件系统

答案： BDCA

32.Vue页面初始化时会执行哪几个生命周期函数
beforeCreate created beforeMount mounted

33.computed和watch
1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

4、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候，使用watch-------搜索框。

34.事件修饰符
vue中提供的事件修饰符一共有4种
.stop：用来阻止事件冒泡（防止事件向父标签传递）
.prevent：用来阻止标签的默认行为，等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播
.self：只监听自身标签触发的事件，不包含子元素；
.once：该事件只触发一次
.capture：与事件冒泡的方向相反，事件捕获由外到内；

31、webpack的特点
webpack的作用
①、依赖管理：方便引用第三方模块、让模块更容易复用，避免全局注入导致的冲突、避免重复加载或者加载不需要的模块。会一层一层的读取依赖的模块，添加不同的入口；同时，不会重复打包依赖的模块。
②、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS（压缩代码）可以减少、优化代码的体积。
③、各路插件：统一处理引入的插件，babel编译ES6文件，TypeScript,eslint 可以检查编译期的错误。
一句话总结：webpack 的作用就是处理依赖，模块化，打包压缩文件，管理插件。
一切皆为模块，由于webpack只支持js文件，所以需要用loader 转换为webpack支持的模块，其中plugin 用于扩张webpack 的功能，在webpack构建生命周期的过程中，在合适的时机做了合适的事情。
webpack怎么工作的过程
①解析配置参数，合并从shell(npm install 类似的命令)和webpack.config.js文件的配置信息，输出最终的配置信息；
②注册配置中的插件,让插件监听webpack构建生命周期中的事件节点，做出对应的反应；
③解析配置文件中的entry入口文件，并找出每个文件依赖的文件，递归下去；
④在递归每个文件的过程中，根据文件类型和配置文件中的loader找出对应的loader对文件进行转换；
⑤递归结束后得到每个文件最终的结果，根据entry 配置生成代码chunk(打包之后的名字)；
⑥输出所以chunk 到文件系统。