是如何把模型和视图建立起关联关系的,通过了

作者: 前端  发布:2019-11-22

Vue.js是如何做到数据响应的?

2018/08/07 · JavaScript · Vue

原文出处: [Gregg

这方面的文章很多,但是我感觉很多写的比较抽象,本文会通过举例更详细的解释。(此文面向的Vue新手们,如果你是个大牛,看到这篇文章就可以点个赞,关掉页面了。)通过阅读这篇文章,你将了解到:

原文链接:

Pollack]()   译文出处:[众成翻译

_小生_]()   

许多前端JavaScript框架(例如Angular,React和Vue)都有自己的数据相应引擎。通过了解相应性及其工作原理,您可以提高开发技能并更有效地使用JavaScript框架。在视频和下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity。

如果您观看此视频而不是阅读文章,请观看系列中的下一个视频,与Vue的创建者Evan You讨论反应性和代理。

1.Vue数据响应式的设计思想
2.了解Observer,Dep,Watcher的源码实现原理
9159.com,3.getter/setter 拦截数据方式的不足及解决方案

Vue.js 最显著的功能就是响应式系统,它是一个典型的 MVVM 框架,模型(Model)只是普通的 JavaScript 对象,修改它则视图(View)会自动更新。这种设计让状态管理变得非常简单而直观,不过理解它的原理也很重要,可以避免一些常见问题。下面让我们深挖 Vue.js 响应式系统的细节,来看一看 Vue.js 是如何把模型和视图建立起关联关系的。

The Reactivity System

当你第一次看到它时,Vue的响应系统看起来很神奇。拿这个简单的Vue应用程序:

9159.com 1

9159.com 2

不知何故,Vue只知道如果价格发生变化,它应该做三件事:

  • 更新我们网页上的价格值。
  • 重新计算乘以price * quantity的表达式,并更新页面。
  • 再次调用totalPriceWithTax函数并更新页面。

但是等等,你应该会觉得奇怪,当价格变化时,Vue如何知道要更新什么,以及它如何跟踪所有内容?

9159.com 3

这不是JavaScript编程常规的工作方式。

如果你不明白,那我们试着看看常规的JavaScript是怎么运行的。例如,如果我运行此代码:

9159.com 4

你觉得它打印什么?由于我们没有使用Vue,它将打印10。

JavaScript

>> total is 10

1
>> total is 10

在Vue,我们希望每当价格或数量更新时,总计都会得到更新。我们想要:

JavaScript

>> total is 40

1
>> total is 40

不幸的是,JavaScript是程序性的,而不是被动的,所以这在现实生活中不起作用。为了使数据变化得到相应,我们必须使用JavaScript来使事情表现不同。

一、设计模式

Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty(点我查看该属性)来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后进行相应的处理。

现在我们来看一下下面的图,共涉及5个概念,data和view的意义很明显,主要讲解Observer,Dep和Watcher。
Observer:数据的观察者,让数据对象的读写操作都处于自己的监管之下。当初始化实例的时候,会递归遍历data,用Object.defineProperty来拦截数据(包含数组里的每个数据)。
Dep:数据更新的发布者,get数据的时候,收集订阅者,触发Watcher的依赖收集;set数据时发布更新,通知Watcher 。
Watcher:数据更新的订阅者,订阅的数据改变时执行相应的回调函数(更新视图或表达式的值)。
一个Watcher可以更新视图,如html模板中用到的{{test}},也可以执行一个$watch监督的表达式的回调函数(Vue实例中的watch项底层是调用的$watch实现的),还可以更新一个计算属性(即Vue实例中的computed项)。

9159.com 5

图中红色的箭头表示的是收集依赖时获取数据的流程。Watcher会收集依赖的时候(这个时机可能是实例创建时,解析模板、初始化watch、初始化computed,也可能是数据改变后,Watcher执行回调函数前),会获取数据的值,此时Observer会拦截数据(即调用get函数),然后通知Dep可以收集订阅者啦。Dep将订阅数据的Watcher保存下来,便于后面通知更新。

图中绿色的箭头表示的是数据改变时,发布更新的流程。当数据改变时,即设置数据时,此时Observer会拦截数据(即调用set函数),然后通知Dep,数据改变了,此时Dep通知Watcher,可以更新视图啦。

如何追踪变化

问题

我们需要保存计算总数的方式,以便在价格或数量变化时重新运行。

二、 代码实现

我们先来看一个简单的例子。代码示例如下:

解决方案

首先,我们需要一些方法告诉我们的应用程序,“我即将运行的代码,存储它,我可能需要你在另一个时间运行它。”然后我们将要运行代码,如果价格或数量变量得到更新,再次运行存储的代码。

9159.com 6

请注意,我们在目标变量中存储了一个匿名函数,然后调用了一个记录函数。使用ES6箭头语法我也可以这样写:

9159.com 7

请注意,我们在目标变量中存储了一个匿名函数,然后调用了一个记录函数。使用ES6箭头语法我也可以这样写:

9159.com 8

记录的方法:

9159.com 9

我们正在存储目标(在我们的例子中是{total = price * quantity}),所以我们可以稍后运行它。

9159.com 10

这将遍历存储阵列中存储的所有匿名函数并执行它们中的每一个。

然后在我们的代码中,我们可以:

9159.com 11

很简单吧?如果您需要阅读并尝试再次掌握它,这里的代码就完整了。仅供参考,如果您想知道原因,我会以特定的方式对此进行编码。

9159.com 12

JavaScript

10 40

1
2
10
40

Observer

下图是Observer类的结构

9159.com 13

我们先来看看Observer的实现(大家看代码的时候可以注意下引文的注释,英文的注释是官方的,说的很棒。中文注释是我加的)

/**
 * Attempt to create an observer instance for a value,
 * returns the new observer if successfully observed,
 * or the existing observer if the value already has one.
(observer实例的生成函数,如果数据没有被observe过,那么新建一个observer类并返回,否则直接返回observer类)
 */
