Apakah sifat jam tangan dalam vue

jam tangan ialah atribut pemantauan. Dalam Vue, anda boleh memantau perubahan atribut tertentu melalui atribut jam tangan Apabila atribut ini berubah, anda boleh melakukan beberapa operasi: 1. Apabila atribut yang dipantau oleh atribut yang dipantau berubah, fungsi panggil balik akan dipanggil secara automatik dan Perform. operasi berkaitan; 2. Atribut pemantauan Atribut yang dipantau mesti wujud supaya berkesan. Terdapat dua cara untuk menulis sifat pemantauan: "Vue baharu({watch:{}})" dan "objek instantiated vue.$watch(fungsi panggil balik 'property name')".

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

vue memantau hartanah

Semasa pembangunan, kita akan menghadapi situasi di mana kita perlu melakukan beberapa operasi apabila hartanah berubah. Sifat yang mengesan perubahan ini dipanggil sifat pemantauan dalam Vue.

1. Apakah atribut pemantauan itu? atribut ini Apabila perubahan berlaku, terdapat beberapa perkara yang boleh kita lakukan.

Apabila atribut yang dipantau oleh atribut pemantauan berubah, fungsi panggil balik (pengendali) akan dipanggil secara automatik dan operasi yang berkaitan akan dilakukan

Atribut yang dipantau oleh atribut pemantauan mesti wujud , adakah ia mempunyai kesan.

• Di sini kami menggunakan kes cuaca untuk menerangkan sifat pemantauan:
• Mula-mula kod html:

Seterusnya kami menulis kod js:

    <div id="app">
        <p>今天天气很{{info}}</p>
        <button v-on:click="change">切换天气</button>
    </div>

Fungsi

dalam kod ialah fungsi panggil balik yang kami nyatakan sebelum ini Apabila atribut

berubah, fungsi ini akan dipanggil secara automatik.

    var vm = new Vue({
        el: "#app",
        data: {
            isHot: true,
        },
        computed: {
            info: function () {
                return this.isHot ? "热" : "冷";
            }
        },
        methods: {
            change: function () {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            isHot: {
                handler:function (newVal, oldVal) {
                    console.log("isHot属性发生了变化");
                },
            }
        }
    });

Sudah tentu kita boleh menambah atribut pada objek handler: isHot Apabila nilai Boolean atribut ini adalah benar, fungsi panggil balik

akan dipanggil sekali semasa pemulaan.

idHotimmediatehandler

2 Cara menulis atribut pemantauan

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true
        }
    }

Terdapat dua cara untuk menulis atribut pemantauan: <. 🎜> dalam Tulis terus dalam objek instantiasi vue:

, dan kemudian masukkan konfigurasi yang berkaitan

dan tulis
• 
  new Vue({watch:{}}) melalui
Kami sudah melakukannya menulis cara pertama di sini, setelah menunjukkannya, mari tunjukkan cara penulisan kedua:
• vue实例化对象.$watch('属性名'，回调函数)Di sini kita menganggap bahawa objek instantiasi vue ialah vm.

3. Pemantauan mendalam terhadap atribut pemantauan

    vm.$watch('isHot',function (newVal, oldVal) {
        console.log("isHot属性发生了变化");
    });

Pemantauan yang kami laksanakan sebelum ini hanya boleh memantau data mudah dan langsung bagi instance vue. Data tidak boleh dipantau jika ia menemui objek atau tatasusunan. Cara untuk melakukan ini ialah untuk meningkatkan kecekapan, dalam sifat pemantauan Vue, hanya satu lapisan dipantau secara lalai. Jika kita ingin memantau berbilang lapisan, kita perlu mendayakan pemantauan mendalam secara manual .

Antaranya

membolehkan pemantauan yang mendalam. Pemantauan mendalam adalah untuk memantau objek atau tatasusunan dalam data dalam Vue Apabila sifat dalam objek atau tatasusunan berubah, fungsi panggil balik sifat pemantauan akan dipanggil secara automatik.

Dalam vue, sebenarnya adalah mungkin untuk mengesan perubahan dalam nilai dalaman objek, jadi mengapa sifat pemantauan vue tidak mendayakan pemantauan mendalam secara lalai?

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true,
            deep: true
        }
    }

Oleh kerana fungsi panggil balik sifat pemantauan Vue dipanggil apabila data berubah Jika pemantauan mendalam dihidupkan, Vue akan memantau semua sifat di dalam objek, yang akan mengurangkan kecekapan Vue. deep:true

Apabila kami menggunakan atribut pemantauan, kami menilai sama ada untuk mendayakan pemantauan mendalam berdasarkan keperluan perniagaan tertentu. [Cadangan berkaitan:

tutorial video vuejs

,

pembangunan bahagian hadapan web

]

Atas ialah kandungan terperinci Apakah sifat jam tangan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!