Analisis mendalam tentang kaedah pemprosesan data responsif Vue

Artikel ini akan membantu anda mempelajari Vue dan bercakap tentang cara Vue mengendalikan data responsif? Semoga ia membantu semua orang!

Anda mungkin mempunyai banyak keraguan tentang data responsif Vue.

Sebagai contoh, mengapa kita perlu bertukar kepada proksi?

Sebagai contoh, mengapa terdapat dua API, reaktif dan ref?

Contohnya, bagaimanakah vue melaksanakan responsif?

Malah, jawapan kepada ini boleh didapati dalam kod sumber.

Dalam artikel pertama Apakah peningkatan vue3, saya juga menyebut faedah menggunakan proksi dan kekurangan Object.defineProperty. Tetapi hari ini, saya ingin menukar sudut dan membiarkan chatGPT menjawab soalan ini. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Nah, saya rasa ia lebih baik daripada yang saya ringkaskan.

Kemudian teruskan ke soalan seterusnya.

Jawapan ini terasa lebih rasmi dan tidak menjawab jawapan yang saya mahukan.

Sebabnya sebenarnya sangat mudah, kerana kaedah proksi tidak boleh jenis nilai proksi, hanya objek. Jadi kaedah tambahan diperlukan untuk mengendalikan data jenis nilai.

Sudah tentu anda juga boleh mengambil alih dunia dengan satu rujukan Jika kod sumber vue serasi, ia akan menukarnya secara automatik

Dengan pemahaman ini. , mari kita lihat hari ini Sorotan adalah untuk meniru kod sumber vue3 dan melaksanakan sistem responsif.

Anda boleh mengklik untuk melihat kod yang berkaitan , dan hanya pilih cawangan yang berbeza mengikut tajuk artikel.

Melaksanakan reaktif

Seperti yang telah kami perkenalkan dalam artikel sebelumnya, reaktif sebenarnya adalah objek proksi.

Kami boleh menggunakan proksi untuk melaksanakan fungsi proksi mudah reaktif.

      function reactive(target) {        const isObject = (val) =>  val !== null && typeof val === 'object'

        if (!isObject(target)) {          console.warn(`数据必须是对象: ${String(target)}`)          return target
        }        const proxy = new Proxy(target, {          get: (target, key, receiver) => {            console.log('get', key)            const res = Reflect.get(target, key, receiver)            // track(target, key)
            // 这句很关键，不然嵌套数据，里面的不会响应
            if (isObject(res)) {              return reactive(res)
            }            return res
          },          set: (target, key, value, receiver) => {            console.log('set', key, value)            const result = Reflect.set(target, key, value, receiver)            // trigger(target, key, value)
            return result
          },          deleteProperty: () => {            const result = Reflect.deleteProperty(target, key)            return result
          }
        })        return proxy
      }      const person = reactive({        name: '',        age: 18,        like: ['apple']
      })

      person.name  = 'vue test'复制代码

Nota: Reflect

Reflect.get(target, key) sedikit berbeza daripada mengakses terus target[key].

Apabila terdapat get, set, dsb. ini ditunjuk dalam objek proksi, ini boleh diubah hala.

Contohnya:

        const person = new Proxy({            name: "vue test",            age: 18,            get info() {                return 'name is :' + this.name + ' age is:' + this.age
            }
        }, {            get: (target, key, receiver) => {                console.log('get', key)                // return target[key]
                return Reflect.get(target, key, receiver)
            }
        })        console.log(person.info)复制代码

Menggunakan Reflect, kita boleh mencetuskannya apabila mengakses nama dan umur. Selepas

ditukar kepada sasaran, ia hanya akan dicetuskan sekali dalam maklumat.

return target[key]复制代码

Melaksanakan ref

Dalam vue3, ref dilaksanakan melalui get dan set.

Sama seperti di atas, kami masih mengisytiharkan fungsi dahulu, dan kemudian mengakses data melalui dapatkan dan tetapkan.

      function ref(value) {        return new RefImpl(value)
      }      class RefImpl {        constructor(value) {          // 如果值是对象，则用reactive处理
          this._value = isObject(value) ? reactive(value) : value          // 记录一下初始值
          this._rawValue = value
        }        get value() {          // trackRefValue(this)
          return this._value
        }        set value(newVal) {          if (!Object.is(newVal, this._rawValue)) {            // 更新原始数据
            this._rawValue = newVal            // 更新 .value 的值
            this._value = isObject(newVal) ? reactive(newVal) : value            // triggerRefValue(this)
          }
        }
      }复制代码

