Vue 的原理分析 MVVM的理解

今天参去参加了面试,其中问了许多关于MVVM设计模式的探讨,还有关于Vue框架的一些之事,总结一下;

MVC:model 数据层 能够理解为ajax调取过来的一些数据; view 视图层 理解为html 静态的呈现。 controller js 控制层 数据层和视图层的链接层面。
MVVM :MV viewmodel 双向数据绑定 经过MV的交互 来实现model 与view 的响应处理。
vue 是一个渐进式的框架,采用的是一个自底向上的开发模式,渐进式:主张最少,
主流框架分析
咱们看一下现有的一些主流框架从少到多所解决的问题。这个多少并非来评价框架的好坏,而是从设计的角度出发看它涵盖多少内容。javascript

纯模板引擎:最少的就是纯模板引擎,只管状态到界面的映射。html

React和Vue:其实这二者都是很是专一的只作状态到界面映射,以及组件。前端

Backbone:它会给你多一些架构上指导,好比它会让你分层。vue

Angular:它作的事情就更多,它有本身的路由,这些都会包含在里面。java

Ember:相比Angular,Ember作得就更加完全,Ember信奉的是约定优于配置,它会将一切都帮你设计好打包好,你就开箱用就能够了。react

Meteor:Meteor只是一个极端,它是从前到后全都包含,从前端到数据层到数据库,全都帮你打包好。jquery

经过简单的分析,咱们能够感觉到,作得少的框架不必定就不如作得多的框架,这体现出一种取舍。也就是说,作得少的框架能够给你更多的灵活性,但你须要作更多的选择;作得多的框架有更强的侵入性,学习成本更高,灵活性更低。一旦选择了一个侵入性强的框架,那么一些小的部分你就没有机会去切换成其余你更想用的方案。web

因此,React和Vue有一个共同特色,它们都有各自的配套工具,核心虽然只解决一个很小的问题,但它们有生态圈及配套的可选工具,当你把他们一个一个加进来的时候,就能够组合成很是强大的栈,就能够涵盖其余的这些更完整的框架所涵盖的问题。
给你们一个参考的链接:
https://www.zhihu.com/lives/846356429794336768/audition-messages
Vue的做者给咱们的一些启发。面试

在关心一下:具体的vue实现
最重要的VM 利用了ES6的一些新特新,采用了声明式编程(Declarative Programming)替代了过去的类jquery的命令式编程(Imperative Programming)。利用ES6 的一些新特性
Object.defineProperty 给每一个属性设置setter()和getter(),每一值的变更就会对应引发其余的变更,就实现了VM 这个和angular 的脏循环还有所出入。
另外一个重要的是虚拟DOM,这一点vue和react采用的方案都差很少, 不过react的运行速度要比vue快不少, 因为原生的dom节点用不到的属性太多了(document.createElement建立的)要是遍历这个东西的话太耗费性能, 因此就有了虚拟dom, 虚拟dom是用javascript对象模拟的, 其中只包含用的到的属性, 因此进行遍历对比的时候就要快不少, 因为vue在数据变更的时候就要更新页面, 可是vue不知道具体什么东西变化了, 因此只能是把变化的属性关联的东西都重新渲染一下, 这个渲染并非吧原来的东西删了在新建立一个, 而是把新的数据组装成的虚拟dom和原来渲染过的虚拟dom进行一个对比, 把差别的地方渲染到页面上, 这个对比的过程就叫diff算法ajax