vue你掌握了吗？还不赶紧来看看这些面试题1. 说说你对SPA单页面的理解，他的优缺点分别是什么？前后端职责分离，架构

30道vue面试题自测vue掌握程度

说说你对SPA单页面的理解，它的缺点分别是什么？
v-show与v-if有什么区别？
class与style如何动态绑定？
怎么理解vue的单向数据流？
computent和watch的区别和运用的场景？
直接给一个数组项赋值，vue能检测到变化吗？
谈一谈你对vue生命周期的理解？
在那个声明周期内调用异步请求？
vue的父组件和子组件生命周期钩子函数执行顺序？
在什么阶段才能访问操作DOM？
父组件可以监听到子组件的生命周期吗？
谈一谈对keep-live的了解？
组件中data为什么是一个函数？
v-model的原理？
vue组件通信的方式有哪几种？
使用过vue SSR吗？说一说SSR?
你使用过vuex吗？
vue-router路由模式有几种？
能说下vue-router中常用的hash和history路由模式实现原理吗？
什么是MVVM?
vue是如何实现数据双向绑定的？
vue框架怎么实现对象和数组的监听?
object.defineProperty和proxy优劣对比？
vue怎么用vm.$set()解决对象新增属性不能响应的问题？
虚拟DOM的优缺点？
虚拟DOM实现原理？
vue中的key有什么作用？
你对vue项目进行了那些优化？
对于即将到来的vue3.0特性你有什么了解吗？
说一说你使用vue框架踩过最大的坑是什么？怎么解决的？

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

SPA(single-page application) 仅在web页面初始化时加载响应的HTML、JavaScript和CSS。一旦页加载完成，SPA不会因为用户操作而进行重新加载或跳转；取而代之的是利用路由机制实现HTML内容的变换，UI与用户的交互，避免页面的重新加载。

优点：

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA相对服务器压力小
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理返回。

缺点：

首次加载耗时多，为实现单页web应用功能即显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面----按需加载。
前进后退路由管理，显示所有内容，不能使用后退功能，所有页面切换需要建立堆栈管理
SEO难度较大，由于所有内容在一个页面中动态替换显示，所以在SEO上有天然的弱势

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

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

3. class与style如何动态绑定？

class 可以通过对象语法和数组语法进行动态绑定

对象语法

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

数组语法

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

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()
  }
}

5. computed和watch的区别和运用的场景？

computet:计算属性，依赖其它属性值，并且computed的值有缓存，只有它依赖的属性发生改变，下一次获取computed的值时才会重新计算computed的值 watch：更多时【观察】作用，类似某些数据源监听回调，每当监听的数据变化都会执行回调进行后续操作；

运用场景：

当我们需要进行数值计算，并且依赖于其它数据时，应该使用computed，利用缓存特性，避免每次获取值，都要重新计算。
我们需要监听数据变化时执行异步或开销较大的操作时，使用watch，使用watch选项允许我们执行异步操作，限制我们执行该操作的频率，并且我们得到最终结果欠，设置中间状态。这些都是计算属性无法做到的。

6. 直接给一个数组项赋值，vue能检测到变化吗？

由于JavaScript的限制，vue不能检测到以下数组的变动：

当你利用索引直接设置一个数组项时：例：vm.items[indexOfitem] = newValue
当你修改数组的长度时；例：vm.items.length = newLength

解决第一个方法 vue提供了以下操作方法：

// Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一个别名
    vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)

解决第二个

// Array.prototype.splice
vm.items.splice(newLength)

7. 谈一谈你对vue生命周期的理解？

（1）生命周期是什么？

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

（2）各个生命周期的作用

（3）生命周期示意图

持续更新中。。。。。。

vue你掌握了吗？还不赶紧来看看这些面试题

30道vue面试题 自测vue掌握程度