Vue.js双向绑定实现的原理

Vue.js最核心的功能有两个，一是响应式的数据绑定系统。二是组件系统

一、访问属性

访问器属性是对象中的一种特殊属性，它不能直接在对象中设置，而必须通过 defineProperty() 方法单独定义。

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象

语法

Object.defineProperty(obj,prop,descriptor)

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

返回值:被传递给函数的对象。

image.png

二、极简双向绑定的实现

随文本框输入文字的变化，span 中会同步显示相同的文字内容；在控制台显示的修改obj.hello的值。视图会相应更新。这样就实现了 model=>view 以及 view=>model 的双向绑定

image.png

image.png