Vue的核心特性

阅读目录

1. Vue与传统开发的区别
2. 理解MVVM模型
   •  MVC、MVP与MVVM的区别
3. 数据双向绑定

 

---

回到顶部

Vue与传统开发的区别

　　Vue是一个高性能的JavaScript框架，也是一个创建单页面应用的Web应用框架。在传统开发中，我们需要直接操作DOM来写需求，而Vue提供了声明式操作DOM的能力。Vue使用了MVVM模型，实现数据与视图的双向绑定，通过视图中元素绑定的事件来修改数据，数据的变动来驱动视图的更新，无需关心具体如何操作DOM。这里的事件监听不再需要像以前那样，首先通过JavaScript获取DOM元素，然后进行接下来的DOM操作，Vue有一套v-前缀的指令系统在模板编写阶段便很方便地将DOM元素与需要的DOM操作绑定到一起。另外，Vue允许将一个网页分割成多个可复用的组件，降低整个系统的耦合度，同时方便调试，提高可维护性。

回到顶部

理解MVVM模型

　　

 

 

• Model：管理的数据；
• View：视图，也即用户界面；
• ViewModel：作为业务逻辑层，是数据与视图之间的桥梁，在Vue中通过创建Vue实例来建立起这样的桥梁。比如，在DOM元素中注册事件监听器来监听DOM元素的更新，从而利用回调函数触发数据的更新，实现视图到数据的更新；而Vue的响应式原理实现的数据绑定，可以使数据发生改变时触发视图的更新，实现数据到视图的更新。

 MVC、MVP与MVVM的区别

 

 

　　图1 MVC模式

 

图2 MVP模式

 

　　三种模式的目的都是为了使业务与视图的实现代码分离，降低系统耦合性。因为缺乏前两种模式的实际开发经验，我很难深入理解MVC和MVP两种模式。总的来说，在早期的MVC模式中，View是直接依赖Model的，View的可复用性是受限制的，也不适用于前后端分离的Web应用。而MVP模式则使用Presenter替代MVC模式中的Controller，使得Model与View完全分离，降低耦合性，双方通过Presenter来进行通信。Model、View、Presenter之间的交互通过接口进行，因此要增加大量的接口定义，开发难度增加。相比于MVP，MVVM使用双向数据绑定来完成Model到View或View到Model的更新，开发者无需关心具体的实现细节。

回到顶部

数据双向绑定

　　在DOM元素中注册事件监听器来监听DOM元素的更新，从而利用回调函数触发数据的更新，实现视图到数据的更新；而Vue的响应式原理实现的数据绑定，可以使数据发生改变时触发视图的更新，实现数据到视图的更新。