2023年11月25日发(作者：)
前端经典⾯试题vue⾯试题
1.什么是MVVM？
1MVVM是⼀种设计思想。
2Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
3View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是⼀个
4同步View 和 Model的对象。
和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
1mvc和mvvm其实区别并不⼤。都是⼀种设计思想。主要就是mvc中Controller演变成mvvm中的
2viewModel。mvvm主要解决了mvc中⼤量的DOM 操作使页⾯渲染性能降低，加载速度变慢，影响⽤户
3体验。
4区别：vue数据驱动，通过数据来显⽰视图层⽽不是节点操作。
5场景：数据操作⽐较多的场景，更加便捷
的优点是什么？
低耦合:视图（View）可以独⽴于Model变化和修改，⼀个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不
1
变。
2可重⽤性:你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多view重⽤这段视图逻辑。
3独⽴开发:开发⼈员可以专注于业务逻辑和数据的开发（ViewModel），设计⼈员可以专注于页⾯设计。
4可测试:界⾯素来是⽐较难于测试的，⽽现在测试可以针对ViewModel来写。
组件之间传值？
1*⽗组件与⼦组件传值
2⽗组件通过标签上⾯定义传值
3⼦组件通过props⽅法接受数据
4*⼦组件向⽗组件传递数据
5⼦组件通过$emit⽅法传递参数
6*vuex
7*eventbus
8*
9
2和vue3区别？vue3⽐vue2优点？
1我们可以概览Vue3的新特性
2速度更快、体积减少、更易维护、更接近原⽣、更易使⽤
3vue3相⽐vue2、重写了虚拟Dom实现、编译模板的优化、
4更⾼效的组件初始化、undate性能提⾼1.3~2倍、
5SSR速度提⾼了2~3倍
⾯试相关
1vue框架中状态管理。在引⼊store，注⼊。新建⼀个⽬录store，….. export 。场景有：单页应⽤中，组件之间的状态。
当触发组件中的某⼀个事件或者⽅法得时候，会通过dispatch分发⼀个消息到actions当中，action会进⾏异步请求数据，当数据请求回来的时候，会通过commit提交到
2
mutations当中，在mutations当中去改变state当中的状态。状态改变以后会映射组件也发⽣改变。
31、Vuex 是⼀个专为 设计的状态管理模式
4Vuex 是⼀个专为 应⽤程序开发的状态管理模式
5•解决了组件之间同⼀状态的共享问题 （解决了不同组件之间的数据共享）
6•2.组件⾥⾯数据的持久化。
7.v-show和v-if指令的共同点和不同点
1v-show指令是通过修改元素的display的CSS属性让其显⽰或者隐藏
2v-if指令是直接销毁和重建DOM达到让元素显⽰和隐藏的效果
-alive的作⽤是什么?
1
2主要⽤于保留组件状态或避免重新渲染。
中引⼊组件的步骤?
11）采⽤ES6的import ... from ...语法或CommonJS的require()⽅法引⼊组件
22）对组件进⾏注册,代码如下
3// 注册
ent('my-component', {
5template: '
63）使⽤组件
-router有哪⼏种导航钩⼦？
1三种，⼀种是全局导航钩⼦：Each(to,from,next)，作⽤：跳转前进⾏判断拦截。
1三种，⼀种是全局导航钩⼦：Each(to,from,next)，作⽤：跳转前进⾏判断拦截。
2第⼆种：组件内的钩⼦；
3第三种：单独路由独享组件
11.⽣命周期相关⾯试题
1总共分为8个阶段创建前/后，载⼊前/后，更新前/后，销毁前/后。
21-beforeCreate 初始化之后
32-created 创建完成
43-beforeMount 挂载之前
54-mounted 被创建
65-beforeUpdate 数据更新前
76-updated 被更新后
87-activated
98-deactivated
109-beforeDestroy 销毁之前
1110-destroyed 销毁之后
Vue 实例从创建到销毁的过程，就是⽣命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等⼀系列过程，我们称这是 Vue 的⽣命
12
周期。
12.第⼀次页⾯加载会触发哪⼏个钩⼦?DOM 渲染在 哪个周期中就已经完成?
1*第⼀次页⾯加载时会触发 beforeCreate, created, beforeMount, mounted 这⼏个钩⼦
2*DOM 渲染在 mounted 中就已经完成了。
13.举例说出⼏种vue当中的指令和它的⽤法？
1v-if：判断是否隐藏；
2v-for：数据循环；
3v-bind:class：绑定⼀个属性；
4v-model：实现双向绑定
5v-html：更新元素的innerHTML；
6v-show与v-if
7
-loader是什么？使⽤它的⽤途有哪些？
1解析.vue⽂件的⼀个加载器。
2⽤途：js可以写es6、style样式可以scss或less、template可以加jade等
15.为什么使⽤key？
1当有相同标签名的元素切换时，需要通过 key 特性设置唯⼀的值来标记以让Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
16.v-if 和 v-for 可以⼀起使⽤吗？如果不可以，为什么？
当 Vue 处理指令时，v-for ⽐ v-if 具有更⾼的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取⽽代之的是，我们只检查它⼀次，且不会在 v-if 为否
1
的时候运算 v-for。
是什么？虚拟 DOM是什么？
1Vue在 页⾯上渲染的节点，及其⼦节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建⽴起来的整个 VNode 树的称呼。
2.x与vue3.x双向数据绑定的原理?
1数据变化更新视图，视图变化更新数据。其中，View变化更新Data，可以通过事件监听的⽅式来实现，所以 Vue数据双向绑定的⼯作主要是如何根据Data变化更新View。
2Vue 是利⽤的 Property()⽅法进⾏的数据劫持，利⽤ set、get 来检测数据的读写。
3Vue2.x采⽤的是Property()⽅法
4Vue3.0实现数据的双向绑定原理：采⽤的是Proxy⽅法,proxy是个对象
5proxy⽐Property好在哪⾥？
6可以直接监听数组的变化；可以直接监听对象⽽⾮属性；Proxy返回的是⼀个新对象，可以只操作新的对象达到⽬的，⽽Property只能遍历对象属性直接修改
Property的优势：A.兼容性好，⽀持IE9，⽽Proxy的存在浏览器兼容性问题，⽽且⽆法⽤polyfill磨平。
$nextTick作⽤是什么？
在下次 DOM 更新循环结束之后执⾏延迟回调。在修改数据之后⽴即使⽤这个⽅法，获取更新后的 DOM。简单的说就是再DOM操作时，vue的更新是异步的，$nextTick
1
是⽤来知道什么时候 DOM 更新完成的。
20.$route和$router的区别?
1$route是“路由信息对象”，包括path，params，query，name等路由信息参数。⽽$router是“路由实例”对象包括了路由的跳转⽅法，钩⼦函数等
的两个核⼼是什么(数据驱动、组件系统。)
1数据驱动：Property和存储器属性: getter和setter
2ViewModel，保证数据和视图的⼀致性。
3组件系统：应⽤类UI可以看作全部是由组件树构成的。
路由和history路由的区别?
1hash路由在地址栏URL上有#，⽽history路由没有会好看⼀点；
我们进⾏回车刷新操作，hash路由会加载到地址栏对应的页⾯，⽽history路由⼀般就404报错了（刷新是⽹络请求，没有后端准备时会报错）。history运⽤了浏览器的历史
2
记录栈
，sessionStorage和localStorage的区别?
1localStorage：存储持久数据，浏览器关闭后数据不会丢失，除⾮主动删除数据。
2sessionStorage:数据在当前浏览器窗⼝关闭后⾃动删除。
3cookie：设置的cookie过期时间之前⼀直有效，即使窗⼝关闭或浏览器关闭。
4cookie数据时钟在同源的http请求中携带（即使不需要），即会在浏览器和服务器之间传递。
5seeeionStorage和localStorage不会⾃动把数据发给服务器，仅在本地保存。
ed与watch的区别?
1computed是计算属性，会根据依赖的数据动态显⽰新的计算结果，计算后的值会被缓存，当依赖的值改变的时候，才会更新新的计算后的值
2watch 就相当于是⼀个 data 的数据监听回调，当依赖的 data 的数据变化就会执⾏回调
25.页⾯刷新后，vuex中的数据丢失
1js代码是运⾏在内存中的，代码运⾏时的所有变量、函数也都是保存在内存中的。进⾏刷新页⾯的操作，以前申请的内存被释放
解决思路：这些数据要想存储就必须存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做
2
持久化存储。
26.图⽚懒加载和路由懒加载？
1图⽚懒加载：可视区域加载，就是只加载⽤户可以看到的区域，这个主要由监控滚动条来实现，在没进⼊可视区域的时候，我们先不给这个标签赋 src 属性。
2路由懒加载：1. vue异步组件
3component: resolve => require(['@/pages/ShopCar'],resolve)
42. webpack的()
5component: r => ([], () => r(require('@/pages/GoodsDetailPage')), 'demot')
27.跨域问题如何解决？
1通过jsonp跨域
2nodejs中间件代理跨域： vue框架的跨域部分配置
3
是什么？在中的安装使⽤步骤是？有哪⼏⼤特性？
1css的预编译。
2使⽤步骤：
3第⼀步：先装css-loader、node-loader、sass-loader等加载器模块
4第⼆步：在build⽬录找到，在那个extends属性中加⼀个拓展.scss
5第三步：在同⼀个⽂件，配置⼀个module属性
6第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
7特性:
8•可以⽤变量，例如（$变量名称=值）；
9•可以⽤混合器，例如（）
10•可以嵌套
发布评论