2021年面经题

最新推荐文章于 2022-12-23 19:00:07 发布

一只小药锅

最新推荐文章于 2022-12-23 19:00:07 发布

阅读量428

点赞数 1

CC 4.0 BY-SA版权

分类专栏：面试题整理

本文链接：https://blog.csdn.net/qq_39189369/article/details/115772150

面试题整理专栏收录该内容

3 篇文章

订阅专栏

本文汇总了Vue.js面试中常见的问题，涵盖了双向绑定原理、组件值传递、计算属性与watch的区别、Vuex的属性与作用、路由原理与实践等核心知识点。还探讨了MVVM与MVC的区别、Vue与其他框架的差异，以及Vue的性能优化策略。此外，文章涉及CSS、JavaScript、网络与安全等多个领域的技术细节，包括CSS布局、事件循环、跨域问题、防抖节流等，帮助开发者深入理解和巩固前端知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整理了最近去面试遇到的一些面试题，就当是积累复习，巩固扩展知识面，题先列出来，后续持续完善...

Vue

1.vue的双向绑定原理？

vue采用数据劫持结合发布-订阅模式的方式。

当你把一个普通的 JavaScript 对象传入 vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty() 把这些 property 全部转为 getter/setter。在 getter 方法中收集数据依赖，在 setter 中监听数据变化。一旦数据发生变化，再通知订阅者。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，通过diff算法，从而使它关联的组件重新渲染。

Observer 监听器：用来监听属性的变化通知订阅者
Watcher 订阅者：收到属性的变化，然后更新视图
Compile 解析器：解析指令，初始化模版，绑定订阅者

2.vue的组件值的传递有哪些方法?

子组件接收props,传送给父组件$emit
采用refs
采用vuex
采用eventBus，原理是new Vue作为中间层 $emit、 $on
provide 、 inject

3.computed和watch的区别和使用场景？

computed:依赖它的值，具有缓存，缓存变化才会更新。

watch:没有缓存，监听一个值变化进行一些操作，数据变化执行异步或者开销大的操作使用它。

4.vuex有哪些属性，请进行说明?

有五个属性值，分别是：

state：基本数据
getter:从基本数据中派生出来的数据(同计算属性值一样)
mutations:提交更好数据的方法
actions:像一个装饰器，包裹mutations，使之可以异步
modules:模块化Vuex

actions通过$store.depatch()去触发，mutations通过$store.commit()去触发。

5.为啥要设计出vuex呢？

组件的传值是从上往下传值。层级数越高，会增加高内聚，而vue提倡是低耦合，这样与vue的初衷是相违背的，所以才出了vuex。vuex可以很好的将一些公共属性值和方法进行存储，方便调用。

6.vue常用有哪些指令？如何自定义指令？

v-if、v-show、v-for、v-model、v-else、v-bind、v-on等。Vue.directive()

7.vue的data为啥是一个函数而不是一个对象？

data是一个对象的话，所有的组件实例共用一个data，这样改一个会全部改，而使用函数的话，数据是以函数的返回值定义，每次调用都会返回一个新的data，每个数据都有自己的私有空间。

8.vue的生命周期有哪些钩子函数？

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestory：实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
destoryed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

9.vue的ajax请求初始化方法是在哪里调用比较合适,为什么？

一般created钩子函数主要是用来初始化数据。ajax请求放在created比较合适，如果有操作dom则放在mounted中。

10.vue-router的实现原理？有啥区别？

hash
history

hash模式url里面永远带着#号，在前端开发中默认使用这个模式。history没有#号，是正常的url适合推广宣传。有的app里面url是不予许#好，所以要是用history。但是使用history模式有个问题，在访问二级页面的时候，做刷新操作，会出现404，那么这里需要和后台人员做配置，重定向到首页路由。hash支持低版本和ie，history是h5新推出的api。

11.vue-router有哪些钩子函数,执行顺序呢?

全局的路由钩子函数：beforeEach、afterEach

组件内的路由钩子函数：beforeRouteEnter、beforeRouteUpate、beforeRouteLeave

单个的路由钩子函数：beforeEnter

12.vue-router那个钩子函数可以控制路由跳转

import router from './router';

使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
const role = localStorage.getItem('ms_username');

if(!role && to.path !== '/login'){
next('/login');
}else if(to.meta.permission){
// 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
role === 'admin' ? next() : next('/403');
}else{
   next()
}
})

13.路由跳转和传统跳转有啥区别？新浪是传统跳转，那么是怎么实现页面无刷新呢？

路由跳转是无刷新的页面更新，传统的跳转会出现页面刷新。ajax请求、

14.mvvm和传统mvc有啥区别？

mvvm是Mode-View-ViewModel的缩写。即模型-视图-视图模型。mvvm是一种设计思想，model层代表数据模式，view代表ui组件，viedmodel是一个同步view和model的对象。

