浅析vue数据绑定-tutorial js-php.cn

浅析vue数据绑定

高洛峰

Lepaskan： 2017-01-20 10:28:36

asal

1183 orang telah melayarinya

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

Salin selepas log masuk

由上面的例子看出，Object.defineProperty 传人3个参数

第一个： a对象

第二个： a对象里面的b属性

第三个：属性比较多，列举有用的 value，set，get，configurable

数据绑定原理：

1、实现一个数据监听器Observer，对数据对象的所有属性进行监听，如有变动则拿到最新值并通知 dep数组

2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据

3、实现一个dep数组，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，更新视图

1. 实现observer

var data = {name: &#39;beidan&#39;}; 
observe(data); 
data.name = &#39;test&#39;; // 监听到值变化了 beidan 变成 test  function observe(data) { 
 if (!data || typeof data !== &#39;object&#39;) { 
 return; 
 } 
 // 取出所有属性遍历 
 Object.keys(data).forEach(function(key) { 
  defineReactive(data, key, data[key]); 
 });
}

Salin selepas log masuk

function defineReactive(data, key, val) {  
 Object.defineProperty(data, key, { 
 enumerable: true, // 可枚举 
  configurable: false, // 不能再define
  get: function() {  
   return val; 
  }, 
  set: function(newVal) {  
   console.log(&#39;监听到值变化了 &#39;, val, &#39; 变成 &#39;, newVal); 
   val = newVal; 
  } 
 });
}

Salin selepas log masuk

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(&#39;监听到值变化了 &#39;, val, &#39; 变成 &#39;, newVal);
  val = newVal;
  dep.notify(val); // 通知所有订阅者
 }
 });
}

Salin selepas log masuk

3. compile

bindText: function () { 
 var textDOMs = this.el.querySelectorAll(&#39;[v-text]&#39;), bindText,_context = this;  
 for (var i = 0; i < textDOMs.length; i++) {  
 bindText = textDOMs[i].getAttribute(&#39;v-text&#39;);
 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 
 }); 
 } },

Salin selepas log masuk

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！

更多浅析vue数据绑定相关文章请关注PHP中文网！