Vue hanya mengemas kini sifat yang dikira apabila keputusan berubah

Question

Pertimbangkan pemudahan berikut bagi masalah yang saya hadapi:

eksport lalai {
    data () {
        kembali {
            i_change_alot: 0,
        };
    },
    dipasang() {
        setInterval(() => {
            this.i_change_alot = Math.random();
        }, 10);
    },
    dikira: {
        someComputedValue() {
            this.i_change_alot;
            
            kembalikan 'a';
        }
    }
}

Saya mencipta atribut i_change_alot yang berubah kepada nilai rawak setiap 10 milisaat. Ini bermakna bahawa sifat menjadi sangat reaktif, jadi ia akan mencetuskan sifat yang dikira. 
Saya mencetuskan pergantungan (sebagai contoh tujuan) dengan hanya memanggil this.i_change_alot, tetapi hasil 
Hasil akhirnya ialah sifat yang dikira someCompulatedValue dikemas kini setiap 10 milisaat, yang setahu saya mencetuskan paparan untuk dipaparkan semula. 
Bagaimana saya boleh membuat someCompulatedValue hanya dipaparkan semula apabila nilai/hasil 
(Soalan asal ialah tentang memaparkan tarikh relatif reaktif, seperti "1 saat lalu", "2 saat lalu", dll. Walau bagaimanapun, selepas beberapa ketika ini menjadi 30 minit lalu, 31 minit yang lalu Ini bermakna selama satu minit penuh, perwakilan rentetan tidak berubah, tetapi ia masih dipaparkan semula setiap 10 milisaat disebabkan pergantungan pada atribut tarikh). 
Menurut https://github.com/vuejs/vue/issues/11399, saya boleh mencipta struct dengan pemerhati, tetapi ia kelihatan berlawanan dengan intuitif. 

Answer 1

Mengapa Vue mencetuskan pengiraan apabila nilainya tidak berubah?

Sebab Vue tidak akan tahu sama ada keputusan akhir berubah sehingga ia dikira semula. Oleh itu, pembolehubah yang dikira akan dikira semula setiap kali kebergantungannya berubah, yang tidak dapat dielakkan.

Salah tanggapan yang biasa ialah Vue mengira pembolehubah dengan mengira nilainya, tetapi sebenarnya, Vue mengira pembolehubah mengikut keadaan kebergantungan mereka.

Elakkan render semula terlalu kerap

Anda boleh mencipta pemerhati (seperti yang anda tahu) atau membungkus templat menggunakan nilai yang dikira ke dalam komponen.

Mengapa membungkusnya ke dalam bantuan komponen lain di sini?

Kerana Vue akan menukar templat anda kepada fungsi render. Fungsi ini dikira semula setiap kali kebergantungannya berubah. Bunyi biasa? Ya, ia berfungsi seperti pembolehubah yang dikira. Kebergantungan fungsi render ialah semua pembolehubah yang anda gunakan dalam templat. Oleh itu, jika anda membungkus pembolehubah yang kerap berubah menjadi komponen, Vue hanya akan memaparkan semula komponen tersebut dan mengelak daripada memaparkan semula komponen besar anda. Ini akan memberi impak besar kepada prestasi anda