MVVM相关

MVVM

M - Model，Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑
V - View，View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来
VM - ViewModel，ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View
View 接收用户交互请求
View 将请求转交给ViewModel
ViewModel 操作Model数据更新
Model 更新完数据，通知ViewModel数据发生变化
ViewModel 更新View数据

MVC

View 接受用户交互请求
View 将请求转交给Controller处理
Controller 操作Model进行数据更新保存
数据更新保存之后，Model会通知View更新
View 更新变化数据使用户得到反馈

MVVM模式和MVC有些类似，但有以下不同

ViewModel 替换了 Controller，在UI层之下
ViewModel 向 View 暴露它所需要的数据和指令对象
ViewModel 接收来自 Model 的数据
概括起来，MVVM是由MVC发展而来，通过在Model之上而在View之下增加一个非视觉的组件将来自Model的数据映射到View中。

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

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

优点：

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

缺点：

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

VUE和REACT 的区别？

react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流；
vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

核心思想：

vue的整体思想仍然是拥抱经典的html(结构)+css(表现)+js(行为)的形式，vue鼓励开发者使用template模板，并提供指令供开发者使用(v-if、v-show、v-for等等)，因此在开发vue应用的时候会有一种在写经典web应用（结构、表现、行为分离）的感觉。另一方面，在针对组件数据上，vue2.0通过Object.defineProperty对数据做到了更细致的监听，精准实现组件级别的更新。

react整体上是函数式的思想，组件使用jsx语法，all in js，将html与css全都融入javaScript，jsx语法相对来说更加灵活，我一开始刚转过来也不是很适应，感觉写react应用感觉就像是在写javaScript。当组件调用setState或props变化的时候，组件内部render会重新渲染，子组件也会随之重新渲染，可以通过shouldComponentUpdate或者PureComponent可以避免不必要的重新渲染（个人感觉这一点上不如vue做的好）。

ref的作用？

获取dom元素this.$refs.box

获取子组件中的datathis.$refs.box.msg

调用子组件中的方法this.$refs.box.open()

state 和 props 区别是啥？

props和state是普通的 JS 对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。

1.state 是组件自己管理数据，控制自己的状态，可变；
2.props 是外部传入的数据参数，不可变；
3.没有state的叫做无状态组件，有state的叫做有状态组件；
4.多用 props，少用 state，也就是多写无状态组件。