MDV 효과를 달성하기 위해 Vue가 데이터를 반응형으로 패키징하는 방법을 해석합니다.

이 기사에서는 MDV(Model-Driven-View) 효과를 달성하기 위해 vue가 데이터를 반응형으로 패키징하는 방법에 대해 설명합니다. 모든 사람에게 도움이 되기를 바랍니다.

먼저 리액티브(Reactive)가 무엇인지 설명하자면, 데이터가 변경되면 감지할 수 있는 형태로 데이터를 패키징하는 것입니다.

Vue 관련 구현 코드는 모두 core/observer 디렉터리에 있습니다. 직접 읽어보고 싶다면 core/instance/index.js. <code>core/observer 目录下，而要自行阅读的话，建议从 core/instance/index.js 中开始。

在开始讲 reactive 的具体实现之前，先说说几个对象：Watcher、Dep、Observer。

Watcher

Watcher 是 vue 实现的一个用于观测数据的对象，具体实现在 core/observer/watcher.js 中。

这个类主要是用来观察方法/表达式中引用到的数据（数据需要是 reative 的，即 data 或者 props）变更，当变更后做出相应处理。先看一下 Watcher 这个类的入参：

vm: Component,expOrFn: string | Function,cb: Function,options?: Object

解释一下这几个入参是干嘛的：

• vm：当前这个 watcher 所属的 VueComponent。
• expOrFn：需要监听的 方法/表达式。举个例子：VueComponent 的 render function，或者是 computed 的 getter 方法，再或者是abc.bbc.aac这种类型的字符串（由于 vue 的 parsePath 方法是用 split('.') 来做的属性分割，所以不支持abc['bbc']）。expOrFn 如果是方法，则直接赋值给 watcher 的 getter 属性，如果是表达式，则会转换成方法再给 getter。
• cb：当 getter 中引用到的 data 发生改变的时候，就会触发该回调。
• options：额外参数，可以传入的参数为包括deep、user，lazy，sync，这些值默认都是为 false。
  • deep 如果为 true，会对 getter 返回的对象再做一次深度遍历，进行进一步的依赖收集。
  • user 是用于标记这个监听是否由用户通过 $watch 调用的。
  • lazy 用于标记 watcher 是否为懒执行，该属性是给 computed data 用的，当 data 中的值更改的时候，不会立即计算 getter 获取新的数值，而是给该 watcher 标记为dirty，当该 computed data 被引用的时候才会执行从而返回新的 computed data，从而减少计算量。
  • sync 则是表示当 data 中的值更改的时候，watcher 是否同步更新数据，如果是 true，就会立即更新数值，否则在 nextTick 中更新。

了解了入参是用来干嘛的之后，也就基本上知道 Watcher 这个对象干了啥。

Dep

Dep 则是 vue 实现的一个处理依赖关系的对象，具体实现在 core/observer/dep.js 中，代码量相当少，很容易理解。

Dep 主要起到一个纽带的作用，就是连接 reactive data 与 watcher，每一个 reactive data 的创建，都会随着创建一个 dep 实例。参见 observer/index.js 中的defineReactive 方法，精简的 defineReactive 方法如下。

function defineReactive(obj, key, value) {
    const dep = new Dep();
    Object.defineProperty(obj, key, {
        get() {
          if (Dep.target) {
            dep.depend();
          }
          return value        }
        set(newValue) {
            value = newValue;
            dep.notify();
        }
    })}

创建完 dep 实例后，就会给该 data 注入 getter 和 setter 的逻辑，当该 data 被引用的时候，就会触发 getter，而什么时候 data 会被引用呢？就是在 watcher 执行 getter 的时候，而当 watcher 执行 getter 的时候，watcher 会被塞入 Dep.target，然后通过调用 dep.depend() 方法，这个数据的 dep 就和 watcher 创建了连接。

