和其他两大框架相比
vue
是一个 “渐进式” 的 JavaScript
mvvm
框架。
渐进式 是指 vue
官方提供了一系列的工具,如路由 vue-router
,状态树管理器 vuex
,网络请求 axios
(非 vue
官方出,纯推荐)等。如果您不打算做 SPA
,那么您是不需要 vue-router
的;假如您的页面不存在非常复杂的交互或数据递进式体验时,您可能不需要 vuex
... 总之,官方都为开发者考虑好了,少了技术选型的痛苦。
这里要拿三大框架说说事。react
和 vue
相比,react
官方只提供了核心库(core + dom)和路由,其他都需要开发者自行选择工具库(immutable.js
,redux
,mobx
等等),给开发者留下了更多的可能(社区都有成熟方案了,2333)。react
可以说是 开放式 的框架。
Angular
和 vue
相比,不说具体语法,只说开发模式,Angular
其实也是一个渐进式的框架。Angular
包是把所有的功能模块都集合在一起,但实际上,这些功能模块都是各自独立的小模块,如 forms
表单模块,双向绑定就出自这 model
;core
模块是 Angular
的核心模块,如组件装饰构造器 Component
;还有 http
模块提供网络请求功能等等。其实 Angular
也没有很重量,它只是提供了一个大而全的解决方案。所以,我认为 Angular
是一个 集中式 的前端框架。
响应式原理
vue
是一个响应式的 mvvm
框架,那它的 响应式 表现在哪呢?
我们知道,vue
只支持 IE9
及以上浏览器(不包含动画),最主要的一个点是因为一个 ES5
对象的静态方法 Object.defineProperty
。Object.defineProperty
可以定义对象属性的 getter/setter
,vue
在这对属性里加入了观察者代码,当对象属性被修改时,vue
会追踪变化并告知依赖组件去更新实时的值。具体就是由下面的几个功能模块来实现的:
-
Observer
数据监听器:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty
的getter
和setter
来实现。 -
Compile
指令解析器:它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。 -
Watcher
订阅者, 作为连接Observer
和Compile
的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。 -
Dep
消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher
),数据变动触发notify
函数,再调用订阅者的update
方法。
对开发者来说,mvvm
是一种非常省心的开发模式,我们只需要关注 view
和 model
的对应关系即可,不用在乎两者是怎么保持对应一致的关系,因为框架都替我们做好了。
mvvm
框架必须注意保持model
和view
间的一致性,这意味着操作真实dom
是一种很危险的行为,会破坏dom
和vdom
的一致性。在您未有十足的把握前,请不要操作真实dom
。