Vue 中怎么实现数据双向绑定

本篇文章给大家分享的是有关 Vue 中怎么实现数据双向绑定，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

MVVM 架构的优点

• 低耦合。视图(View)可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 "View" 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。

• 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。

• 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。

• 方便测试。界面素来是比较难于测试的，开发中大部分 Bug 来至于逻辑处理，由于 ViewModel 分离了许多逻辑，可以对 ViewModel 构造单元测试。

Vue专注于MVVM实现了数据的双向绑定，双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。大大方便了数据状态的维护与管理

Vue 对于 MVVM 架构的实践

上面我们了解了MVVM的优点，那么下面就让我们来分析一下Vue.js对于MVVM的实践，数据双向绑定的原理实现吧，先来看下面这张图

Vue.js使用 Object.defineProperty 中的getter 和 setter来对对象中的属性进行操作，结合了观察者模式来实现数据绑定。

简单分析一下流程：一个 JS 对象作为数据传给Vue 实例时，Vue 会遍历它的属性，并使用Object.defineProperty 将它们转化为 getter/setter，Vue在内部会对它们监听，在属性被访问或修改时及时进行通知

在分析Vue 的双向数据绑定之前，我们先了解上图中各个位置的作用

• Observer ：数据监听器，对Vue的数据对象中所有属性进行监听，一旦属性发生改变，将最新值传给watcher(订阅者)

• Compile ：指令编译器，对每个DOM元素节点指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

• Dep ：消息订阅器，内部有一个维护的数组用来收集订阅者(Watcher)，如果数据发生变动，则触发notify 函数，然后调用wacher订阅者的 update 方法

Watcher ：订阅者，连接observer 与compile，获取属性变化的通知，并将数据及时更新到视图当中

让我们一步一步来捋Vue中数据双向绑定的步骤，流程大致可以分为两个阶段

一个是初始化阶段，一个是数据更新阶段

初始化阶段

执行new Vue() ，Vue进入初始化阶段 ,此时开始两个操作，一个是数据监听，一个是页面渲染。

一方面 Vue 会遍历 data 选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能。

另一方面，指令编译器Compile 对元素节点的指令进行扫描和解析，初始化视图，并订阅 Watcher 来更新视图。此时wacher 会将自己添加到消息订阅器中(Dep)，初始化完毕。

数据更新阶段

当data数据中有属性发生变化时，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，随后Dep 开始遍历所有的订阅者，对订阅者Watcher发送通知，并且会调用订阅者的 update 方法，最后，订阅者Watcher收到Dep的数据更新的通知后，也会对视图进行相应的更新。

以上就是 Vue 中怎么实现数据双向绑定，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。