Artikel yang menerangkan prinsip kereaktifan dalam Vue secara terperinci

Artikel ini akan membantu anda mempelajari Vue dan memperoleh pemahaman yang mendalam tentang prinsip reaktif dalam Vue. Saya harap ia akan membantu anda.

Artikel ini memperingati pemergian gula sintaksis responsif

Tanpa berlengah lagi, mari kita terus ke intinya Aplikasi dalam pembangunan harian adalah sangat biasa. Berikut adalah contoh mudah:

let a=3
let b=a*10
console.log(b)//30
a=4
console.log(b)//40

Pada masa ini kami mahu b=4*10, yang jelas tidak mungkin, walaupun kami menambah di hadapan var hanya akan berlaku 变量提升, dan nilai yang kita berikan tidak akan meningkat.

Pada masa ini, peranan responsif dicerminkan:

import { reactive } from 'vue'

let state = reactive({ a: 3 })
let b = computed(() => state.a * 10)
console.log(b.value) // 30
state.a = 4
console.log(b.value) // 40

Hanya 响应式API mudah diperlukan untuk mencapai kesan penjejakan perubahan. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Analisis reaktif

Malah, Vue3 reactive pada asasnya ialah model terbit-langganan

menjejak kebergantungan data dengan mencipta graf kebergantungan. Graf pergantungan ialah graf yang menerangkan data yang bergantung pada data yang mana. Apabila data berubah, sistem reactive Vue 3 secara automatik mencetuskan kemas kini paparan. Ini kerana ia menjejaki perubahan data dalam graf pergantungan dan mencapainya dengan mengaitkannya dengan kemas kini pada paparan

Di sini saya menyenaraikan kod yang ditunjukkan oleh Youda dalam Vue Master sebagai contoh mudah :

class Dep{
    constructor(value){
        this.subscribers=new Set()
        this._value=value
    }
    get value(){
        this.depend()
        return this._value
    }
    set value(newValue){
        this._value=newValue
        this.notify()
    }
    depend(){
        if(activeEffect){
            this.subscribers.add(activeEffect)
        }
    }
    notify(){
        this.subscribers.forEach(effect=>{
            effect()
        })
    }
}

Mari kita analisa kod ini:

• Tentukan atribut subscribe sebagai senarai pelanggan untuk menyimpan semua pelanggan Fungsi maklumat
• depend digunakan untuk mengurus kebergantungan, iaitu pembolehubah
• notify fungsi yang pelanggan bergantung digunakan untuk memberitahu semua pelanggan bahawa nilai pembolehubah telah berubah

Bila nilai pembolehubah berubah, ia secara automatik boleh memberitahu semua pelanggan untuk mengemas kini

Vue2's Object.defineProperty

Malah, dalam tempoh Vue2, responsif telah dilaksanakan oleh Object.defineProperty, tetapi ia telah ditukar kepada Proxy dalam Vue3 Mari kita tunggu dan lihat sebabnya berdasarkan kod sebenar; API reaktif dilaksanakan

function reactive(raw){
    Object.keys(raw).forEach(ket=>{
        const dep=new Dep()
        let value=raw[key]
        
        Object.definProperty(raw,key,{
            get(){
                dep.depend()
                return value
            },
            //当属性发生
            set(newValue){
                value=newValue
                dep.notify()
            }
        })
    })
    //这时候返回的原始对象已经具有响应性
    return raw
}

Tetapi kelemahan di sini adalah jelas:

Dalam Vue 2 Dalam .x, objek yang diluluskan akan terus

ditukar

Dalam Vue3, ia akan mengembalikan proksi responsif, tetapi perubahan langsung kepada objek sumber masih tidak bertindak balasVue.observableIni menghasilkan:

Apabila kita

mengaitkan objek, Vue2's gaya reaktif tidak dapat dikesan kerana Vue akan memulakan instance Apabila melakukan penukaran getter/setter pada hartanah, sifat mesti wujud pada objek

agar Vue menukarnya menjadi
• 添加或者删除 responsif tidak dapat mengesan. perubahan dalam data daripada
tatasusunan
• 下标和长度
Sudah tentu, ini adalah had sejarah Pada masa itu, ES5 hanya boleh memilih

, tetapi dalam versi ES6, terdapat lebih banyak

Pada masa ini, respons Vue Kemudian kami mendapat peningkatan

Object.definPropertyProxyProksi Vue3

Vue3 menggunakan untuk memantau data perubahan. Berbanding dengan Vue2, ia bukan sahaja menyelesaikan masalah di atas, Terdapat juga kelebihan ini:

Proxy

Tidak perlu menggunakan

untuk mencetuskan kereaktifan, yang menjadikan kod kelihatan lebih

Pengenalan
• vue.$setPengesanan perubahan tatasusunan Orientasi Penuh menghapuskan syarat sempadan yang tidak sah dalam Vue2
Mengurangkan jumlah kod responsif yang ditulis dalam Vue3, yang menjadikan pembangunan kami lebih mudah
• Mari kita lihat rupa kod sebenar:

Melaksanakan responsif dengan

mengumpul kebergantungan

const reactiveHandles={
    get(target,key,receiver){
        const dep=getDep(target,key)
        dep.depend()
        return Reflect.get(target,key,receiver)
    },
    set(target,key,value,receiver){
        const dep=getDep(target,key)
        const result=Reflect.set(target,key,value,receiver)
        dep.notify()
        return result
    }
}

pada objek ialah intipati responsif Vue3

ref

Terdapat pepatah dalam dokumentasi rasmi: Pelbagai batasan akhirnya kerana JavaScript tidak mempunyai mekanisme "rujukan" yang boleh bertindak semua jenis nilai, dan had reaktif ialah :

reactive()

hanya boleh mengendalikan struktur data yang boleh diperhatikan, seperti tatasusunan dan struktur data yang tidak boleh diperhatikan, seperti jenis data primitif, tidak boleh dipantau

Ia hanya boleh memproses data yang ditakrifkan dalam komponen di mana ia berada dan tidak boleh memproses pembolehubah global
• pada masa ini,

diperlukan untuk muncul adalah untuk

jenis data asas

dilahirkan untuk mengimbangi kekurangan reaktif Secara ringkasnya, ref lebih sesuai untuk nilai pembolehubah tunggal yang mudah (tetapi dalam pembangunan sebenar, kebanyakan masa,. ref digunakan. HahaharefSebenarnya, ref digunakan , sayang cadangan gula sintaksis responsif telah dibatalkan

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

Atas ialah kandungan terperinci Artikel yang menerangkan prinsip kereaktifan dalam Vue secara terperinci. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!