Kod sumber juga menerangkan dengan sangat intuitif mengapa ref mesti digunakan dalam .value, kerana get/set ditetapkan melalui nilai.

Tambah pengumpulan dan pencetus kebergantungan

Kami telah melengkapkan proksi data, tetapi selepas data berubah, bagaimanakah kami memberitahu komponen untuk melaksanakan pengikatan dua hala?

Jawapannya adalah bergantung pada pengumpulan dan pencetus, iaitu apabila get dicetuskan, saya menyimpan syarat [fungsi] yang mencetuskan apabila set dicetuskan, laksanakan semula untuk mencetuskan syarat ]. 】Adakah itu cukup?

Mari lihat kod sekali lagi saya akan menambah kaedah pengumpulan trek dan kaedah pencetus sasaran. (Iaitu, dua baris kod diulas dalam coretan kod di atas)

Selain itu, fungsi kesan juga diperlukan untuk mengurus fungsi pencetus.

      let activeEffect = null
      const targetMap = new WeakMap()      // 依赖收集/触发
      function track(target, key) {        let depsMap = targetMap.get(target)        if (!depsMap) {
          targetMap.set(target, (depsMap = new Map()))
        }        let dep = depsMap.get(key)        if (!dep) {
          dep = new Set()
        }
        dep.add(activeEffect)
        depsMap.set(key, dep)
      }      function trigger(target, key, value) {        const depsMap = targetMap.get(target)        if (!depsMap) {          return
        }        const deps = depsMap.get(key)        if (!deps) {          return
        }

        deps.forEach(effectFn => {          if (effectFn.scheduler) {
            effectFn.scheduler()
          } else {            effectFn()
          }
        })
      }      function effect(fn,options = {}) {        const effectFn = () => {          try {
            activeEffect = effectFn            return fn()
          } catch (error) {
            activeEffect = null
          }
        }        if (!options.lazy) {          effectFn()
        }
        effectFn.scheduler = options.scheduler
        return effectFn
      }      const person = reactive({        name: "hello world"
      })      effect(() => {        console.log('effect person', person.name)
      })      setTimeout(() => {
        person.name = 'setTimeout world'
      }, 2000)复制代码

activeEffect digunakan untuk menyimpan fungsi keadaan pencetus.

targetMap digunakan untuk menyimpan kamus dependensi, formatnya seperti berikut

{
    target: {
        key: []
    }
}复制代码

Hasil keluaran ialah hello world Selepas 2 saat, laksanakan semula fungsi dependency dan output setTimeout world

Ringkasan

Proksi data tidak rumit, ia hanya menambah beberapa pemprosesan sempadan berdasarkan proksi. Untuk mencapai responsif, anda perlu menambah pengumpulan pergantungan dan pelaksanaan pencetus pergantungan.

effect ialah fungsi yang sangat penting Banyak API dibangunkan berdasarkan fungsi ini, seperti useEffect dan jam tangan. Kemas kini komponen juga berdasarkan fungsi kesan, yang akan disebut kemudian.

Jika anda tidak memahami kesannya, anda boleh menyusun urutan pelaksanaan.

• 1. Panggil fungsi kesan dan masukkan parameter fn
• 2 Isytiharkan fungsi effectFn, laksanakan dan simpan fungsi sebagai activeEffect
• 3. Laksanakan fn dan baca person.name
• 4. Gunakan proksi dapatkan
• 5. Kumpul kebergantungan dan simpan fungsi yang disimpan oleh activeEffect ke dalam peta global
• 6. Pada masa ini, fungsi kesan dilaksanakan dan menunggu kemas kini data
• Selepas 7.2s, pergi ke proksi set proksi
• 8 Jalankan fungsi yang disimpan dalam peta global, laksanakan semula fungsi kesan, dan kembali ke langkah 1 semula

Anda boleh klik untuk melihat kod yang berkaitan dan pilih cawangan pelajaran3.

Kod yang berkaitan dengan artikel boleh dilihat dalam vue/contoh, dan versi pelaksanaan vue tiruan boleh dilihat dalam pakej/reaktiviti.

(Mempelajari perkongsian video: Tutorial pengenalan Vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Analisis mendalam tentang kaedah pemprosesan data responsif Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!