javascript - Adakah kebergantungan Vue menjejaki data sehala mengikat atau mengikat dua hala?

Question

Seperti yang dinyatakan dalam dokumentasi tapak web rasmi, arahan v-model Vue melaksanakan pengikatan dua hala data.

https://vuejs.org/v2/guide/fo...

Walau bagaimanapun, dalam pembangunan sebenar, aliran data komponen adalah sehala, dan komponen kanak-kanak tidak disyorkan untuk mengubah suai prop komponen induk.

Jadi persoalannya ialah, adakah penjejakan kebergantungan Vue [menyokong pengikatan dua hala pada dasarnya, tetapi hanya mengesyorkan aliran data sehala untuk kemudahan pembangunan], atau [tidak menyokong pengikatan dua hala pada dasarnya, v-model hanya mendengar DOM Bagaimana pula dengan gula sintaksis untuk pelaksanaan acara?

Answer 1

Penjejakan kebergantungan Vue adalah [pada dasarnya, pengikatan dua hala tidak disokong, model v hanyalah gula sintaks yang dilaksanakan dengan mendengar acara DOM]

Penjejakan kebergantungan Vue dilaksanakan dengan menukar semua sifat objek data menjadi getter/setters melalui Object.defineProperty apabila nilai sifat tertentu data ditukar, fungsi set akan dicetuskan, dan apabila nilai sifat diperoleh, fungsi get akan dicetuskan, melalui ciri ini, pandangan boleh diubah apabila data diubah; hanya boleh ditukar melalui acara DOM, dan kemudian paparan boleh ditukar Ini digunakan untuk mencapai pengikatan dua hala

Proses umum adalah seperti berikut

    //data
    var obj = {
        'message':'hello'
    }

    //vm
    var val = obj.message
    Object.defineProperty(obj,'message',{
        get(){
            return val
        },
        set(value){
            val = value
            updataView()
        }
    })

    function updataView(){
        box.innerHTML = obj.message //触发get
    }

    // init
    updataView()

    textIpt.oninput = function(){
        obj.message = this.value //触发set
    }

Pengikatan dua hala adalah untuk mengikat data dan pandangan dalam komponen yang sama, dan tiada kaitan dengan komunikasi antara komponen induk dan anak
Komunikasi antara komponen menggunakan aliran data sehala untuk pemahaman yang lebih baik antara komponen pembangunan, mungkin terdapat berbilang subkomponen yang bergantung pada data tertentu komponen induk Jika subkomponen boleh mengubah suai data komponen induk, perubahan dalam subkomponen akan menyebabkan perubahan dalam semua subkomponen yang bergantung. pada data ini, jadi Vue tidak mengesyorkan subkomponen Jika komponen mengubah suai data komponen induk, mengubah suai prop akan memberikan amaran

.