function observe (value, asRootData) {
  if (!isObject(value)) {
    return
  }
  var ob;
  //如果存在__ob__属性,说明该对象没被observe过,不是observer类
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__;
  } else if (
    observerState.shouldConvert &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    //如果数据没有被observe过,且数据是array或object类型,那么将数据转化为observer类型,所以observer类接收的是对象和数组。
    ob = new Observer(value);
  }
  //如果是RootData,即咱们在新建Vue实例时,传到data里的值,只有RootData在每次observe的时候,会进行计数。
  vmCount是用来记录此Vue实例被使用的次数的,
  比如,我们有一个组件logo,页面头部和尾部都需要展示logo,都用了这个组件,那么这个时候vmCount就会计数,值为2
  if (asRootData && ob) {
    ob.vmCount++;
  }
  return ob
}
//下面是oberver类
/**
 * Observer class that are attached to each observed
 * object. Once attached, the observer converts target
 * object's property keys into getter/setters that
 * collect dependencies and dispatches updates.
 */
var Observer = function Observer (value) {
  this.value = value;
  this.dep = new Dep();
  this.vmCount = 0;
  //def是定义的函数,使用Object.defineProperty()给value添加不可枚举的属性,__ob__是一个对象被observe的标志。
    我们在开发的过程中,有时会遇到,数据改变但视图没有更新的问题。
    这个时候,你可以log一下,看看该对象是否有__ob__属性来判断该对象是不是被observe了,如果没有,那么数据改变后视图是不可能更新的。
  def(value, '__ob__', this);
  //数组特殊处理,下面详细讲解
  if (Array.isArray(value)) {
    var augment = hasProto
      ? protoAugment
      : copyAugment;
    augment(value, arrayMethods, arrayKeys);
    this.observeArray(value);
  } else {
    //对于对象,遍历对象,并用Object.defineProperty转化为getter/setter,便于监控数据的get和set
    this.walk(value);
  }
};

//遍历对象,调用defineReactive将每个属性转化为getter/setter
/**
 * Walk through each property and convert them into
 * getter/setters. This method should only be called when
 * value type is Object.
 */
Observer.prototype.walk = function walk (obj) {
  var keys = Object.keys(obj);
  for (var i = 0; i < keys.length; i++) {
    defineReactive$$1(obj, keys[i], obj[keys[i]]);
  }
};

/**
 * Observe a list of Array items.
 */
//observe每个数组元素(observe会生成Observer类)
Observer.prototype.observeArray = function observeArray (items) {
  for (var i = 0, l = items.length; i < l; i++) {
    observe(items[i]);
  }
};
/**
 * Define a reactive property on an Object.
 */
function defineReactive$$1 (
  obj,
  key,
  val,
  customSetter
) {
  //实例化一个Dep,这个Dep存在在下面的get和set函数的作用域中,用于收集订阅数据更新的Watcher。这里一个Dep与一个属性(即参数里的key)相对应,一个Dep可以有多个订阅者。
  var dep = new Dep();
  var property = Object.getOwnPropertyDescriptor(obj, key);
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  var getter = property && property.get;
  var setter = property && property.set;
  //注意下面这行代码,设置getter/setter之前,会observe该属性对应的值(val)。
  比如此时参数传入的obj是{ objKey: { objValueKey1:{ objValueKey2: objValueValue2 } } },
  key是objKey,
  val是{ objValueKey1:{ objValueKey2: objValueValue2 } },
  那么这个时候{ objValueKey1:{ objValueKey2: objValueValue2 } }对象也会被observe到,在observe该对象的时候,{ objValueKey2: objValueValue2 }也会被observe到。
  以此类推,不管对象的结构有多深都会被observe到。
  var childOb = observe(val);
  //设置getter/setter
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      //获取属性的值,如果这个属性在转化之前定义过getter,那么调用该getter得到value的值,否则直接返回val。
      var value = getter ? getter.call(obj) : val;
      注意这里,这里是Dep收集订阅者的过程,只有在Dep.target存在的情况下才进行这个操作,在Watcher收集依赖的时候才会设置Dep.target,所以Watcher收集依赖的时机就是Dep收集订阅者的时机。
      调用get的情况有两种,一是Watcher收集依赖的时候(此时Dep收集订阅者),二是模板或js代码里用到这个值,这个时候是不需要收集依赖的,只要返回值就可以了。
      if (Dep.target) {
        dep.depend();
        //注意这里,不仅这个属性需要添加到依赖列表中,如果这个属性对应的值是对象或数组,那么这个属性对应的值也需要添加到依赖列表中,原因后面详细解释
        if (childOb) {
          childOb.dep.depend();
        }
        //如果是数组,那么数组中的每个值都添加到依赖列表里
        if (Array.isArray(value)) {
          dependArray(value);
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      var value = getter ? getter.call(obj) : val;
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if ("development" !== 'production' && customSetter) {
        customSetter();
      }
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      //当为属性设置了新的值,是需要observe的
      childOb = observe(newVal);
      //set的时候数据变化了,通知更新数据
      dep.notify();
    }
  });
}

/**
 * Collect dependencies on array elements when the array is touched, since
 * we cannot intercept array element access like property getters.
 */
function dependArray (value) {
  for (var e = (void 0), i = 0, l = value.length; i < l; i++) {
    e = value[i];
    //在调用这个函数的时候,数组已经被observe过了,且会递归observe。(看上面defineReactive函数里的这行代码:var childOb = observe(val);)
    所以正常情况下都会存在__ob__属性,这个时候就可以调用dep添加依赖了。
    e && e.__ob__ && e.__ob__.dep.depend();
    if (Array.isArray(e)) {
      dependArray(e);
    }
  }
}
<div id="main">
  <h1>count: {{times}}</h1>
</div>
<script src="vue.js"></script>
<script>
  var vm = new Vue({
    el: '#main',
    data: function () {
      return {
        times: 1
      };
    },
    created: function () {
      var me = this;
      setInterval(function () {
        me.times++;
      }, 1000);
    }
  });
</script>

 问题

我们可以根据需要继续记录目标,但是有一个更强大的解决方案可以扩展我们的应用程序。那就是一个负责维护目标列表的类,当我们需要它们重新运行时,这些目标列表会得到通知。

我们关注以下几点:

1.Observer类中的属性和方法都比较好理解,我在这里只说一下vmCount属性:
vmCount属性是用来记录该实例被创建的次数,我们看下面的代码(戳我查看demo源码及效果),调用了两次my-component组件,这个时候vmCount为2.

<div >
        <div id="example">
          <my-component></my-component>
          <my-component></my-component>
        </div>
    </div>
        <script src="./vue.js"></script>
        <script>
        var data = { counter: 1 }
        Vue.component('my-component', {
          template: '<div>{{ counter }}</div>',
          data: function () {
            return data
          }
        })
        // 创建根实例
        var app2 = new Vue({
          el: '#example'
        })
