Apakah perbezaan antara dipasang dan dicipta dalam vue

Perbezaan: 1. dicipta dipanggil sebelum templat dijadikan html, iaitu, nilai atribut tertentu biasanya dimulakan sebelum dilekapkan dipanggil selepas templat dijadikan html, biasanya selepas halaman permulaan selesai, dan kemudian Lakukan beberapa operasi yang diperlukan pada nod dom html. 2. Beberapa konfigurasi awal carta tidak boleh dilakukan dalam penciptaan Anda mesti menunggu sehingga html dipaparkan sebelum meneruskan, bagaimanapun, boleh dipasang.

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

1. Apakah kitaran hayat?

Dalam istilah orang awam, ia adalah satu siri proses daripada penciptaan kepada pemusnahan contoh atau komponen dalam Vue. Walaupun ia tidak ketat, ia pada asasnya boleh difahami.

Melalui beberapa siri amalan, kini saya telah menyelesaikan semua masalah yang dihadapi Hari ini saya akan merekodkan perbezaan antara dicipta dan dipasang:

2 Apakah perbezaan antara dicipta dan dipasang?

Ilustrasi rasmi adalah seperti berikut:

Kami melihat dua nod daripada gambar:

dibuat: dipanggil sebelum templat diberikan kepada html, iaitu, beberapa nilai atribut biasanya dimulakan dan kemudian disampaikan kepada pandangan.

dilekapkan: Dipanggil selepas templat dipaparkan ke dalam HTML, biasanya selepas halaman permulaan selesai, dan kemudian beberapa operasi yang diperlukan dilakukan pada nod DOM HTML.

Malah, kedua-duanya lebih mudah difahami Created biasanya digunakan lebih kerap, manakala mounted biasanya dikendalikan apabila menggunakan beberapa pemalam atau komponen, seperti penggunaan palam. -dalam chart.js. :

var ctx = document.getElementById(ID); carta dalam dibuat. Anda mesti menunggu untuk html ini Ia hanya boleh dilakukan selepas rendering, jadi dipasang adalah pilihan terbaik. Mari lihat contoh (menggunakan komponen).

Contoh

Anda boleh melihat output seperti berikut:

Vue.component("demo1",{
        data:function(){
            return {
                name:"",
                age:"",
                city:""
            }
        },
        template:"

• {{name}}
• {{age}}
• {{city}}

",         created:function(){             this.name="唐浩益"             this.age = "12"             this.city ="杭州"             var x = document.getElementById("name")//第一个命令台错误             console.log(x.innerHTML);         },         mounted:function(){             var x = document.getElementById("name")//第二个命令台输出的结果             console.log(x.innerHTML);         }     });     var vm = new Vue({         el:"#example1"     })

Anda boleh melihat bahawa semua berjaya dipaparkan apabila dibuat diberi nilai awal.

Tetapi pada masa yang sama, anda boleh melihat konsol seperti berikut:

Ya, saya melihat ralat pertama yang dilaporkan. Ini sebenarnya kerana id tidak dapat ditemui. Sebabnya adalah seperti berikut:

Apabila dibuat, html dalam paparan Ia belum diberikan, jadi jika anda mengendalikan terus nod dom html pada masa ini, anda pasti tidak akan menemui elemen yang berkaitan

. Di mount, memandangkan html telah diberikan pada masa ini, Oleh itu, nod dom boleh dikendalikan terus, jadi hasil "Tang Haoyi" adalah output.

Di atas adalah ringkasan saya sendiri tentang perbezaan antara mount dan mounted. Saya akan merekodkannya untuk mendalami kesan saya.

[Cadangan berkaitan:

tutorial video vuejs

,

pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah perbezaan antara dipasang dan dicipta dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!