浅析vue数据绑定

(编辑：jimmy 日期: 2025/9/28 浏览：2)

前言：最近团队需要做一个分享，脚进脑子，不知如何分享。最后想着之前一直想研究一下 vue 源码，今天刚好 “借此机会” 研究一下。

网上研究vue数据绑定的文章已经非常多了，但是自己写一遍，敲一遍demo和看别人的文章是完全不同的，so……搬运工来了

目前数据绑定主要有以下三种实现方式：

1. 脏值检查（angular.js）轮询检测数据变化

DOM事件，譬如用户输入文本，点击按钮等。( ng-click )

XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout , $interval )
执行 $digest() 或 $apply()

2、Object.defineProperty劫持对象的get、set，从而实现对数据的监控。（vue）

3、发布／订阅者模式实现数据与视图的自动同步

Object.defineProperty的优点

“脏值检测”——数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现
Object.defineProperty() 监控对数据的操作，可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

Object.defineProperty的用法

var a = {};"b", {"我被赋值了！" + newValue);"我被取值了！");"color: #ff0000">数据绑定原理：
1、实现一个数据监听器Observer，对数据对象的所有属性进行监听，如有变动则拿到最新值并通知 dep数组
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据
3、实现一个dep数组 ，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，更新视图
1. 实现observer


var data = {name: 'beidan'};"htmlcode">

function defineReactive(data, key, val) {"color: #000000">2. 维护一个数组


function Dep() {"htmlcode">

bindText: function () {"https://github.com/beidan/vue_bind">https://github.com/beidan/vue_bind
参考链接：
https://www.jb51.net/article/103297.htm
https://www.jb51.net/article/99129.htm
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

        
            上一篇：JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
            下一篇：JavaScript使用正则表达式获取全部分组内容的方法示例