</script>

效果:

9159.com 14

运行后,我们可以从页面中看到,count 后面的 times 每隔 1s 递增 1,视图一直在更新。在代码中仅仅是通过 setInterval 方法每隔 1s 来修改 vm.times 的值,并没有任何 DOM 操作。那么 Vue.js 是如何实现这个过程的呢?我们可以通过一张图来看一下,如下图所示:
9159.com 15

解决方法: 使用Class

我们可以开始解决这个问题的一种方法是将这种行为封装到它自己的Class中,这是一个实现标准编程观察者模式的依赖类。

因此,如果我们创建一个JavaScript类来管理我们的依赖项(它更接近Vue处理事物的方式),它可能看起来像这样:

9159.com 16

让它运行:

9159.com 17

它仍然有效,现在我们的代码感觉更可靠了。只有仍然感觉有点奇怪的是target()的设置和运行。

getter/setter方法拦截数据的不足:

  1. 当对象增删的时候,是监控不到的。比如:data={a:"a"},这个时候如果我们设置data.test="test",这个时候是监控不到的。因为在observe data的时候,会遍历已有的每个属性(比如a),添加getter/setter,而后面设置的test属性并没有机会设置getter/setter,所以检测不到变化。同样的,删除对象属性的时候,getter/setter会跟着属性一起被删除掉,拦截不到变化。
  2. getter/setter是针对对象的,那么对于数组的修改,怎样监控变化呢
  3. 每次给数据设置值得时候,都会调用setter函数,这个时候就会发布属性更新消息,即使数据的值没有变。从性能方便考虑我们肯定希望值没有变化的时候,不更新模板。

对于第一个问题,Vue官方给出了vm.$set/Vue.set和vm.$delete/Vue.delete这样的api来解决这个问题。我们来看下$set的代码:

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 */
function set (target, key, val) {
   //对于数组的处理,调用变异方法splice,这个时候数组的Dep会发布更新消息
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val
  }
  //如果set的是对象已经有的属性,那么该属性已经有getter/setter函数了,此时直接修改即可
  if (hasOwn(target, key)) {
    target[key] = val;
    return val
  }
  var ob = (target).__ob__;
  if (target._isVue || (ob && ob.vmCount)) {
    "development" !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    );
    return val
  }
  if (!ob) {
    target[key] = val;
    return val
  }
  //如果是对象没有的属性,则添加getter/setter
  defineReactive$$1(ob.value, key, val);
  //注意此处,对象的Dep会发布更新
  ob.dep.notify();
  return val
}

上面的代码比较简单,看过注释应该就能明白,我不做过多解释。我们着重注意下这句代码:ob.dep.notify(),对象的Dep发布更新。可是这个dep是在什么地方收集的订阅者呢?

还记得defineReactive函数里让大家注意的这句代码吗:childOb.dep.depend(),这句代码就是在收集订阅者
仔细阅读Observer相关的代码,我们会发现,dep实例化的地方有两处
一处是在defineReactive函数里,每次调用这个函数的时候都会创建一个新的Dep实例,存在在getter/setter闭包函数的作用域链上,是为对象属性服务的。在Watcher获取属性的值的时候收集订阅者,在设置属性值的时候发布更新。
另一处是在observe函数中,此时的dep挂在被observe的数据的__ obj__属性上,他是为对象或数组服务的,在Watcher获取属性的值的时候,如果值被observe后返回observer对象(对象和数组才会返回observer),那么就会在此时收集订阅者,在对象或数组增删元素时调用$set等api时发布更新的;
defineReactive函数的getter函数里这段代码就是在收集订阅者:

get: function reactiveGetter () {
      var value = getter ? getter.call(obj) : val;
      if (Dep.target) {
        dep.depend();
        if (childOb) {
          //注意这里,此处的dep就是在执行var childOb = observe(val)时产生的,是用来收集childOb的订阅者的
          childOb.dep.depend();
        }
        if (Array.isArray(value)) {
          dependArray(value);
        }
      }

我们来看个例子,data={testkey:{testValueKey:testValueValue}},这个时候模板里有{{testkey}},模板的Watcher在执行getter函数的时候,testkey属性的getter对应的dep会将此Watcher收集为订阅者;同时{testValueKey:testValueValue}对象也会将此Watcher收集为订阅者(我们在给testkey属性设置getter/setter函数时,会执行var childOb = observe(val)和childOb.dep.depend(),而此时的val就是{testValueKey:testValueValue}对象)。
在这个时候我们设置this.$set(this.testkey, "addKey", "addValue"),就会触发this.testkey对应的值:{testValueKey:testValueValue}对象的dep发布更新,而此时dep的订阅者中包含模板{{testkey}}的watcher,此时模板更新视图。同理每个数组也是有相应的dep来发布更新的,比如data={arr:[1,2,2]}},此时[1,2,2]这个数组的__ obj__属性下也会有dep的。

其实只有对象和数组才会有这种删除和增加的操作,而其他的字符串等都是直接赋值修改的,getter/setter都是能检测到的,所以observe对象和数组的时候会创建一个dep,用来收集订阅和发布更新

对于第二个问题,我们先来考虑下数组修改有哪几种情况
1.当你利用索引直接设置一个项时
比如:data={arr:[1,2,3]},这个时候我设置this.arr[0] = 4,会发现数据改变了,但是视图没有更新,Vue根本没有检测到变化。
这个时候可能你会说,observeArray的时候不是会遍历数组,observe每个元素吗?可是Observe数据的时候是会判断数据类型的,只会处理数组和对象,而this.arr里面的元素是字符串,所以无法转化成observer类,也就不会有getter/setter。另一方面,即便arr里面是对象,比如{arr:[{testobj: true}]},数组元素{testobj: true}会被observe到,那也只是在{testobj: true}对象里面的属性改变的时候响应,而{testobj: true}对象被替换是无法感知的。
2.调用数组的变异方法(push(),pop(),shift(),unshift(),splice(),sort(),reverse()),这些方法是会让数组的值发生改变的,比如:arr=[0,1];arr.puah(3);此时arr=[1,2,3],arr发生了改变,此时是需要更新视图的,但是arr的getter/setter拦截不到变化(只有在赋值的时候才会调用setter,比如:arr=[6,7,8])。
3.当你修改数组的长度时,例如:vm.items.length = newLength

