vue双向数据绑定实现原理

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

• 访问器属性

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

   var obj = { };
  
   // 为obj定义一个名为 hello 的访问器属性
  
   Object.defineProperty(obj, "hello", {
  
     get: function () {return sth},
  
     set: function (val) {/* do sth */}
  
   })
  
    obj.hello // 可以像普通属性一样读取访问器属性
  
   访问器属性的"值"比较特殊，读取或设置访问器属性的值，实际上是调用其内部特性：get和set函数。
  
   obj.hello // 读取属性，就是调用get函数并返回get函数的返回值
  
   obj.hello = "abc" // 为属性赋值，就是调用set函数，赋值其实是传参；
  

get 和 set 方法内部的 this 都指向 obj，这意味着 get 和 set 函数可以操作对象内部的值。另外，访问器属性的会"覆盖"同名的普通属性，因为访问器属性会被优先访问，与其同名的普通属性则会被忽略。

• 极简双向数据绑定原理

2.png

原博客