浅析vue的双向数据绑定原理

作者：中国移动云能力中心——张离

概要：vue的双向数据绑定原理是通过数据劫持+发布/订阅模式来实现的。其中，vue是通过Object.defineProperty()来实现数据劫持的。

一、概述

vue的双向数据绑定原理是通过数据劫持+发布/订阅模式来实现的。其中，vue是通过Object.defineProperty()来实现数据劫持的。

二、思路分析

实现mvvm主要包含两个方面，数据变化更新视图，视图变化更新数据。

view变化data更新可以通过事件监听来实现，例如<input>标签，监听input事件就可以实现了。所以，重点就是 data改变如何更新view。那么我们就需要如何知道数据变化，只要知道数据变化，那么接下来的事情就好处理。Object.defineProperty( )有内置的get和和set方法，对属性设置一个set函数，当这个属性也就是data改变了就会触发这个函数，所以我们只需要将一些需要更新的方法放在里面就可以实现data更新view。

三、实现过程

 首先，我们需要对数据进行劫持监听，所以设置了一个监听器Observer，用来监听所有的属性。如果属性发生了变化，就需要notify订阅者Watcher是否需要更新。由于订阅者Watcher有很多，我们用一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理。我们还需要指令解析器Compile，对每个节点元素进行扫描，利用正则将"{{}}"替换成data中对应的数据，放回页面，展示出来，或者将每个指令对应的节点绑定更新函数。当Watcher收到相应属性变化，就会执行对应的更新函数，从而更新view。所以，实现双向数据绑定原理的有3个步骤：

1、实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2、实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3、实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并更新初始化模板数据以及初始化相应的订阅器。

版权声明 (原创)：本文内容由移动云用户自发贡献，版权归原作者所有，移动云开发者社区不拥有其著作权，亦不承担相应法律责任。如果您发现本社区有涉嫌抄袭的内容，可填写举报信息，一经查实，本社区将立刻删除涉嫌侵权内容。