对于第一种情况,和对象的增减一样,可以使用vm.$set/Vue.set和vm.$delete/Vue.delete这几个api.
对于第二种情况,可以通过改写这些变异方法完成,在调用这些方法的时候发布更新消息。下面我们来看代码

/*
 * not type checking this file because flow doesn't play well with
 * dynamically accessing methods on Array prototype
 */

var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);
//遍历变异方法

[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
.forEach(function (method) {
  // cache original method
  var original = arrayProto[method];
  //重写arrayMethods里的变异方法
  def(arrayMethods, method, function mutator () {
    var args = [], len = arguments.length;
    while ( len-- ) args[ len ] = arguments[ len ];

    var result = original.apply(this, args);
    var ob = this.__ob__;
    var inserted;
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break
      case 'splice':
        inserted = args.slice(2);
        break
    }
    //inserted存储的是新加到数组里的元素,需要被observe
    if (inserted) { ob.observeArray(inserted); }
    // notify change
    //发布更新
    ob.dep.notify();
    return result
  });
});

回过头再看Observer类中对于数组的处理,先覆盖变异数组,再observe每个数组元素。所以每当调用数组的变异方法的时候,都会更新视图。

if (Array.isArray(value)) {
    var augment = hasProto
      ? protoAugment
      : copyAugment;
    //用改变变异数组后的arrayMethods的方法覆盖被observe的数组的方法
    augment(value, arrayMethods, arrayKeys);
    this.observeArray(value);
  } 

对于第三种情况,可以使用splice来完成,splice是变异方法,会发布更新。
戳这,查看官网对此的解决方案。

对于上面提到的第三个问题,Watcher在run方法里解决了这个问题,他会检测value !== this.value,只更新值变化的情况。

Observer相关代码就看到这里,下面来看Dep

图中的模型(Model)就是 data 方法返回的{times:1},视图(View)是最终在浏览器中显示的DOM。模型通过Observer、Dep、Watcher、Directive等一系列对象的关联,最终和视图建立起关系。归纳起来,Vue.js在这里主要做了三件事:

问题

我们将为每个变量设置一个Dep类,并且很好地封装了创建需要监视更新的匿名函数的行为。也许观察者功能可能是为了处理这种行为。

9159.com 18

(这只是上面的代码)

我们可以改为:

9159.com 19

Dep

下图是Dep的结构图

9159.com 20

下面是源码:

//全局变量,每个实例中的dep实例的id都是从0开始累加的
var uid$1 = 0;

/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 */
var Dep = function Dep () {
  this.id = uid$1++;
  //subscribe的简写,存放订阅者
  this.subs = [];
};
//添加一个订阅者
Dep.prototype.addSub = function addSub (sub) {
  this.subs.push(sub);
};
//删除一个订阅者
Dep.prototype.removeSub = function removeSub (sub) {
  remove$1(this.subs, sub);
};
//让Watcher收集依赖并添加订阅者。
Dep.target是一个Watcher, 可以查看Watcher的addDep方法。
这个方法做的事情是:收集依赖后,调用了Dep的addSub方法,给Dep添加了一个订阅者
Dep.prototype.depend = function depend () {
  if (Dep.target) {
    Dep.target.addDep(this);
  }
};
//发布数据更新:通过调用subs里面的每个Watcher的update发布更新
Dep.prototype.notify = function notify () {
  // stablize the subscriber list first
  var subs = this.subs.slice();
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update();
  }
};

// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
//注意这里,target是全局唯一的。下面详细讲解。
Dep.target = null;
  • 通过 Observer 对 data 做监听,并且提供了订阅某个数据项变化的能力。
  • 把 template 编译成一段 document fragment,然后解析其中的 Directive,得到每一个 Directive 所依赖的数据项和update方法。
  • 通过Watcher把上述两部分结合起来,即把Directive中的数据依赖通过Watcher订阅在对应数据的 Observer 的 Dep 上。当数据变化时,就会触发 Observer 的 Dep 上的 notify 方法通知对应的 Watcher 的 update,进而触发 Directive 的 update 方法来更新 DOM 视图,最后达到模型和视图关联起来。

解决方案:观察者功能

在我们的Watcher功能中,我们可以做一些简单的事情:

9159.com 21

如您所见,watcher函数接受myFunc参数,将其设置为我们的全局目标属性,调用dep.depend()以将目标添加为订阅者,调用目标函数并重置目标。

现在,当我们运行以下内容时:

9159.com 22

JavaScript

10 40

1
2
10
40

您可能想知道为什么我们将target实现为全局变量,而不是将其传递到我们需要的函数中。 这有一个很好的理由,这将在我们的文章结尾处揭晓。

关于Dep主要注意以下几点:

1.Dep是发布订阅者模型中的发布者,Watcher是观察者,一个Dep实例对应一个对象属性或一个被观察的对象,用来收集订阅者和在数据改变时,发布更新。
2.Dep实例有两种实例:
*第一种:在observe方法里生成的,用来给被观察的对象收集订阅者和发布更新,挂在对象的__ ob__对象上,通常在defineReactive函数里的getter函数里调用childOb.dep.depend()来收集依赖,在vm.$set/Vue.set和vm.$delete/Vue.delete这些api中调用来发布更新。
*第二种:在defineReactive函数里,是用来set/get数据时收集订阅者和发布更新的,保存在getter/setter闭包函数的作用域上。set数据时收集依赖,get数据时发布更新。

比如我们有一个data:data={testVal: "testVal", testObj: {testObjFirstEle: "testObjFirstEle"}};
这个时候,这个Vue实例上会有四个Dep实例:
第一个是调用data的observe方法时生成的挂在{testVal: "testVal", testObj: {testObjFirstEle: "testObjFirstEle"}}对象的__ ob__方法上的,属于上面说的第一种实例;
第二个是调用defineReactive函数给属性testVal添加getter,setter函数时生成的。保存在getter/setter闭包函数的作用域上,属于第二种实例。
第三个是调用defineReactive函数给属性testObj添加getter,setter函数时生成的。保存在getter/setter闭包函数的作用域上,属于第二种实例。
第四种是Watcher收集依赖时,调用testObj属性的set函数添加依赖时observe属性的值(即{testObjFirstEle: "testObjFirstEle"}对象)生成的。

