h5在线编辑_秀堂h5_手机ui设计_答题类h5_h5测试小游戏
当前位置:建站首页 > 新闻资讯 > 手机网站 >

小程序入口有什么_浅析vue数据绑定

发表日期:2021-01-12 15:04文章编辑:jianzhan浏览次数: 标签:    

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

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 

参考链接:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!


相关新闻