前端vue高频面试题(四)

1.keep-alive组件的作用

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。它提供了include与exclude两个属性，允许组件有条件地进行缓存。

2.单页面应用和多页面应用区别及优缺点

单页面应用（SPA），只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），指一个应用中有多个页面，页面跳转时是整页刷新

**单页面优缺点**

优点	缺点
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小	不利于seo
前后端分离，代码的复用度大。有利于后期的维护	导航不可用（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）
页面效果会比较炫酷（比如切换页面内容时的专场动画）	初次加载时耗时多

**多页面优缺点**

优点	缺点
有利于SEO	网站的后期维护难度较大
开发成本较低	页面之间的跳转用时较长，用户体验较差
	代码重复度大。

3.什么是计算属性？什么情况使用？

computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
计算属性是所有属性的计算，而这些计算都是变向的在过滤值，通过数据的不断变化计算出来不同的值和操作不同的方法。
使用到计算属性的场景常见的有：
1.模板内的表达式
2.属性v-bind里可以进行的表达式
3.指令中可以进行的表达式

4.computed、methods的区别

computed	methods
基于它的依赖缓存，只有相关依赖发生改变时才会重新取值	重新渲染时函数重新调用执行
只在初始化时被调用	会在数据变化时被调用, 即使变动的数据与自身无关

ps：数据量大，需要缓存的时候用 computed ；每次确实需要重新加载，不需要缓存时用 methods 。