Vue双向绑定实现原理与方法详解，能否详细阐述？

本文共计741个文字，预计阅读时间需要3分钟。

本文实例讲述了Vue双向绑定的实现原理与方法。供大家参考学习：

昨日接到一个电话面试，第一个问题就是关于Vue双向绑定的原理。当时我并不知道如何监听数据层到视图层的变动，以下是我的回答：

Vue双向绑定原理是基于数据劫持结合发布者-订阅者模式的一种实现。具体来说，Vue内部通过Object.defineProperty()方法对数据进行劫持，当数据变化时，发布者会通知所有订阅者，触发相应的更新操作。

以下是一个简单的双向绑定实现：

javascriptfunction defineReactive(data, key, value) { // 监听数据变化 const dep=new Dep(); Object.defineProperty(data, key, { enumerable: true, configurable: true, get: function () { // 添加订阅者 dep.addSub(this); return value; }, set: function (newValue) { // 数据变化，通知订阅者 if (value !==newValue) { value=newValue; dep.notify(); } } });}

// 发布者-订阅者模式function Dep() { this.subscribers=[];}

Dep.prototype={ addSub: function (sub) { this.subscribers.push(sub); }, notify: function () { this.subscribers.forEach(function (sub) { sub.update(); }); }};

// 视图层function Watcher(data, key, callback) { this.data=data; this.key=key; this.callback=callback; this.callback(this.data[this.key]);}

Watcher.prototype={ update: function () { this.callback(this.data[this.key]); }};

// 实现双向绑定function bindTwoWay(data, key) { let value=data[key]; Object.defineProperty(data, key, { get: function () { return value; }, set: function (newValue) { value=newValue; document.querySelector(`[v-model=${key}]`).value=value; } });}

在实际开发中，Vue框架已经为我们封装了这些细节，我们可以直接使用`v-model`指令来实现双向绑定。希望这个实例能帮助大家更好地理解Vue双向绑定的原理。

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

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

1.发布者-订阅者模式（backbone.js）

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

2.脏值检查（angular.js）

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

• DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
• XHR响应事件 ( $github.com/ChrisLuckComes/Vue2WayBind

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

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

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