现在我们来验证一下:
*源码:http://runjs.cn/code/9p5ydg84
*效果:http://sandbox.runjs.cn/show/9p5ydg84

9159.com 23

dep的id从0开始,到3结束一共四个。这个时候你可能会问,dep的id为2和3的实例去哪里了?注意上面我们说的第二种Dep实例对存在在getter/setter闭包函数的作用域中的,我们获取不到,你可以在源码里debugger来看。

3.当我们想要给{testObjFirstEle: "testObjFirstEle"}对象添加属性并更新视图时有两种方式:
一、利用getter/setter,重新设置testObj属性的值,testObj属性的setter执行的过程中会调用dep.notify()发布更新。比如:this.testObj = {testObjFirstEle: "testObjFirstEle", "newEle": "newEle};
二、利用$set函数:this.$set(this.testObj, "newEle", "newEle")。此时是{testObjFirstEle: "testObjFirstEle"}对象的__obj __对象上的dep发布的更新。

4.Dep.target:Dep.target为什么是全局唯一的呢?这是我以前一直不理解的地方。这一点我想,在讲完Watcher时会更清晰,所以请大家耐心读完下面的内容,就明白了。

接下来我们就结合 Vue.js 的源码来详细介绍这三个过程。

问题

我们有一个Dep类,但我们真正想要的是每个变量都有自己的Dep。在我们继续之前,先存储一下数据。

JavaScript

let data = { price: 5, quantity: 2}

1
let data = { price: 5, quantity: 2}

让我们假设我们的每个属性(价格和数量)都有自己的内部Dep类。

9159.com 24

当我们运行时:

9159.com 25

由于访问了data.price值,我希望price属性的Dep类将我们的匿名函数(存储在目标中)推送到其订阅者数组(通过调用dep.depend())。由于访问了data.quantity,我还希望quantity属性Dep类将此匿名函数(存储在目标中)推送到其订阅者数组中。

9159.com 26

如果我有另一个匿名函数,只访问data.price,我希望只推送到价格属性Dep类。

9159.com 27

我什么时候想要在价格订阅者上调用dep.notify()?我希望在设定价格时调用它们。在文章的最后,我希望能够进入控制台并执行:

9159.com 28

我们需要一些方法来挂钩数据属性(如价格或数量),所以当它被访问时我们可以将目标保存到我们的订阅者数组中,当它被更改时,运行存储在我们的订阅者数组中的函数。

Watcher

Watcher里面的属性很多,我们下面只注释本文关心的内容

/**
 * A watcher parses an expression, collects dependencies,
 * and fires callback when the expression value changes.
 * This is used for both the $watch() api and directives.
 */
var Watcher = function Watcher (
  vm,
  expOrFn,
  cb,
  options
) {
  this.vm = vm;
  vm._watchers.push(this);
  // options
  if (options) {
    //对应$watch参数的deep,具体的可以参考官网文档:https://cn.vuejs.org/v2/api/#vm-watch
    this.deep = !!options.deep;
    this.user = !!options.user;
    //跟computed相关,这里不具体讲解
    this.lazy = !!options.lazy;
    this.sync = !!options.sync;
  } else {
    this.deep = this.user = this.lazy = this.sync = false;
  }
  this.cb = cb;
  this.id = ++uid$2; // uid for batching
  this.active = true;
  this.dirty = this.lazy; // for lazy watchers
  //注意这里,关于deps和newDeps下面详细讲解
  this.deps = [];
  this.newDeps = [];
  this.depIds = new _Set();
  this.newDepIds = new _Set();
  this.expression = expOrFn.toString();
  // parse expression for getter
  //这里的getter会有两种情况:
   一、一个函数,比如在生命周期mount的时候,需要watch模板中的值,这个时候传过来的是一个函数,后面在get函数里调用时这个函数时,这个函数会调用数据的getter函数。
   二、一个表达式,比如我们在Vue实例的watch中写的表达式,后面在get函数里获取表达式的值的时候会调用数据的getter函数。
   expOrFn参数是一个字符串,比如testObj.testObjFirstVal,此时testObj仅仅是一个字符串,而不是对象,我们无法直接获取testObjFirstVal属性的值。
   所以我们在获取值得时候不能直接拿到值,parsePath函数就是用来解决这个问题的,这个函数具体的操作,在后面的代码里。
  if (typeof expOrFn === 'function') {
    this.getter = expOrFn;
  } else {
    //这里是针对表达式
    this.getter = parsePath(expOrFn);
    if (!this.getter) {
      this.getter = function () {};
      "development" !== 'production' && warn(
        "Failed watching path: "" + expOrFn + "" " +
        'Watcher only accepts simple dot-delimited paths. ' +
        'For full control, use a function instead.',
        vm
      );
    }
  }
  //注意这个地方,在非computed调用Watch函数外,都会调用get函数(computed有自己的逻辑)
  this.value = this.lazy
    ? undefined
    : this.get();
};

/**
 * Evaluate the getter, and re-collect dependencies.
 */
//get函数,用来收集依赖和获取数据的值
Watcher.prototype.get = function get () {
  pushTarget(this);
  var value;
  var vm = this.vm;
  try {
    value = this.getter.call(vm, vm);
  } catch (e) {
    if (this.user) {
      handleError(e, vm, ("getter for watcher "" + (this.expression) + """));
    } else {
      throw e
    }
  } finally {
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    if (this.deep) {
      traverse(value);
    }
    popTarget();
    //注意这里下面详细讲解
    this.cleanupDeps();
  }
  return value
};

// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null;
var targetStack = [];

function pushTarget (_target) {
  if (Dep.target) { targetStack.push(Dep.target); }
  Dep.target = _target;
}

function popTarget () {
  Dep.target = targetStack.pop();
}

/**
 * Add a dependency to this directive.
 */
//添加一个依赖
Watcher.prototype.addDep = function addDep (dep) {
  var id = dep.id;
  if (!this.newDepIds.has(id)) {
    this.newDepIds.add(id);
    this.newDeps.push(dep);
    //这里做了一个去重,如果depIds里包含这个id,说明在之前给depIds添加这个id的时候,已经调用过 dep.addSub(this),即添加过订阅,不需要重复添加。
    if (!this.depIds.has(id)) {
      dep.addSub(this);
    }
  }
};

/**
 * Clean up for dependency collection.
 */
//下面详细讲
Watcher.prototype.cleanupDeps = function cleanupDeps () {
    var this$1 = this;

  var i = this.deps.length;
  //去除多余的订阅者
  while (i--) {
    var dep = this$1.deps[i];
    //如果Watcher不依赖于某个数据,即某个Dep,那么不需要再订阅这个数据的消息。
    if (!this$1.newDepIds.has(dep.id)) {
      dep.removeSub(this$1);
    }
  }
  var tmp = this.depIds;
  //更新depIds
  this.depIds = this.newDepIds;
  this.newDepIds = tmp;
  //清空newDepIds
  this.newDepIds.clear();
  tmp = this.deps;
  //更新deps
  this.deps = this.newDeps;
  this.newDeps = tmp;
  //清空newDeps
  this.newDeps.length = 0;
};

/**
 * Subscriber interface.
 * Will be called when a dependency changes.
 */
//更新模板或表达式:调用run方法
Watcher.prototype.update = function update () {
  /* istanbul ignore else */
  //下面三种情况均会调用run方法
  if (this.lazy) {
    this.dirty = true;
  } else if (this.sync) {
    this.run();
  } else {
    //queueWatcher这个函数最终会调用run方法。
    queueWatcher(this);
  }
};

/**
 * Scheduler job interface.
 * Will be called by the scheduler.
 */
//注意这里调用了get方法,会更新模板,且重新收集依赖
Watcher.prototype.run = function run () {
  if (this.active) {
    //获取值,且重新收集依赖
    var value = this.get();
    if (
      value !== this.value ||
      // Deep watchers and watchers on Object/Arrays should fire even
      // when the value is the same, because the value may
      // have mutated.
      isObject(value) ||
      this.deep
    ) {
      // set new value
      var oldValue = this.value;
      this.value = value;
      //注意下面 this.cb.call,调用回调函数来更新模板或表达式的值($watch表达式的时候,会更新表达式的值)
      if (this.user) {
        try {
          this.cb.call(this.vm, value, oldValue);
        } catch (e) {
          handleError(e, this.vm, ("callback for watcher "" + (this.expression) + """));
        }
      } else {
        this.cb.call(this.vm, value, oldValue);
      }
    }
  }
};

/**
 * Parse simple path.
 */
var bailRE = /[^w.$]/;
function parsePath (path) {
  //如果字符串中没有符号".",直接返回即可,比如:testVal
  if (bailRE.test(path)) {
    return
  }
  //用符号"."分割字符串,遍历数组,依次获取obj对象上相应的值。
  比如:testObj.testObjFirstVal,先分割成数组[testObj,testObjFirstVal],其次遍历数组,获取obj[testObj]的值,最后获取obj[testObj][testObjFirstVal]的值。
  var segments = path.split('.');
  //这个地方将函数作为返回值,感兴趣的话,可以看一下函数式编程
  return function (obj) {
    for (var i = 0; i < segments.length; i++) {
      if (!obj) { return }
      obj = obj[segments[i]];
    }
    return obj
  }
}

我们先来理一理watch函数做的事情:初始化变量——>获取getter函数,这里的getter函数是用来获取数据的值,函数执行过程中会调用数据的getter函数,会收集依赖——>调用watcher的get方法,收集依赖,获取值,并将这些东西记录下来。
这个过程就完成了收集依赖的过程,而update函数是用来接收数据发布更新的消息并更新模板或表达式的。
下面我们重点来关注这几点,这些是我刚接触Vue时想不清楚的地方
1.收集依赖指的是谁收集依赖,依赖又是指的什么?这是我一直很迷惑的问题。看英文注释:Watcher的作用是分割表达式,收集依赖并且在值变化的时候调用回调函数。那么我们很明确知道是Watcher在收集依赖,依赖到底指什么呢?
我们上面说过一个Dep对应着一个数据(这个数据可能是:对象的属性、一个对象、一个数组);一个Watcher对应可以是一个模板也可以是一个$watch对应的表达式、函数等,无论那种情况,他们都依赖于data里面的数据,所以这里说的依赖其实就是模板或表达式所依赖的数据,对应着相关数据的Dep。
举个例子:下面这个$watch对应的函数依赖的数据就是testWatcher和testVal。所以这个$watch对应的Watcher收集的依赖就是testWatcher和testVal对应的Dep。

app.$watch(function(){
     return this.testWatcher + this.testVal;
},function(newVal){
    console.log(newVal
 })

2.Watcher有四个使用的场景,只有在这四种场景中,Watcher才会收集依赖,更新模板或表达式,否则,数据改变后,无法通知依赖这个数据的模板或表达式
*第一种:观察模板中的数据
*第二种:观察创建Vue实例时watch选项里的数据
*第三种:观察创建Vue实例时computed选项里的数据所依赖的数据
*第四种:调用$watch api观察的数据或表达式
所以在解决数据改变,模板或表达式没有改变的问题时,可以这么做:
首先仔细看一看数据是否在上述四种应用场景中,以便确认数据已经收集依赖;其次查看改变数据的方式,确定这种方式会使数据的改变被拦截(关于这一点,上面Obsever相关内容中说的比较多)

3.Dep.target的作用:我们前面说过收集依赖的时机是在调用数据的getter函数的时候,但是在这个时候数据的getter函数不知道当前的Watcher是哪一个,所以这里使用了一个全局变量来记录当前的Watcher,方便添加依赖到正在执行的Watcher。关于这点官方的英文注释写的挺清楚的。
4.targetStack的作用(Watcher函数的get方法中pushTarget和popTarget方法中用到):Vue2 中(本文源码为Vue2),视图被抽象为一个 render 函数,一个 render 函数只会生成一个 watcher。比如我们有如下一个模板,模板中使用了Header组件。Vue2 中组件数的结构在视图渲染时就映射为 render 函数的嵌套调用,有嵌套调用就会有调用栈。当 render模板时,遇到Header组件会调用Header组件的render函数,两个render函数依次入栈,执行完函数,依次出栈。

<div id="app">
  <Header></Header>
</div>

5.Watcher函数的get方法中调用this.getter.call(vm, vm)收集完依赖后,又调用this.cleanupDeps()清除依赖。excus me ???第一次看这个地方的时候,我很困扰,为什么添加完依赖后要清楚。后面仔细看了代码发现是这个样子的:
Watcher里面有两个属性:deps和newDeps。他们是用来记录上一次Watcher收集的依赖和新一轮Watcher收集的依赖,每一次有数据的更新都需要重新收集依赖(数据发布更新后,会调用Watcher的notify方法,notify方法会调用run方法,run方法会调用get方法,重新获取值,并重新收集依赖)。举个简单的例子:我们点击一个按钮,用$set给data添加了一个新属性newVal。上一轮收集的依赖中并没有newVal的依赖,所以需要重新收集依赖。
this.cleanupDeps()这个函数的作用就是将新收集的依赖newDeps赋值给deps,并将newDeps清空,准备在下一次数据更新时收集依赖。所以这个函数不是真正的清空Watcher的依赖,而是清除临时保存依赖的newDeps。

看完上面的这些后,再看官方给出的图,就更明白了,不过官方的图中,并没有标提到Dep和Observer。

9159.com 29

Observer

首先来看一下 Vue.js 是如何给 data 对象添加 Observer 的。我们知道,Vue 实例创建的过程会有一个生命周期,其中有一个过程就是调用 vm.initData 方法处理 data 选项。initData 方法的源码定义如下:

<!-源码目录:src/instance/internal/state.js-->
Vue.prototype._initData = function () {
    var dataFn = this.$options.data
    var data = this._data = dataFn ? dataFn() : {}
    if (!isPlainObject(data)) {
      data = {}
      process.env.NODE_ENV !== 'production' && warn(
        'data functions should return an object.',
        this
      )
    }
    var props = this._props
    // proxy data on instance
    var keys = Object.keys(data)
    var i, key
    i = keys.length
    while (i--) {
      key = keys[i]
      // there are two scenarios where we can proxy a data key:
      // 1. it's not already defined as a prop
      // 2. it's provided via a instantiation option AND there are no
      //    template prop present
      if (!props || !hasOwn(props, key)) {
        this._proxy(key)
      } else if (process.env.NODE_ENV !== 'production') {
        warn(
          'Data field "' + key + '" is already defined ' +
          'as a prop. To provide default value for a prop, use the "default" ' +
          'prop option; if you want to pass prop values to an instantiation ' +
          'call, use the "propsData" option.',
          this
        )
      }
    }
    // observe data
    observe(data, this)
  }

在 initData 中我们要特别注意 proxy 方法,它的功能就是遍历 data 的 key,把 data 上的属性代理到 vm 实例上。_proxy 方法的源码定义如下:

<!-源码目录:src/instance/internal/state.js-->
Vue.prototype._proxy = function (key) {
    if (!isReserved(key)) {
      // need to store ref to self here
      // because these getter/setters might
      // be called by child scopes via
      // prototype inheritance.
      var self = this
      Object.defineProperty(self, key, {
        configurable: true,
        enumerable: true,
        get: function proxyGetter () {
          return self._data[key]
        },
        set: function proxySetter (val) {
          self._data[key] = val
        }
      })
    }
  }

proxy 方法主要通过 Object.defineProperty 的 getter 和 setter 方法实现了代理。在前面的例子中,我们调用 vm.times 就相当于访问了 vm.data.times。

在 _initData 方法的最后,我们调用了 observe(data, this) 方法来对 data 做监听。observe 方法的源码定义如下:

<!-源码目录:src/observer/index.js-->
export function observe (value, vm) {
  if (!value || typeof value !== 'object') {
    return
  }
  var ob
  if (
    hasOwn(value, '__ob__') &&
    value.__ob__ instanceof Observer
  ) {
    ob = value.__ob__
  } else if (
    shouldConvert &&
    (isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value)
  }
  if (ob && vm) {
    ob.addVm(vm)
  }
  return ob
}

observe 方法首先判断 value 是否已经添加了 ob 属性,它是一个 Observer 对象的实例。如果是就直接用,否则在 value 满足一些条件(数组或对象、可扩展、非 vue 组件等)的情况下创建一个 Observer 对象。接下来我们看一下 Observer 这个类,它的源码定义如下:

<!-源码目录:src/observer/index.js-->
export function Observer (value) {
  this.value = value
  this.dep = new Dep()
  def(value, '__ob__', this)
  if (isArray(value)) {
    var augment = hasProto
      ? protoAugment
      : copyAugment
    augment(value, arrayMethods, arrayKeys)
    this.observeArray(value)
  } else {
    this.walk(value)
  }
}

Observer 类的构造函数主要做了这么几件事:首先创建了一个 Dep 对象实例(关于 Dep 对象我们稍后作介绍);然后把自身 this 添加到 value 的 ob 属性上;最后对 value 的类型进行判断,如果是数组则观察数组,否则观察单个元素。其实 observeArray 方法就是对数组进行遍历,递归调用 observe 方法,最终都会调用 walk 方法观察单个元素。接下来我们看一下 walk 方法,它的源码定义如下:

<!-源码目录:src/observer/index.js-->
Observer.prototype.walk = function (obj) {
  var keys = Object.keys(obj)
  for (var i = 0, l = keys.length; i < l; i++) {
    this.convert(keys[i], obj[keys[i]])
  }
}

walk 方法是对 obj 的 key 进行遍历,依次调用 convert 方法,对 obj 的每一个属性进行转换,让它们拥有 getter、setter 方法。只有当 obj 是一个对象时,这个方法才能被调用。接下来我们看一下 convert 方法,它的源码定义如下:

<!-源码目录:src/observer/index.js-->
Observer.prototype.convert = function (key, val) {
  defineReactive(this.value, key, val)
}

convert 方法很简单,它调用了 defineReactive 方法。这里 this.value 就是要观察的 data 对象,key 是 data 对象的某个属性,val 则是这个属性的值。defineReactive 的功能是把要观察的 data 对象的每个属性都赋予 getter 和 setter 方法。这样一旦属性被访问或者更新,我们就可以追踪到这些变化。接下来我们看一下 defineReactive 方法,它的源码定义如下:

<!-源码目录:src/observer/index.js-->
export function defineReactive (obj, key, val) {
  var dep = new Dep()
  var property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }
  // cater for pre-defined getter/setters
  var getter = property && property.get
  var setter = property && property.set
  var childOb = observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      var value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
        }
        if (isArray(value)) {
          for (var e, i = 0, l = value.length; i < l; i++) {
            e = value[i]
            e && e.__ob__ && e.__ob__.dep.depend()
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      var value = getter ? getter.call(obj) : val
      if (newVal === value) {
        return
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = observe(newVal)
      dep.notify()
    }
  })
}