创建连接之后，当 data 被更改，触发了 setter 逻辑。然后就可以通过 dep.notify() 通知到所有与 dep 创建了关联的 watcher。从而让各个 watcher 做出响应。

比如我 watch 了一个 data ，并且在一个 computed data 中引用了同一个 data。再同时，我在 template 中也有显式引用了这个 data，那么此时，这个 data 的 dep 里就关联了三个 watcher，一个是 render function 的 watcher，一个是 computed 的 watcher，一个是用户自己调用 $watch 方法创建的 watcher。当 data 发生更改后，这个 data 的 dep 就会通知到这三个 watcher 做出相应处理。

Observer

Observer 可以将一个 plainObject 或者 array 变成 reactive 的。代码很少，就是遍历 plainObject 或者 array，对每一个键值调用defineReactive

Reactive의 구체적인 구현에 대해 이야기하기 전에 Watcher, Dep 및 Observer와 같은 몇 가지 객체에 대해 이야기해 보겠습니다.

Watcher

Watcher는 데이터 관찰을 위해 vue에서 구현한 개체입니다. 구체적인 구현은 core/observer/watcher.js에 있습니다.

이 클래스는 주로 메서드/표현식에서 참조하는 데이터(데이터는 반응형, 즉 데이터 또는 props여야 함)의 변경 사항을 관찰하고 변경 후 그에 따라 처리하는 데 사용됩니다. 먼저 Watcher 클래스의 입력 매개변수를 살펴보겠습니다.

observe(data, true)

🎜이 입력 매개변수의 용도를 설명하세요. 🎜

• vm: 현재 감시자가 속한 VueComponent.
• expOrFn: 모니터링해야 하는 메서드/표현식입니다. 예를 들어 VueComponent의 렌더링 함수, 계산의 getter 메서드 또는 이 유형의 abc.bbc.aac 문자열(vue의 parsPath 메서드는 분할('.')을 사용하여 수행하기 때문입니다) 속성 분할이므로 abc['bbc']는 지원되지 않습니다). expOrFn이 메소드인 경우 watcher의 getter 속성에 직접 할당되며 표현식인 경우 메소드로 변환되어 getter에 제공됩니다.
• cb: 이 콜백은 getter에서 참조되는 데이터가 변경될 때 트리거됩니다.
• 옵션: 추가 매개변수, 전달할 수 있는 매개변수에는 deep, user, lazy, sync가 포함됩니다. , 이 값은 기본적으로 false입니다.
  • deep이 true이면 getter가 반환한 객체는 추가 종속성 수집을 위해 다시 깊이 탐색됩니다.
  • User는 $watch를 통해 사용자가 이 리스너를 호출했는지 여부를 표시하는 데 사용됩니다.
  • Lazy는 감시자가 느리게 실행되는지 여부를 표시하는 데 사용됩니다. 이 속성은 데이터의 값이 변경되면 getter가 즉시 계산되어 새 값을 가져오는 것이 아닙니다. dirty로 표시되어 계산된 데이터를 참조하여 새로운 계산 데이터를 반환하는 경우에만 실행되므로 계산량이 줄어듭니다.
  • sync는 데이터의 값이 변경될 때 감시자가 데이터를 동기적으로 업데이트하는지 여부를 나타냅니다. true이면 값이 즉시 업데이트되고, 그렇지 않으면 nextTick에서 업데이트됩니다.

🎜입력 매개변수의 용도를 이해하고 나면 기본적으로 Watcher 개체의 기능을 알 수 있습니다. 🎜

Dep🎜🎜Dep은 종속성을 처리하기 위해 vue에서 구현한 개체입니다. 구체적인 구현은 core/observer/dep.js에 있습니다. 매우 이해하기 쉽습니다. 🎜🎜Dep은 주로 리액티브 데이터와 감시자를 연결하는 링크 역할을 합니다. 리액티브 데이터가 생성될 때마다 Dep 인스턴스가 생성됩니다. observer/index.js의 defineReactive 메서드를 참조하세요. 단순화된 DefineReactive 메서드는 다음과 같습니다. 🎜

