Vue - (一) Vue中双向绑定的原理-Object.defineProperty

Vue中双向绑定的原理是使用了Object.defineProperty进行绑定的。

我们先来看下官方给出的说法:

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

看一下Vue源码对于双向绑定的初期实现:

1. Even You 的初期定义(2013-07初次提交)

2. 在源码基础上进行了注释，注释的内容是个人理解，仅供参考。

	
		
		
	
	
		

			
{{msg}}
			
{{msg}}
			
{{msg}}
			
{{what}}
			
{{hey}}
		
		
	

看一下Object.defineProperty的文档说明:

Object.defineProperty(obj, prop, descriptor)

 

obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。

文档地址: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

基于Object.defineProperty实现一个类似的功能: