Vue双向绑定实现原理与方法详解

本文实例讲述了Vue双向绑定实现原理与方法。分享给大家供大家参考，具体如下：

昨天接到一个电话面试，上来第一个问题就是Vue双向绑定的原理。当时我并不知道如何监听数据层到视图层的变化，于是没答上来，挂电话后，我赶忙查了下资料，主要思路有如下三种。

思路：使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的Javascript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果Javascript对象或者一个HTML输入字段被侦测到发生了变化，我们将代理事件到发布者-订阅者模式，这会反过来将变化广播并传播到所有绑定的对象和元素。

思路：angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular只有在指定的事件触发时进入脏值检测，大致如下：

• DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
• XHR响应事件 ( $http )
• 浏览器Location变更事件 ( $location )
• Timer事件( $timeout , $interval )
• 执行 $digest() 或 $apply()

思路： vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

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

var obj = {};
  Object.defineProperty(obj, 'hello', {
    get: function() {
      console.log('get val:'+ val);
      return val;
   　 },
  　　set: function(newVal) {
      val = newVal;
      console.log('set val:'+ val);
    }
  });
obj.hello='111';//控制台打印set val:111
obj.hello; //控制台打印get val:111

当获取hello属性时，触发get；设置hello值时，触发set；这就是vue实现双向绑定的核心

完整代码如下

{{title}}

{{text}}
click me

GitHub地址：https://github.com/ChrisLuckComes/Vue2WayBind

感兴趣的朋友可以使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。