function initComputed (vm: Component, computed: Object) {
  ...  const watchers = vm._computedWatchers = Object.create(null)  for (const key in computed) {
    const userDef = computed[key]    let getter = typeof userDef === 'function' ? userDef : userDef.get
    ...
    watchers[key] = new Watcher(vm, getter, noop, { lazy: true })    if (!(key in vm)) {
      defineComputed(vm, key, userDef)    } else if (process.env.NODE_ENV !== 'production') {
      ...    }
  }}

🎜dep 인스턴스를 생성한 후 getter 및 setter의 논리가 데이터에 삽입됩니다. 데이터가 참조되면 getter가 트리거됩니다. 이는 감시자가 getter를 실행할 때 감시자가 getter를 실행할 때 감시자가 Dep.target에 채워지고 dep.dependent() 메서드를 호출하여 이 데이터의 dep가 다음과 연결을 생성하는 것입니다. 당직자. 🎜🎜연결이 생성된 후 데이터가 변경되면 setter 로직이 트리거됩니다. 그런 다음 dep.notify()를 통해 dep와 관련된 모든 감시자에게 알릴 수 있습니다. 이를 통해 각 감시자가 응답할 수 있습니다. 🎜🎜예를 들어 데이터를 보고 계산된 데이터에서 동일한 데이터를 참조합니다. 동시에 템플릿에서 이 데이터를 명시적으로 참조했기 때문에 이때 이 데이터의 dep는 세 개의 감시자와 연결되어 있습니다. 하나는 렌더링 함수의 감시자이고 다른 하나는 계산된 감시자입니다. 다른 하나는 $ watch 메소드에 의해 생성된 감시자를 호출하는 사용자입니다. 데이터가 변경되면 이 데이터의 Depth는 세 관찰자에게 그에 따라 처리하도록 알립니다. 🎜

Observer🎜🎜Observer는 plainObject 또는 배열을 반응형으로 바꿀 수 있습니다. 코드는 매우 작습니다. plainObject 또는 배열을 순회하고 각 키 값에 대해 defineReactive 메서드를 호출하면 됩니다. 🎜🎜Process🎜🎜위의 세 가지 클래스가 소개되었으니 기본적으로 Vue Reactive 구현에 대한 막연한 이해가 되셨을 것입니다. 다음으로 예제를 통해 전체 프로세스에 대해 이야기해 보겠습니다. 🎜🎜vue가 인스턴스화되면 initData가 먼저 호출되고 initComputed가 호출되며 마지막으로 mountComponent가 호출되어 렌더링 함수의 감시자를 생성합니다. 이로써 VueComponent의 반응형 데이터가 완성됩니다. 🎜

initData

initData 方法在 core/instance/state.js 中，而这个方法里大部分都是做一些判断，比如防止 data 里有跟 methods 里重复的命名之类的。核心其实就一行代码：

observe(data, true)

而这个 observe 方法干的事就是创建一个 Observer 对象，而 Observer 对象就像我上面说的，对 data 进行遍历，并且调用 defineReactive 方法。

就会使用 data 节点创建一个 Observer 对象，然后对 data 下的所有数据，依次进行 reactive 的处理，也就是调用 defineReactive 方法。当执行完 defineReactive 方法之后，data 里的每一个属性，都被注入了 getter 以及 setter 逻辑，并且创建了 dep 对象。至此 initData 执行完毕。

initComputed

然后是 initComputed 方法。这个方法就是处理 vue 中 computed 节点下的数据，遍历 computed 节点，获取 key 和 value，创建 watcher 对象，如果 value 是方法，实例化 watcher 的入参 expOrFn 则为 value，否则是 value.get。

