浅析vue数据绑定
前言：最近团队需要做一个分享，脚进脑子，不知如何分享。最后想着之前一直想研究一下 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
参考链接：
https://www.jb51.net/article/103297.htm
https://www.jb51.net/article/99129.htm
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了详解在Vue.js编写更好的v-for循环的6种技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了vue2.0如何动态绑定img的src属性(三元运算)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
编程式路由在我们的项目使用过程中最常用的的方法了。这篇文章主要介绍了讲解vue-router之什么是编程式路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了Vue关于访问外链失败的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
vue3结合ts从零实现vueuse的useRouteQuery方法
这篇文章主要为大家详细介绍了如何使用vue3与ts从零实现一个类vueuse的useRouteQuery方法,并解决vueuse的useRouteQuery方法存在的一些问题,感兴趣的可以了解下2024-03-03
这篇文章主要给大家介绍了关于Vue3项目中引入html页面的相关资料,Vue3是一个JavaScript框架,通常我们使用它来构建单页应用程序(SPA),如果你想在HTML页面中使用Vue3,可以参考这篇文章,需要的朋友可以参考下2023-09-09
随着Vue3的日益成熟,越来越多的团队开始考虑将现有Vue2项目升级到Vue3,作为一次重大版本更新,Vue3在带来性能提升和新特性的同时,也引入了一些不兼容的变化,本文将全面解析Vue2到Vue3升级过程中需要注意的关键点,帮助你顺利完成迁移,需要的朋友可以参考下2025-04-04
这篇文章主要为大家详细介绍了Vue实现简单图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
Vue + better-scroll 实现移动端字母索引导航功能
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue + better-scroll 实现移动端字母索引导航功能,需要的朋友可以参考下2018-05-05
这篇文章主要为大家详细介绍了vue3中watch如何停止监视,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下2024-12-12
最新评论