defineReactive 方法最核心的部分就是通过调用 Object.defineProperty 给 data 的每个属性添加 getter 和setter 方法。当 data 的某个属性被访问时,则会调用 getter 方法,判断当 Dep.target 不为空时调用 dep.depend 和 childObj.dep.depend 方法做依赖收集。如果访问的属性是一个数组,则会遍历这个数组收集数组元素的依赖。当改变 data 的属性时,则会调用 setter 方法,这时调用 dep.notify 方法进行通知。这里我们提到了 dep,它是 Dep 对象的实例。接下来我们看一下 Dep 这个类,它的源码定义如下:

<!-源码目录:src/observer/dep.js-->
export default function Dep () {
  this.id = uid++
  this.subs = []
}
// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null

Dep 类是一个简单的观察者模式的实现。它的构造函数非常简单,初始化了 id 和 subs。其中 subs 用来存储所有订阅它的 Watcher,Watcher 的实现稍后我们会介绍。Dep.target 表示当前正在计算的 Watcher,它是全局唯一的,因为在同一时间只能有一个 Watcher 被计算。

前面提到了在 getter 和 setter 方法调用时会分别调用 dep.depend 方法和 dep.notify 方法,接下来依次介绍这两个方法。depend 方法的源码定义如下:

<!-源码目录:src/observer/dep.js-->
Dep.prototype.depend = function () {
  Dep.target.addDep(this)
}