mvc是Model-View-Controller的简写。即模型-视图-控制器。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。

15.vue和其它框架对比有啥区别？

16.vue中key的作用

key是唯一值。有利于diff算法可以更准确的辨识新旧vnode，更高效的渲染元素。

17.vue有哪些性能优化

(1)代码层

v-if和v-show使用场景
v-for和v-if
v-for中的key
减少表达式

(2)使用层

长列表优化，懒加载
图片懒加载、预加载
使用cdn
减少http请求次数(合并css,js,小图标整合成雪碧图)
第三方组件按需加载
路由懒加载
监听器使用后销毁
服务器端 ssr或预渲染

(3)webpack

图片压缩(image-webpack-loader)
减少es6转换为es5的冗余代码(babel-plugin-transform-runtime)
提取公共代码(CommonsChunkPlugin)
模板预编译(vue-template-loader)
优化SourceMap
提取组件css(vue-loader)

(4)游览器层

开启gzip压缩
浏览器缓存
cdn的使用

18.vue是在哪进行配置反向代理

vue.config.js中设置proxyTable

19.vue中name的作用

keep-alive时，可以搭配组件name进行缓存过滤
dom操作时做递归组件
vue-devtools调试工具，显示名字由name决定

20.vue3和vue2对比有哪些改动

https://zhuanlan.zhihu.com/p/139590941

21.vue3的proxy和vue2的object.defineproperty有啥区别

https://www.jianshu.com/p/8cde476238f0

22.v-if和v-show的区别?

v-if是控制元素的创建和销毁,v-show是控制元素的display的显示隐藏。v-if控制销毁和创建会触发重排，而v-show只触发重绘，性能上v-if消耗更大。v-if适合那些不需频繁操作的，v-show适合那些频繁操作的。

23.v-for和v-if为啥不能同时使用?

因为v-for和v-if同时使用，v-for权重比v-if高，每次遍历都会进行一次判断，这极度消耗性能。

24.组件是怎么缓存的，原理是什么？

<keep-alive>，详细分析：

https://www.jianshu.com/p/9523bb439950

https://www.cnblogs.com/wangjiachen666/p/11497200.html

25.active-class是哪个组件属性

vue-router模块的<router-link>组件

26.file-loader是什么?有哪些用途

vue文件的一个文件加载器，将template/js/style转换为js模块。

27.v-model的使用以及原理

是v-on和v-bind的语法糖

28.$nexrTick的原理

基本用到eventLoop的原理，用到promise()、setTimeout()

https://segmentfault.com/a/1190000012861862

29.数据更新后视图没有更新是什么原因，要如何更新呢？

因为object.defineProperty劫持对象值，而不能监听到下标。当数据发生变化，页面的dom在当前时间不会触发update。

$set、forceUpdate()、$nextTick、v-if、key-changing

30.spa单页面和mpa多页面的区别

spa：单页面指一个外壳index.html和多个代码片段构成的应用。

mpa:多页面是一哥由多个完整页面构成的应用。

31.slot的使用

https://blog.csdn.net/qq_36838191/article/details/81479871

32.页面第一次加载会触发哪些钩子函数

beforeCreate，created，reforeMount，mounted

33.组件的的钩子的执行顺序

加载渲染过程父beforeCreate - 父created - 父beforeMounted - 子beforeCreate - 子created - 子beforeMounted -子mouted - 父mounted
子组件更新过程父beforeUpdate - 子beforeUpdate -子updated - 父updated
父组件更新过程父beforeUpdate - 父updated
销毁过程父beforeDestroy - 子beforeDestory -子destroyed -父destroyed

34.什么是动态路由，使用场景？怎么获取传过来的值?

/:id ，例如在写商品详情页面的时候，，页面结构都一样，只是商品id的不同，这个时候可以使用动态路由。

$route.params.id

35.$route和$router的区别

#route路由信息 $router路由的实例,可以像router-link跳转一样

https://blog.csdn.net/wangguoyu1996/article/details/80628135

36.vue-router实现分包

webpackChunkName:name，详细： https://blog.csdn.net/qq_40971483/article/details/111475805

37.spa首屏加载慢导致白屏，要如何处理？

懒加载所需要的插件，使用cdn资源。 https://blog.csdn.net/qq_39905409/article/details/106259057

38.vue的常用修饰符

.once 事件只能用一次，执行后就不再执行
.stop 阻止冒泡事件 event.stopPropagation()
.seft 只有元素本身触发时才触发。
.provent 阻止默认行为 event.preventDefault()
native 监听根元素的原生事件
v-model.trim 过滤空格
v-model.number 限制只能输出数字
.sync 对prop进行双向绑定
.keycode 监听按键指令

39.vuex是什么，使用场景是什么？

vuex是状态管理。在main.js中注入。state用于存放公共状态值，改变状态的方式是通过提交mutations，这是同步的。异步逻辑封装在actions中。使用场景：组件的状态，登录状态，购物车等。

