前言:最近团队需要做一个分享,脚进脑子,不知如何分享。最后想着之前一直想研究一下 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 = {};

Object.defineProperty(a, "b", {

set: function (newValue) {

console.log("我被赋值了!" + newValue);

},

get: function () {

console.log("我被取值了!");

return 2
}
})

a.b = 3; //我被赋值了!

console.log(a.b); //我被取值了! //打印 2
由上面的例子看出,Object.defineProperty  传人3个参数
第一个: a对象
第二个: a对象里面的b属性
第三个: 属性比较多,列举有用的 value,set,get,configurable
 
 
数据绑定原理:
1、实现一个数据监听器Observer,对数据对象的所有属性进行监听,如有变动则拿到最新值并通知 dep数组
2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据
3、实现一个dep数组 ,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,更新视图
 
 
1. 实现observer
var data = {name: 'beidan'};

observe(data);

data.name = 'test'; // 监听到值变化了 beidan 变成 test

function observe(data) {

if (!data || typeof data !== 'object') {

return;

}

// 取出所有属性遍历

Object.keys(data).forEach(function(key) {

defineReactive(data, key, data[key]);

});
}
function defineReactive(data, key, val) {


Object.defineProperty(data, key, {

enumerable: true, // 可枚举

configurable: false, // 不能再define

get: function() {

return val;

},

set: function(newVal) {

console.log('监听到值变化了 ', val, ' 变成 ', newVal);

val = newVal;

}

});
}

2. 维护一个数组

function Dep() {

this.subs = [];
}

Dep.prototype = {

addSub: function (sub) {

this.subs.push(sub);

},

notify: function (val) {

this.subs.forEach(function (sub) {

sub.update(val)

});

}
}; function defineReactive(data, key, val) {
Object.defineProperty(data, key, {
……
set: function(newVal) {
if (val === newVal) return;
console.log('监听到值变化了 ', val, ' 变成 ', newVal);
val = newVal;
dep.notify(val); // 通知所有订阅者
}
});
}

3. compile

bindText: function () {

var textDOMs = this.el.querySelectorAll('[v-text]'),
bindText,_context = this;


for (var i = 0; i < textDOMs.length; i++) {

bindText = textDOMs[i].getAttribute('v-text');

textDOMs[i].innerHTML = this.data[bindText];


var val = textDOMs[i]


var up = function (text) {

val.innerText = text

}

 _context.dep.addSub({

value: textDOMs[i],

update: up

});

}
},
 
 
最后,附上源码 github   https://github.com/beidan/vue_bind
 
 
参考链接:
http://www.cnblogs.com/LuckyWinty/p/6102913.html
http://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension
 
 
 
 
 
 
 
 
 

浅析vue数据绑定的更多相关文章

  1. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  2. Vue数据绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...

  3. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  4. 17: VUE数据绑定 与 Object.defineProperty

    VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...

  5. Vue数据绑定(一)

    Contents Vue作为当下炙手可热的前端三大框架之一,一直都想深入研究一下其内部的实现原理,去学习MVVM模式的精髓.如果说MVVM是当下最流行的图形用户界面开发模式,那么数据绑定则是这一模式的 ...

  6. (三)vue数据绑定及相应的命令

    vue数据绑定及相应的命令 {{ Text }} 双括号进行数据渲染 动态绑定数据 例如:{{message}} data: { return{ message: 'Hello Vue!' } } 2 ...

  7. 「每日一题」有人上次在dy面试,面试官问我:vue数据绑定的实现原理。你说我该如何回答?

    关注「松宝写代码」,精选好文,每日一题 ​时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...

  8. 浅析vue的双向数据绑定

    vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的.1.defineProperty 数据展示 Object.defin ...

  9. vue数据绑定原理

    一.定义 vue的数据双向绑定是基于Object.defineProperty方法,通过定义data属性的get和set函数来监听数据对象的变化,一旦变化,vue利用发布订阅模式,通知订阅者执行回调函 ...

随机推荐

  1. vs 2012svn 插件设置

  2. hadoop第一篇

    1 hadoop整体架构 2 各组件关系 hdfs只是一个存储空间,他的完整名字是分布式文件系统.有名可知他的作用了. hbase是一个内存数据库,简单点说hbase把表啊什么的存在hdfs上.

  3. 前台html与后台php通信(上传文件)

    这部分为导入txt文本文件,存放在服务器然后返回txt文本的内容到前台进行相应操作 前台html代码 <div id="coordinate_div">         ...

  4. H3C inode for OSX 10.10 校园网客户端亲测可用

    1.打开终端 2.输入以下命令 sudo /library/StartupItems/iNodeAuthService/iNodeAuthService start 3.输入管理密码 4.打开客户端联 ...

  5. 顽强的的砂锅之——深究finally代码块与return语句的执行顺序!

    当问到finally代码块的执行顺序,就算刚刚学编程的小白都能毫不犹豫的说出答案:不管异常发生与否,finally语句块的代码一定会被执行!大体上这样讲是没有错,但是finally块中的代码一定会有效 ...

  6. mysql中SQL执行过程详解与用于预处理语句的SQL语法

    mysql中SQL执行过程详解 客户端发送一条查询给服务器: 服务器先检查查询缓存,如果命中了缓存,则立刻返回存储在缓存中的结果.否则进入下一阶段. 服务器段进行SQL解析.预处理,在优化器生成对应的 ...

  7. (中等) POJ 2528 Mayor's posters , 离散+线段树。

    Description The citizens of Bytetown, AB, could not stand that the candidates in the mayoral electio ...

  8. 推荐一款非常好用的java反编译工具(转)

    源: 推荐一款非常好用的java反编译工具

  9. Android 屏幕适配方案(转载)

    3.百分比的引入 1.引入 其实我们的解决方案,就是在项目中针对你所需要适配的手机屏幕的分辨率各自简历一个文件夹. 如下图: 然后我们根据一个基准,为基准的意思就是: 比如480*320的分辨率为基准 ...

  10. IOS即时通讯XMPP搭建openfire服务器 分类: ios技术 2015-03-07 11:30 53人阅读 评论(0) 收藏

    一.下载并安装openfire 1.到http://www.igniterealtime.org/downloads/index.jsp下载最新openfire for mac版 比如:Openfir ...