depend 方法很简单,它通过 Dep.target.addDep(this) 方法把当前 Dep 的实例添加到当前正在计算的Watcher 的依赖中。接下来我们看一下 notify 方法,它的源码定义如下:

<!-源码目录:src/observer/dep.js-->
Dep.prototype.notify = function () {
  // stablize the subscriber list first
  var subs = toArray(this.subs)
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update()
  }
}

notify 方法也很简单,它遍历了所有的订阅 Watcher,调用它们的 update 方法。

至此,vm 实例中给 data 对象添加 Observer 的过程就结束了。接下来我们看一下 Vue.js 是如何进行指令解析的。

作者: ustbhuangyi 
链接:
来源:慕课网
本文原创发布于慕课网 ,转载请注明出处,谢谢合作!

解决方案:Object.defineProperty()

我们需要了解Object.defineProperty()函数,它是简单的ES5 JavaScript。它允许我们为属性定义getter和setter函数。在我向您展示如何在Dep类中使用它之前,先简单展示一下改函数的用法。

9159.com 30

JavaScript

I was accessed I was changed

1
2
I was accessed
I was changed

如您所见,它只记录两行。但是,它实际上并没有获取或设置任何值,因为我们过度使用了该功能。我们现在加回来吧。 get()期望返回一个值,而set()仍然需要更新一个值,所以让我们添加一个internalValue变量来存储我们当前的价格值。

