写在前面

CSDN话题挑战赛第1期

活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
参赛话题：前端面试宝典
话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！
创作模板：

携手共筑前端面试宝典

题目一
- - Vue 相关面试问题
- 考点
- - 谈谈你对MVVM开发模式的理解？
  - v-if 和 v-show 有什么区别？
  - 你使用过 Vuex 吗？
  - 说说你对 SPA 单页面的理解，它的优缺点分别是什么？
- 答案
- 扩展
- - JavaScript原型，原型链 ? 有什么特点？

题目一

Vue 相关面试问题

考点

谈谈你对MVVM开发模式的理解？

v-if 和 v-show 有什么区别？

你使用过 Vuex 吗？

说说你对 SPA 单页面的理解，它的优缺点分别是什么？

答案

谈谈你对MVVM开发模式的理解？
MVVM分为Model、View、ViewModel三者。
Model 代表数据模型，数据和业务逻辑都在Model层中定义；
View 代表UI视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。
v-if 和 v-show 有什么区别？
v-if 是真正的条件渲染，会控制这个 DOM 节点的存在与否。因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。
当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。
你使用过 Vuex 吗？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
主要包括以下几个模块：

State => 基本数据，定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter => 从基本数据派生的数据，允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation => 是唯一更改 store 中状态的方法，且必须是同步函数。
Action => 像一个装饰器，包裹mutations，使之可以异步。用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module => 模块化Vuex，允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
4. 说说你对 SPA 单页面的理解，它的优缺点分别是什么？
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页> 面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 > HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA 相对对服务器压力小；
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一> 加载，部分页面按需加载；
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所> 有的页面切换需要自己建立堆栈管理；
SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

扩展

JavaScript原型，原型链 ? 有什么特点？

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，
如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，
于是就这样一直找下去，也就是我们平时所说的原型链的概念。
关系：instance.constructor.prototype = instance.proto
特点：
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

写在最后

CSDN话题挑战赛第1期

活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f

【前端面试之Vue】相关推荐

【面试】前端面试之Vue篇
文章目录前端面试之Vue篇 vue组件的核心选项 vue组件的通信方式有哪几种? vue如何操作dom节点? vue当数据更新是如何更新dom节点的? computed内想传入一个参数,要怎么实现? ...
前端面试之Vue向技巧总结
Vue目前作为前端三大框架之一,在行业内使用的越来越广泛,但你有系统地学习过,并且掌握了其要领么? 互联网面试季悄然而至了,前端的竞争也是愈来愈激烈,那么想要吸引面试官的目光的我们呢?是否应该掌握一些 ...
第 5 节：前端面试指南 — Vue 篇（附面试题）
更新完「JavaScript篇」之后,忙完上周的送书活动,很多读者朋友都在微信催更「面试指南」系列的第 5 期 - vue篇. 前 4 期没看的同学,建议先看完再来看这一期的,传送门: 第 1 期:「 ...
前端面试之Vue相关总结
Vue2中检测数组变化的限制和解决方法 vue2用下标设置数组没效果 arr = [1,2] arr[0] = 0,页面上显示的arr并没有修改(如果对应下标是原始值:若是引用值) 解决1:Vue.S ...
字节3-1前端面试官自学Vue的正确姿势
大家好,我是若川. 前不久和一个字节前端TL朋友聊天,说到大厂前端供需脱节的情况.特别是使用Vue框架的,因为简单易学好上手,但是能够深入理解的人并不多,大多都只停留在应用层面,缺乏更深层面的理解. ...
前端vue适配不同的分辨率_前端面试时，被问到项目中的难点有哪些？
在每个前端求职者的面试过程中,一定都有过被面试官问到项目中的难点,而答不上来的情况.为了让大家在前端面试前准备得更加充足,小编准备了一些易被忽视且难度较高的前端面试题,希望可以帮助大家更加顺利完成求职 ...
vue js 反编译_学会了Vue，前端面试却没找到工作？
也不知道为什么?最近到处都在宣传Vue.不可否认Vue是一个很不错也很值得学习的前端开发框架.然而大家一味地跟风,难道是学会了Vue就可以在前端界驰骋?成为一名优秀前端工程师?找到满意的前端工作了吗? ...
前端面试时面试官想要听到什么答案（关于一些Vue的问题）
本文会列举一些平时面试时问到的问题和答案,并说明面试官在当时问到这个问题时所期望对方的回答: vue生命周期(钩子函数) 问题请说一下vue的生命周期函数(钩子函数). 问题描述首先关于生命周期函 ...
【前端面试宝典】超基础的vue知识
写在前面 CSDN话题挑战赛第1期活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f 参赛话题:前端面试宝典话 ...

【前端面试之Vue】