有五个属性：

state:定义初始化状态
module：状态模块化l管理
mutations：设置状态值
actions：异步提交mutations
getter:获取状态

40.<keep-alive>的作用是什么？

包裹动态组件时，会缓存不活动的组件实例，主要用于保存组件状态和避免重新渲染。

css

1.如何实现div元素垂直水平居中

2.实现左边div固定，右边自适应

3.link和@import的区别和使用场景

4.css动画实现

@keyframes

js

1.es6有哪些新特性

字符串模板、数据解构、class定义类、forEach、for ..of 、const和let、promise、Set和Map、setMap、include、symbol、**、新增array操作等

2.promise和async/await有啥区别？

async/await是基于promise，跟promsie一样，是非阻塞的。

promise()解决了回调地狱的问题。但promise有弊端：1.一旦执行就无法停止，切无法return 2.执行后不知道执行到哪个位置。

async/await是由co库+Generator，async是同步的，awiat执行是异步的。这里可以通过try... catch()...来捕获异常错误，也可以return终止。而且代码简洁，不需要像promise一样需要then。

3.什么是原型？什么是原型链

每个对象都有__.proto__，而构造函数都有prototype（原型）属性,这个属性是一个指针，指向一个对象，这个对象的用途是包含特定类型的所有实例的共享的属性和方法，即这个原型对象是用来给实例共享属性和方法的。

每个构造都有原型对象，这个对象在当前位置查找，如果没有找到就会去构造函数的prototype查找，如果没有找到，就在这个构造函数的prototype.__proto__中查找，一直找到object.__proto__，这样一直向上查找的链式结构，就是原型链。

Object.__prtot__ = Function.prototype

4.什么是闭包，在哪些地方有使用到？

我都理解是：内部函数有权限访问外部函数的变量和方法。使用场景：例如添加事件绑定添加上事件，这个操作是异步的，因此只会绑定最后一个，这里可以用闭包处理、curry函数也用到闭包。

5.什么是垃圾回收机制,实现原理是什么？什么是内存泄漏?

垃圾回收机制是浏览器自带的内存管理机制，js会自动进行回收。原理：解决内存的泄漏，垃圾回收机制会定期性的找出那些不在引用的内存或者变量，然后释放内存。方法有：1.标记清除 2.引用计数

不在用到的内存没有及时得到释放，就是内存泄漏。

6.flex布局有哪些属性

flex、flex-flow、flex-wrap、flex-direaction、aligin-item、justify-content等

7.浏览器的兼容性处理

https://blog.csdn.net/liucsen/article/details/77849172

8.forEach和map相比，有什么区别？

map比forEach运行速度快。
map可以中途return停止，而forEach只能一直遍历下去。
map返回一个新数组，forEach返回一个当前数组。

9.eventloop是什么？

10.清除浮动有哪些方法？

11.实现一个倒计时的功能（今年剩余：2021年....）

12.实现一个深拷贝

13.深拷贝和浅拷贝的区别？

14.跨域问题是如何解决

15.什么是防抖和节流，使用场景请叙述

16.手写promise

17.实现浅拷贝有哪些方法

18.多维数组转成一维数组

19.js有哪些数据类型，分别是什么？

20.Null和undefined的区别

21.promise.all和promise.race的使用

22.实现数组去重

23.找出数组出现最多次数的值

24.手写ajax请求

25.常见http的状态码

26.es6数组有哪些操作方法

27.检测数据类型有哪些方法？有啥区别？

28.apply、call、bind三者有啥区别

29.手写new方法

30.什么是this的指向

31.const、let和var的区别

32.amd、cmd、common.js和esModule的区别？

33.base64图片和传统图片的区别？(tc电话面)

base64图片采用二进制的处理方式，因此体积大小会比传统的小。

34.出现跨域是什么原因？为啥会有需要这个协议？(tc电话面)

出现同源策略问题。端口、域名、协议三者在均相同。

我回答是：防止别人请求调用网站的接口。

然后面试官告诉我：node是没有同源策略的问题，那可以直接这样请求接口，那不是可以调用网站的接口吗？那这样跨域的问题不就是浏览器的限制吗？

可能a.com的一段JavaScript脚本，在b.com未曾加载此脚本时，也可以随意涂改b.com的页面。
在浏览器中同时打开某电商网站（域名为b.com），同时在打开另一个网站(a.com)，那么在a.com域名下的脚本可以读取b.com下的Cookie，如果Cookie中包含隐私数据，后果不堪设想。
因为可以随意读取任意域名下的Cookie数据，很容易发起CSRF攻击。

所以，同源策略是浏览器安全的基础，同源策略一旦出现漏洞被绕过，也将带来非常严重的后果，很多基于同源策略制定的安全方案都将失去效果。

详细：https://www.cnblogs.com/nuccch/p/7466709.html