前端面试题-Vue篇01

1、说说你对 SPA 单⻚⾯的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web⻚⾯初始化时加载相应的 HTML、JavaScript 和 CSS。⼀旦⻚⾯加载完成，SPA 不会因为⽤户的操作⽽进⾏⻚⾯的重新加载或跳转；取⽽代之的是利⽤路由机制实现HTML 内容的变换，UI 与⽤户的交互，避免⻚⾯的重新加载。
优点：
⽤户体验好、快，内容的改变不需要重新加载整个⻚⾯，避免了不必要的跳转和重复渲染；
基于上⾯⼀点，SPA 相对对服务器压⼒⼩；
前后端职责分离，架构清晰，前端进⾏交互逻辑，后端负责数据处理；
缺点：
初次加载耗时多：为实现单⻚ Web 应⽤功能及显示效果，需要在加载⻚⾯的时候将 JavaScript、CSS 统⼀加载，部分⻚⾯按需加载；
前进后退路由管理：由于单⻚应⽤在⼀个⻚⾯中显示所有的内容，所以不能使⽤浏览器的前进后退功能，所有的⻚⾯切换需要⾃⼰建⽴堆栈管理；
SEO 难度较⼤：由于所有的内容都在⼀个⻚⾯中动态替换显示，所以在SEO 上其有着天然的弱势。

2、v-show 与 v-if 有什么区别？

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和⼦组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第⼀次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进⾏切换。
所以，v-if 适⽤于在运⾏时很少改变条件，不需要频繁切换条件的场景；v-show则适⽤于需要⾮常频繁切换条件的场景。

3、Class 与 Style 如何动态绑定？

Class 可以通过对象语法和数组语法进⾏动态绑定：
对象语法：

<div v-bind:class="{ active: isActive, 'text-danger':
hasError }"></div>
data: {
 isActive: true,
 hasError: false
}

数组语法：

<div v-bind:class="[isActive ? activeClass : '',
errorClass]"></div>
data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

Style 也可以通过对象语法和数组语法进⾏动态绑定：

对象语法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize
+ 'px' }"></div>
data: {
 activeColor: 'red',
 fontSize: 30
}

数组语法：

<div v-bind:style="[styleColor, styleSize]"></div>
data: {
 styleColor: {
 color: 'red'
 },
 styleSize:{
 fontSize:'23px'
 }
}

4、怎样理解 Vue 的单向数据流？

所有的 prop 都使得其⽗⼦ prop 之间形成了⼀个单向下⾏绑定：⽗级 prop 的更新会向下流动到⼦组件中，但是反过来则不⾏。这样会防⽌从⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解。
额外的，每次⽗级组件发⽣更新时，⼦组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在⼀个⼦组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。⼦组件想修改时，只能通过 $emit 派发⼀个⾃定义事件，⽗组件接收到后，由⽗组件修改。

有两种常⻅的试图改变⼀个 prop 的情形 :

这个 prop ⽤来传递⼀个初始值；这个⼦组件接下来希望将其作为⼀个本地的 prop 数据来使⽤。 在这种情况下，最好定义⼀个本地的 data 属性并
将这个 prop ⽤作其初始值：
props: [‘initialCounter’],
data: function () {
return {
counter: this.initialCounter
}
}
这个 prop 以⼀种原始的值传⼊且需要进⾏转换。 在这种情况下，最好使⽤这个 prop 的值来定义⼀个计算属性
props: [‘size’],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}