Vue.js双向绑定原理

Vue.js最核心的功能有两个，一个是响应式的数据绑定系统，另一个是组件系统。本文仅仅探究双向绑定是怎样实现的。先讲涉及的知识点，再用简化的代码实现一个简单的hello world示例。

一、访问器属性

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script>
      var obj = {};
      Object.defineProperty(obj, 'hello', {
        get: function() {
          console.log('get方法被调用了');
        },
        set: function(val) {
          console.log('set方法被调用了，参数是' + val);
        }
      });
      obj.hello; //get方法被调用了
      obj.hello = 'abc'; //set方法被调用了，参数是abc
    </script>
  </body>
</html>

View Code