9159.com 31

既然我们的get和set工作正常,您认为将打印到控制台的是什么?

JavaScript

Getting price: 5 Setting price to: 20

1
2
Getting price: 5
Setting price to: 20

因此,当我们获取并设置值时,我们可以获得通知。通过一些递归,我们可以为数组中的所有项运行它

FYI,Object.keys(data)返回对象键的数组。

9159.com 32

现在一切都有getter和setter,我们在控制台上看到了这一点。

9159.com 33

三、相关概念

Putting both ideas together

JavaScript

total = data.price * data.quantity

1
total = data.price * data.quantity

当像这样的一段代码运行并获得价格的价值时,我们希望价格记住这个匿名函数(目标)。这样,如果价格变化,或者设置为新值,它将触发此函数以重新运行,因为它知道此行依赖于它。所以你可以这样想。

Get =>记住这个匿名函数,当我们的值发生变化时,我们会再次运行它。

Set =>运行保存的匿名函数,我们的值刚改变。

或者就我们的Dep Class而言

Price accessed (get) => 调用dep.depend()来保存当前目标

Price set => 在价格上调用dep.notify(),重新运行所有目标

让我们结合这两个想法,并完成我们的最终代码。

9159.com 34

现在看看会发生什么。

9159.com 35

正是我们所希望的!价格和数量都确实是得到了实时的响应的!只要价格或数量的价值得到更新,我们的总代码就会重新运行。

Vue文档中的这个插图现在应该开始有意义了。

9159.com 36

你看到那个漂亮的紫色数据圈了吗?看起来应该很眼熟!每个组件实例都有一个从getter(红线)收集依赖项的服务观察器实例(蓝色)。当稍后调用设置程序时,它会通知监视程序,它将导致组件重新呈现。下面是我自己的一些注释的图片。

9159.com 37

是的,现在是不是觉得更有意义了。

显然,Vue做的可能更复杂更惊喜,但你现在知道了基础知识。

1.双向数据绑定

M ,即 model,指的是模型,也就是数据;V 即view,指的是视图,也就是页面展现的部分。
双向数据绑定大概概括为:每当数据有变更时,会进行渲染,从而更新视图,使得视图与数据保持一致(model到view层);而另一方面,页面也会通过用户的交互,产生状态、数据的变化,这个时候,这时需要将视图对数据的更新同步到数据(view到model层)。

不同的前端 MV* 框架对于这种 Model 和 View 间的数据同步有不同的处理,如:
脏值检查(angular.js)
数据劫持 + 发布者-订阅者模式(Vue)

我们上面说的Vue的数据响应式原理其实就是实现数据到视图更新原理,而视图到数据的更新,其实就是此基础上给可表单元素(input等)添加了change等事件监听,来动态修改model和 view。

总结:所以我们学了什么?

  • 如何创建一个Dep类来收集依赖项(依赖)并重新运行所有依赖项(notify)。
  • 如何创建一个观察程序来管理我们正在运行的代码,这些代码可能需要作为依赖项添加(target)。
  • 如何使用Object.defineProperty()创建getter和setter。

    1 赞 2 收藏 评论

9159.com 38

2.发布-订阅者模型

订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态。
Vue中的Dep和Watcher共同实现了这个模型

本文由9159.com发布于前端,转载请注明出处:是如何把模型和视图建立起关联关系的,通过了

关键词: