Apakah yang diwakili oleh sifat mendengar objek vue?-Soal Jawab bahagian hadapan-php.cn

Apakah yang diwakili oleh sifat mendengar objek vue?

青灯夜游

Lepaskan： 2022-12-14 19:46:59

asal

2529 orang telah melayarinya

Atribut mendengar objek vue diwakili oleh "jam tangan". Apa yang dipanggil pemantauan adalah untuk memantau dan bertindak balas terhadap perubahan dalam status atau sifat objek terbina dalam bermakna anda boleh memantau perubahan dalam data lain. Terdapat dua cara untuk menulis atribut pemantauan dalam Vue: 1. Lulus dalam konfigurasi jam tangan dalam "Vue() baharu" 2. Pantau melalui "vm.$watch".

Apakah yang diwakili oleh sifat mendengar objek vue?

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

menonton sifat mendengar

Apa yang dipanggil pemantauan adalah untuk memantau status atau perubahan sifat objek terbina dalam dan bertindak balas kepada mereka, sifat mendengar , yang bermaksud bahawa perubahan dalam data lain boleh dipantau.

Kadangkala, data terbitan yang kami perlukan diproses secara tak segerak Pada masa ini, sifat yang dikira tidak mudah digunakan (tidak boleh mengendalikan tak segerak). Kita boleh menggunakan pilihan lain: tonton

tonton: atribut mendengar; apa yang dipantau ialah atribut data Apabila atribut berubah, beberapa perkara akan dilakukan

Terdapat dua cara untuk menulis. atribut mendengar , seperti berikut: Masukkan konfigurasi

dalam

new Vue()watch.
Pantau melalui vm.$watch.

Lihat contoh khusus.

Masukkan konfigurasi jam tangan dalam Vue() baharu.

    <div>
        <div>今天天气很{{info}}</div>
<br>
        <button>切换天气</button>
    </div>
    <script>
        Vue.config.productionTip = false;

        new Vue({
            el:"#root",
            data:{
                isHot:true
            },
            computed:{
                info(){
                    return this.isHot ? "炎热" : "凉爽";
                }
            },
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot;
                }
            },
            watch:{
                isHot:{
                    immediate:true,
                    handler(newValue,oldValue){
                        console.log("监听isHot：","newValue="+newValue,"oldValue="+oldValue);
                    }
                }
            }
        })
    </script>

Salin selepas log masuk

Jika jam tangan panas, hanya pengendali fungsi panggil balik disediakan, seperti berikut:

watch:{
    isHot:{
        handler(newValue,oldValue){
            console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
        }
    }}

Salin selepas log masuk

boleh dipendekkan kepada bentuk berikut:

watch:{
    isHot(newValue,oldValue){
        console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
    }}

Salin selepas log masuk

Pantau melalui vm.$watch.

    <div>
        <div>今天天气很{{info}}</div>
<br>
        <button>切换天气</button>
    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:"#root",
            data:{
                isHot:true
            },
            computed:{
                info(){
                    return this.isHot ? "炎热" : "凉爽";
                }
            },
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot;
                }
            }
        })

        vm.$watch("isHot",{
            immediate:true,
            handler(newValue,oldValue){
                console.log("监听isHot：","newValue="+newValue,"oldValue="+oldValue);
            }
        })
    </script>

Salin selepas log masuk

Jika jam tangan panas, hanya pengendali disediakan, seperti berikut:

vm.$watch("isHot",{
    handler(newValue,oldValue){
        console.log("isHot:newValue="+newValue,"oldValue="+oldValue);
    }})

Salin selepas log masuk

boleh dipendekkan kepada bentuk berikut:

vm.$watch("isHot",function(newValue,oldValue){
    console.log("isHot:newValue="+newValue,"oldValue="+oldValue);})

Salin selepas log masuk

Buka Pelayar, uji.
Apakah yang diwakili oleh sifat mendengar objek vue?

Pemantauan mendalam

    <div>
        <div>a的值是{{numbers.a}}</div>
        <button>点我加1</button>
    </div>
    <script>
        Vue.config.productionTip = false;

        new Vue({
            el:"#root",
            data:{
                numbers:{
                    a:1,
                    b:1
                }
            },
            watch:{
                "numbers.a":{
                    handler(newValue,oldValue){
                        console.log("a:","newValue="+newValue,"oldValue="+oldValue);
                    }
                },
                "numbers":{
                    deep:true,
                    handler(newValue,oldValue){
                        console.log("numbers发生了变化！");
                    }
                }
            }
        })

    </script>

Salin selepas log masuk

Memantau atribut tertentu berbilang peringkat struktur, Contohnya, numbers.a, apabila sifat objek nombor berubah, Vue akan mendengarnya dan melaksanakan pengendali panggil balik.
Memantau semua sifat struktur berbilang peringkat (pemantauan mendalam), seperti "numbers":{deep:true} Apabila mana-mana sifat objek nombor berubah, Vue juga boleh mendengar dan melaksanakannya kembali kepada pengendali.

Sifat mendengar dan sifat yang dikira

Gunakan sifat mendengar untuk melaksanakan Walau bagaimanapun, perkara yang boleh dicapai dengan memantau atribut mungkin tidak semestinya dicapai dengan mengira atribut, seperti melakukan operasi tak segerak apabila data berubah. Mari lihat contoh khusus: apabila firstName berubah, tunggu 1 saat sebelum fullName berubah.

    <div>
        姓：<input><br><br>
        名：<input><br><br>
        全名：<span>{{fullName}}</span>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:"张",
                lastName:"三",
                fullName:"张-三"
            },
            watch:{
                firstName(val){
                    this.fullName = val + this.lastName;
                },
                lastName(val){
                    this.fullName = this.firstName + "-" + val;
                }
            }
        })
    </script>

Salin selepas log masuk

Kaedah [vue], sifat terkira, pemantauan data juga membandingkan sifat terkira dan sifat pemantauan. Walaupun sifat yang dikira lebih sesuai dalam kebanyakan kes, sifat pendengar lebih berguna apabila anda perlu melakukan operasi tak segerak apabila data berubah. Selain itu, disyorkan sekali lagi:

    <div>
        姓：<input><br><br>
        名：<input><br><br>
        全名：<span>{{fullName}}</span>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:"张",
                lastName:"三"
            },
            computed:{
                fullName(){
                    return this.firstName+"-"+this.lastName;
                }
            }
        })
    </script>

Salin selepas log masuk

Sebaik-baiknya menulis fungsi yang diuruskan oleh Vue sebagai fungsi biasa, supaya titik ini dalam fungsi adalah Vue contoh.

    <div>
        姓：<input><br><br>
        名：<input><br><br>
        全名：<span>{{fullName}}</span>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:"张",
                lastName:"三",
                fullName:"张-三"
            },
            watch:{
                firstName(val){
                    setTimeout(() => {
                        this.fullName = val + "-" + this.lastName;
                    },1000);
                },
                lastName(val){
                    this.fullName = this.firstName + "-" + val;
                }
            }
        })
    </script>

Salin selepas log masuk

Fungsi yang tidak diuruskan oleh Vue, seperti fungsi pemasa, fungsi panggil balik ajax dan fungsi janji, paling baik ditulis sebagai fungsi anak panah. Kerana fungsi anak panah tidak mempunyai ini sendiri.

[Cadangan berkaitan:

,
pembangunan bahagian hadapan web
]

Atas ialah kandungan terperinci Apakah yang diwakili oleh sifat mendengar objek vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!