Pewawancara tiba-tiba bertanya: Apakah perbezaan antara Vue2 dan Vue3?

Prakata

Kini terdapat khabar angin gila di Internet bahawa bahagian hadapan sudah mati kedudukan telah menurun, yang telah membawa kepada peningkatan tekanan persaingan.

Kita tiada cara untuk menyelesaikan masalah yang ada dalam masyarakat, tetapi kita boleh bermula dari diri kita sendiri untuk meningkatkan daya saing kita.

Apabila berbilang orang bersaing untuk sesuatu jawatan, sebenarnya tiada beza antara tempat kedua dan tempat terakhir, kerana mereka hanya mahukan tempat pertama.

Jadi adalah sangat penting untuk menjawab setiap soalan hingga 100 mata!

Ini juga sebab saya mencipta "Satu Soalan untuk Mengelirukan Penemuduga".

Topik ini berharap dapat membantu semua orang mendapat 100 mata dalam setiap soalan dan "menakluki" penemuduga dalam masa yang paling singkat. Hargai setiap peluang temu duga di tangan anda, dan harap anda semua menyertai syarikat kegemaran anda dengan gaji tinggi secepat mungkin

Bagaimanakah anda harus menjawab apabila ditanya "Perbezaan antara vue2 dan vue3"

Secara dalaman, ia boleh dibahagikan kepada tiga modul utama: VueResponsif, Masa Jalanreactivite, Editorruntimecompiler dan beberapa titik fungsi kecil. Jadi untuk bercakap tentang perbezaan antara dan vue2, kita perlu bermula dengan tiga aspek ini ditambah dengan titik fungsi yang lebih kecil. vue3

Pertama sekali, mari kita bercakap tentang

tindak balasreactivite: Responsif

terutamanya bergantung pada vue2 untuk pelaksanaan, tetapi Object.defineProperty boleh hanya mendengarObject.definePropertyNyatakan gelagat dan getter gelagatsetter atribut yang ditentukan bagi objek yang ditentukan, maka ini akan menyebabkan masalah dalam beberapa kes.

Apa masalahnya?

Contohnya: kami mengisytiharkan objek

dalam data, tetapi menambah atribut baharu pada person kemudian, kemudian atribut baharu ini akan kehilangan responsif. Ia sebenarnya sangat mudah untuk menyelesaikan masalah ini Anda boleh menggunakan kaedah person untuk meningkatkan responsif Vue.$set atribut yang ditentukan objek yang ditentukan. Tetapi kaedah sedemikian adalah tidak munasabah dalam mekanisme responsif automatik . Vue

Jadi dalam

, Vue3 memperkenalkan konsep refleksi dan agensi Apa yang dipanggil refleksi merujuk kepada Vue, dan apa yang dipanggil agensi merujuk kepada Reflect. Kita boleh menggunakan Proxy untuk proksi terus objek biasa dan mendapatkan objek proksi Proxy. Dalam proxy 实例, proses ini dilaksanakan melalui kaedah vue3. reactive

Tetapi

hanya boleh melaksanakan jenis data kompleks proksi, jadi proxy menyediakan kaedah vue tambahan untuk mengendalikan tindak balas jenis data ringkas. ref pada dasarnya tidak memantau data, tetapi membina kelas ref dan menandakan fungsi RefImpl melalui set dan get untuk pelaksanaan. Jadi value mesti dicetuskan oleh ref Intipati melakukan ini adalah untuk memanggil .value. value 方法

Seterusnya ialah

runtime runtime:

Apa yang dipanggil runtime, kebanyakan masa merujuk kepada

, renderer pada dasarnya adalah objek, There ialah tiga kaedah dalaman utama renderer 渲染器, antaranya render、hydrate、createApp terutamanya mengendalikan logik pemaparan, render terutamanya mengendalikan logik pemaparan sebelah pelayan dan hydrate ialah kaedah untuk mencipta kejadian createApp. vue

Di sini kita bercakap tentang

dan render 渲染函数 Untuk memastikan pemisahan persekitaran hos dan logik rendering, semua logik yang berkaitan dengan persekitaran hos diekstrak dan dipindahkan melalui antara muka. Tujuan ini sebenarnya adalah untuk melepaskan persekitaran hos dan memaparkan logik untuk memastikan vue3 boleh dipaparkan secara normal dalam persekitaran hos bukan penyemak imbas. vue

Lebih jauh ke bawah ialah

editorcompiler: dalam

vue sebenarnya adalah compiler dan tujuannya adalah untuk mengedit DSL（特定领域下专用语言编辑器） Susun ke dalam fungsi template 模板. Logik terutamanya dibahagikan kepada tiga langkah utama: render. Fungsi parse、transform 和 generate ialah untuk menukar parse kepada template, AST（抽象语法树） boleh menukar transform kepada AST（抽象语法树） dan akhirnya JavaScript AST menukar generate kepada JavaScript AST. Proses penukaran akan melibatkan beberapa konsep yang sedikit kompleks, seperti render 函数Mesin Keadaan Automatik Terhad yang tidak akan dibincangkan di sini.

Selain itu, terdapat beberapa perubahan lain. Contohnya, vue3 baru ditambah composition API. composition API akan mempunyai beberapa pembentangan berbeza dalam vue3.0 dan vue3.2, sebagai contoh: composition API asal menggunakan fungsi setup sebagai fungsi kemasukan dan fungsi setup mesti mengembalikan dua jenis nilai: pertama ialah objek, dan yang kedua ialah fungsi.

Apabila fungsi setup mengembalikan objek, data atau kaedah dalam objek boleh digunakan dalam template. Apabila fungsi setup mengembalikan fungsi, fungsi itu dianggap sebagai fungsi render.

Tetapi bentuk fungsi setup ini tidak bagus, kerana semua logik tertumpu pada fungsi setup, dan mudah untuk mempunyai fungsi setup yang besar (sial) gunung) fungsi. Jadi apabila vue 3.2, gula sintaks baharu script setup telah ditambahkan untuk cuba menyelesaikan masalah ini. Setakat ini, persembahan script setup masih sangat baik.

Selain itu, terdapat beberapa perubahan kecil, seperti Fragment、Teleport、Suspense dsb. Saya tidak akan menjelaskan secara terperinci...

Pembelajaran yang disyorkan: "Tutorial video vue.js 》

Atas ialah kandungan terperinci Pewawancara tiba-tiba bertanya: Apakah perbezaan antara Vue2 dan Vue3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!