源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

浅析vue数据绑定

  • 时间:2020-05-20 01:52 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:浅析vue数据绑定
前言:最近团队需要做一个分享,脚进脑子,不知如何分享。最后想着之前一直想研究一下 vue 源码,今天刚好 “借此机会” 研究一下。 网上研究vue数据绑定的文章已经非常多了,但是自己写一遍,敲一遍demo和看别人的文章是完全不同的,so……搬运工来了 [b]目前数据绑定主要有以下三种实现方式:[/b] [b]1.   脏值检查(angular.js)    轮询检测数据变化[/b] DOM事件,譬如用户输入文本,点击按钮等。( ng-click ) [list] [*]XHR响应事件 ( $http )[/*] [*]浏览器Location变更事件 ( $location )[/*] [*]Timer事件( $timeout , $interval )[/*] [*]执行 $digest() 或 $apply()[/*] [/list] [b]2、Object.defineProperty劫持对象的get、set,从而实现对数据的监控。 (vue)[/b] [b]3、发布/订阅者模式实现数据与视图的自动同步[/b] [b]Object.defineProperty的优点[/b] [list] [*]“脏值检测”——数据发生变更后,对于所有的数据和视图的绑定关系进行一次检测,识别是否有数据发生了改变,有变化进行处理,可能进一步引发其他数据的改变,所以这个过程可能会循环几次,一直到不再有数据变化发生后,将变更的数据发送到视图,更新页面展现[/*] [*]Object.defineProperty() 监控对数据的操作,可以自动触发数据同步。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。[/*] [/list] [b]Object.defineProperty的用法[/b]
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 [b]数据绑定原理:[/b] 1、实现一个数据监听器Observer,对数据对象的所有属性进行监听,如有变动则拿到最新值并通知 dep数组 2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据 3、实现一个dep数组 ,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,更新视图 [b]1. 实现observer[/b]
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;
 
  }
 
 });
}
[b]2. 维护一个数组[/b]
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); // 通知所有订阅者 
 } 
 });
}
[b]3. compile[/b]
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   [url=https://github.com/beidan/vue_bind]https://github.com/beidan/vue_bind[/url] 参考链接: [url=http://www.1sucai.cn/article/103297.htm]http://www.1sucai.cn/article/103297.htm[/url] [url=http://www.1sucai.cn/article/99129.htm]http://www.1sucai.cn/article/99129.htm[/url] 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程素材网!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部