Tafsirkan cara Vue membungkus data menjadi reaktif untuk mencapai kesan MDV

Artikel ini akan membincangkan tentang cara vue membungkus data menjadi reaktif untuk mencapai kesan MDV (Model-Driven-View, saya harap ia akan membantu semua orang.

Biar saya jelaskan dahulu apa itu reaktif, ia adalah untuk membungkus data ke dalam jenis yang boleh diperhatikan Apabila data berubah, kita dapat merasakannya.

Kod pelaksanaan Vue yang berkaitan semuanya ada dalam direktori core/observer Jika anda mahu membacanya sendiri, adalah disyorkan untuk bermula dari core/instance/index.js.

Sebelum mula bercakap tentang pelaksanaan khusus reaktif, mari bercakap tentang beberapa objek: Pemerhati, Dep, Pemerhati.

Watcher

Watcher ialah objek yang dilaksanakan oleh vue untuk memerhati data Pelaksanaan khusus adalah dalam core/observer/watcher.js.

Kelas ini digunakan terutamanya untuk melihat perubahan dalam data yang dirujuk dalam 方法/表达式 (data perlu reaktif, iaitu data atau prop), dan mengendalikan perubahan dengan sewajarnya. Mari kita lihat dahulu parameter input kelas Watcher:

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

Terangkan untuk apa parameter input ini:

• vm: VueComponent yang dimiliki oleh pemerhati ini pada masa ini .
• expOrFn: Kaedah/ungkapan yang perlu dipantau. Contohnya: fungsi pemaparan VueComponent, atau kaedah pemeroleh yang dikira, atau abc.bbc.aac rentetan jenis ini (memandangkan kaedah parsePath vue menggunakan split('.') untuk melakukan pemisahan atribut, ia tidak Menyokong abc['bbc']). Jika expOrFn ialah kaedah, ia akan ditugaskan terus kepada atribut pemerhati Jika ia merupakan ungkapan, ia akan ditukar kepada kaedah dan kemudian diberikan kepada pemerhati.
• cb: Panggilan balik ini akan dicetuskan apabila data yang dirujuk dalam getter berubah.
• pilihan: Parameter tambahan yang boleh dihantar termasuk deep, user, lazy, sync Nilai ini adalah palsu secara lalai.
  • deep Jika benar, objek yang dikembalikan oleh pengambil akan dilalui secara mendalam sekali lagi untuk pengumpulan pergantungan selanjutnya.
  • pengguna digunakan untuk menandakan sama ada pendengar ini dipanggil oleh pengguna melalui $watch.
  • lazy digunakan untuk menandakan sama ada pemerhati malas ini digunakan untuk data yang dikira Apabila nilai dalam data berubah, pemeroleh tidak akan dikira serta-merta untuk mendapatkan nilai baharu, tetapi pemerhati akan ditanda. Untuk dirty, ia hanya akan dilaksanakan apabila data yang dikira dirujuk untuk mengembalikan data yang dikira baharu, dengan itu mengurangkan jumlah pengiraan.
  • penyegerakan menunjukkan sama ada pemerhati mengemas kini data secara serentak apabila nilai dalam data berubah Jika benar, nilai akan dikemas kini serta-merta, jika tidak, ia akan dikemas kini dalam nextTick.

Setelah memahami tujuan parameter input digunakan, anda pada asasnya tahu apa yang dilakukan oleh objek Watcher.

Dep

Dep ialah objek yang dilaksanakan oleh vue untuk mengendalikan kebergantungan Pelaksanaan khusus adalah dalam core/observer/dep.js Jumlah kod agak kecil dan mudah difahami.

Dep berfungsi terutamanya sebagai pautan, menghubungkan data reaktif dan pemerhati Setiap penciptaan data reaktif akan mencipta instance dep. Lihat kaedah defineReactive dalam observer/index.js Kaedah defineReactive yang dipermudahkan adalah seperti berikut.

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();
        }
    })}

Selepas instance dep dibuat, logik pengambil dan penetap akan disuntik ke dalam data Apabila data dirujuk, pengambil akan dicetuskan. Iaitu apabila pemerhati melaksanakan getter, dan apabila pemerhati melaksanakan getter, pemerhati akan disumbat ke dalam Dep.target, dan kemudian dengan memanggil kaedah dep.depend(), dep data ini akan membuat sambungan dengan pemerhati.

Selepas sambungan dibuat, apabila data ditukar, logik penetap dicetuskan. Kemudian anda boleh memberitahu semua pemerhati yang dikaitkan dengan dep melalui dep.notify(). Ini membolehkan setiap pemerhati bertindak balas.

Sebagai contoh, saya menonton data dan merujuk data yang sama dalam data yang dikira. Pada masa yang sama, saya juga secara eksplisit merujuk data ini dalam templat, jadi pada masa ini, dep data ini dikaitkan dengan tiga pemerhati, satu ialah pemerhati fungsi render, yang lain ialah pemerhati pengiraan dan yang lain ialah pengguna memanggil $ Pemerhati yang dicipta oleh kaedah jam tangan. Apabila data berubah, dep data ini akan memberitahu ketiga-tiga pemerhati ini untuk mengendalikannya dengan sewajarnya.

Pemerhati

Pemerhati boleh menukar objek biasa atau tatasusunan menjadi reaktif. Kod ini sangat kecil, hanya melintasi plainObject atau tatasusunan dan panggil kaedah defineReactive pada setiap nilai kunci.

Proses

Sekarang ketiga-tiga kelas di atas telah diperkenalkan, anda sepatutnya mempunyai pemahaman yang samar-samar tentang pelaksanaan vue reaktif Seterusnya, mari kita bincangkan keseluruhan proses dengan contoh.

Apabila vue dibuat instantiated, initData akan dipanggil dahulu, kemudian initComputed, dan akhirnya mountComponent akan dipanggil untuk mencipta pemerhati fungsi render. Ini melengkapkan pengaktifan semula data 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教程》】

Atas ialah kandungan terperinci Tafsirkan cara Vue membungkus data menjadi reaktif untuk mencapai kesan MDV. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!