当前位置:   article > 正文

Vue 响应式原理(双向数据绑定原理)_dep.notify

dep.notify

vue 中的双向数据绑定其实就是在单向数据绑定的基础上,给可输入元素(input textare) 等添加change事件,来动态改变绑定的Model 以及视图。

先来一张结构图:

 首先,这个vue 是通过数据劫持结合发布者-订阅者模式来实现的双向绑定。首先通过Object.defineProperty() 给每个属性绑定getter / setter 。当数据发生变化时,发布消息给订阅者,出发相应的回调函数,完成视图更新。

1、数据监听器Observer

源码里面是这样的:

先是处理对象数据,先遍历对象的key 然后通过响应式函数defineReactive 实现响应式数据,内部的原理依然是Object.defineProperty() 实现的,此时数据都是响应式的,也就是说我们可以监听到数据的变化了

  1. function observe(data) {
  2. //先不考虑数组的情况
  3. if (!data || typeof data !== 'object') {
  4. return;
  5. }
  6. // 取出所有属性遍历
  7. Object.keys(data).forEach(function(key) {
  8. defineReactive(data, key, data[key]);
  9. });
  10. };
  11. function defineReactive(data, key, val) {
  12. observe(val); // 监听子属性
  13. Object.defineProperty(data, key, {
  14. enumerable: true, // 可枚举
  15. configurable: false, // 不能再define
  16. get: function() {
  17. return val;
  18. },
  19. set: function(newVal) {
  20. console.log('哈哈哈,监听到值变化了 ');
  21. val = newVal;
  22. }
  23. });
  24. }

接下来,当监听到数据的变化之后,我们需要通知订阅者,以完成相关的数据更新;

如何通知订阅者?我们要实现一个消息订阅器,用来收集消息订阅者,当数据变动时,就触发notify(), notify() 会调用订阅者的 update()  方法,完成视图更新ÿ

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/248203?site=
推荐阅读
相关标签
  

闽ICP备14008679号