Vue常见面试题？

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、comuted 和 watch 的区别和运用的场景？

computed: 是计算属性，依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值；

watch: 更多的是【观察】的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

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

4、Vue的父组件和子组件生命周期钩子函数执行顺序？

Vue的父组件和子组件生命周期钩子函数执行顺序可以归类为以下4部分：

• 加载渲染过程
  父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
• 子组件更新过程
  父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
• 父组件更新过程
  父beforeUpdate -> 父 updated
• 销毁过程
  父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

5、在哪个声明周期内调用异步请求？

可以在钩子函数created、beforeMount、mounted中进行调用，因为在这三个钩子函数中，data已经创建，可以将服务端返回的数据进行赋值。但是本人推荐在created钩子函数中调用异步请求，因为在created钩子函数中调用异步请求有以下优点：

• 能更快获取到服务端数据，减少页面loading时间；
• ssr不支持beforeMount、mounted钩子函数，所以放在created中有助于一致性。