function initComputed (vm: Component, computed: Object) {
  ...  const watchers = vm._computedWatchers = Object.create(null)  for (const key in computed) {
    const userDef = computed[key]    let getter = typeof userDef === 'function' ? userDef : userDef.get
    ...
    watchers[key] = new Watcher(vm, getter, noop, { lazy: true })    if (!(key in vm)) {
      defineComputed(vm, key, userDef)    } else if (process.env.NODE_ENV !== 'production') {
      ...    }
  }}

我们知道 expOrFn 是可以为方法，也可以是字符串的。因此，通过上面的代码我们发现了一种官方文档里没有说明的用法，比如我的 data 结构如下

{ obj: { list: [{value: '123'}] } }

如果我们要在 template 中需要使用 list 中第一个节点的 value 属性 值，就写个 computed：

computed: {
  value: { get: 'obj.list.0.value' }}

然后在 template 中使用的时候，直接用{<!-- -->{ value }}，这样的话，就算 list 为空，也能保证不会报错，类似于 lodash.get 的用法。OK，扯远了，回到正题上。

创建完 watcher，就通过 Object.defineProperty 把 computed 的 key 挂载到 vm 上。并且在 getter 中添加以下逻辑

 if (watcher.dirty) {
   watcher.evaluate() }
 if (Dep.target) {
   watcher.depend() }
 return watcher.value

前面我有说过，computed data 的 watcher 是 lazy 的，当 computed data 中引用的 data 发生改变后，是不会立马重新计算值的，而只是标记一下 dirty 为 true，然后当这个 computed data 被引用的时候，上面的 getter 逻辑就会判断 watcher 是否为 dirty，如果是，就重新计算值。

而后面那一段watcher.depend。则是为了收集 computed data 中用到的 data 的依赖，从而能够实现当 computed data 中引用的 data 发生更改时，也能触发到 render function 的重新执行。

  depend () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()    }
  }

mountComponent

把 data 以及 computed 都初始化好之后，则创建一个 render function 的 watcher。逻辑如下：

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean): Component {
  vm.$el = el
  ...  callHook(vm, 'beforeMount')  let updateComponent
  ...
    updateComponent = () => {
      vm._update(vm._render(), hydrating)    }
  ...  vm._watcher = new Watcher(vm, updateComponent, noop)  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')  }
  return vm}

可以看到，创建 watcher 时候的入参 expOrFn 为 updateComponent 方法，而 updateComponent 方法中则是执行了 render function。而这个 watcher 不是 lazy 的，因此创建该 watcher 的时候，就会立马执行 render function 了，当执行 render function 的时候。如果 template 中有使用 data，则会触发 data 的 getter 逻辑，然后执行 dep.depend() 进行依赖收集，如果 template 中有使用 computed 的参数，也会触发 computed 的 getter 逻辑，从而再收集 computed 的方法中引用的 data 的依赖。最终完成全部依赖的收集。

最后举个例子：

<template>
    <p>{{ test }}</p></template><script>
  export default {
    data() {
      return {
        name: 'cool'
      }
    },
    computed: {
      test() {
        return this.name + 'test';
      }
    }
  }</script>

初始化流程：

1. 将 name 处理为 reactive，创建 dep 实例
2. 将 test 绑到 vm，创建 test 的 watcher 实例 watch1，添加 getter 逻辑。
3. 创建 render function 的 watcher 实例 watcher2，并且立即执行 render function。
4. 执行 render function 的时候，触发到 test 的 getter 逻辑，watcher1 及 watcher2 均与 dep 创建映射关系。

name 的值变更后的更新流程：

1. 遍历绑定的 watcher 列表，执行 watcher.update()。
2. watcher1.dirty 置为为 true。
3. watcher2 重新执行 render function，触发到 test 的 getter，因为 watcher1.dirty 为 true，因此重新计算 test 的值，test 的值更新。
4. 重渲染 view

【相关推荐：《vue.js教程》】

위 내용은 MDV 효과를 달성하기 위해 Vue가 데이터를 반응형으로 패키징하는 방법을 해석합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!