Der Interviewer fragte plötzlich: Was ist der Unterschied zwischen Vue2 und Vue3?

Vorwort

Die Aussage, dass das Front-End tot sei, verbreitet sich jetzt im Internet. Tatsächlich liegt der wesentliche Grund darin, dass die Anzahl der Personen gestiegen ist und die Anzahl der Positionen abgenommen hat, was zu einem erhöhten Wettbewerbsdruck geführt hat .

Wir haben keine Möglichkeit, die bestehenden Probleme in der Gesellschaft zu lösen, aber wir können bei uns selbst anfangen, um unsere Wettbewerbsfähigkeit zu steigern.

Wenn mehrere Personen um eine Position konkurrieren, gibt es eigentlich keinen Unterschied zwischen dem zweiten und dem letzten Platz, da sie nur den ersten Platz wollen.

Daher ist es sehr wichtig, jede Frage mit 100 Punkten zu beantworten!

Das ist auch der Grund, warum ich „Eine Frage, die den Interviewer verwirrt“ geöffnet habe.

Dieses Thema soll dazu beitragen, dass jeder in jeder Frage 100 Punkte erreicht und den Interviewer in kürzester Zeit „erobert“. Schätzen Sie jede Gelegenheit zu einem Vorstellungsgespräch in Ihrer Hand und wünschen Sie allen, dass Sie so schnell wie möglich zu Ihrem Lieblingsunternehmen mit hohem Gehalt wechseln können

Wie sollten Sie auf die Frage „Der Unterschied zwischen vue2 und vue3“ antworten?

Vue kann basierend auf Funktionsmodulen in drei Hauptinterna unterteilt werden: Vue 内部根据功能可以被分为三个大的模块：响应性 reactivite、运行时 runtime、编辑器 compiler，以及一些小的功能点。那么要说 vue2 与 vue3 的区别，我们需要从这三个方面加小的功能点进行说起。

首先先来说 响应性 reactivite：

vue2 的响应性主要依赖 Object.defineProperty 进行实现，但是 Object.defineProperty 只能监听 指定对象的指定属性的 getter 行为和 setter 行为，那么这样在某些情况下就会出现问题。

什么问题呢？

比如说：我们在 data 中声明了一个对象 person ，但是在后期为 person 增加了新的属性，那么这个新的属性就会失去响应性。想要解决这个问题其实也非常的简单，可以通过 Vue.$set 方法来增加 指定对象指定属性的响应性。但是这样的一种方式，在 Vue 的自动响应性机制中是不合理。

所以在 Vue3 中，Vue 引入了反射和代理的概念，所谓反射指的是 Reflect，所谓代理指的是 Proxy。我们可以利用 Proxy 直接代理一个普通对象，得到一个 proxy 实例 的代理对象。在 vue3 中，这个过程通过 reactive 这个方法进行实现。

但是 proxy 只能实现代理复杂数据类型，所以 vue 额外提供了 ref 方法，用来处理简单数据类型的响应性。ref 本质上并没有进行数据的监听，而是构建了一个 RefImpl 的类，通过 set 和 get 标记了 value 函数，以此来进行的实现。所以 ref 必须要通过 .value 进行触发，之所以要这么做本质是调用 value 方法。

接下来是运行时 runtime：

所谓的运行时，大多数时候指的是 renderer 渲染器，渲染器本质上是一个对象，内部主要三个方法 render、hydrate、createApp ，其中 render 主要处理渲染逻辑，hydrate 主要处理服务端渲染逻辑，而 createApp 就是创建 vue 实例的方法。

这里咱们主要来说 render 渲染函数，vue3 中为了保证宿主环境与渲染逻辑的分离，把所有与宿主环境相关的逻辑进行了抽离，通过接口的形式进行传递。这样做的目的其实是为了解绑宿主环境与渲染逻辑，以保证 vue 在非浏览器端的宿主环境下可以正常渲染。

再往下是 编辑器 compiler：

vue 中的 compiler 其实是一个 DSL（特定领域下专用语言编辑器） ，其目的是为了把 template 模板 编译成 render 函数。 逻辑主要是分成了三大步： parse、transform 和 generate。其中 parse 的作用是为了把 template 转化为 AST（抽象语法树），transform 可以把 AST（抽象语法树） 转化为 JavaScript AST，最后由 generate 把 JavaScript AST 通过转化为 render 函数Reaktionsfähigkeit reactivite, Laufzeit runtime, Editor Compiler und einige kleine Funktionspunkte. Um also über den Unterschied zwischen vue2 und vue3 zu sprechen, müssen wir mit diesen drei Aspekten beginnen und kleinere funktionale Punkte hinzufügen.

Lassen Sie uns zunächst über 🎜Reaktionsfähigkeit reactivite🎜 sprechen: 🎜🎜vue2s Reaktionsfähigkeit beruht hauptsächlich auf Object.defineProperty für die Implementierung, Object.defineProperty kann jedoch nur das Getter-Verhalten und das Setter-Verhalten der angegebenen Eigenschaft des angegebenen Objekts überwachen🎜, sodass dies zu Problemen führen kann einige Fälle. 🎜🎜Was ist das Problem? 🎜🎜Zum Beispiel: Wir haben ein Objekt person in data deklariert, aber später neue Attribute zu person hinzugefügt, dann verlieren diese neuen Eigenschaften ihre Reaktionsfähigkeit. Es ist tatsächlich sehr einfach, dieses Problem zu lösen. Sie können die Methode Vue.$set verwenden, um die Reaktionsfähigkeit des angegebenen Attributs des angegebenen Objekts zu erhöhen. Ein solcher Ansatz ist jedoch im automatischen Reaktionsmechanismus von Vue nicht sinnvoll. 🎜🎜In Vue3 führt Vue die Konzepte von Reflexion und Proxy ein. Die sogenannte Reflexion bezieht sich auf Reflect und die sogenannte Proxy bezieht sich auf Proxy. Wir können Proxy verwenden, um ein gemeinsames Objekt direkt zu vertreten und ein Proxy-Objekt einer Proxy-Instanz zu erhalten. In vue3 wird dieser Prozess durch die Methode reactive implementiert. 🎜🎜Aber proxy kann nur komplexe Proxy-Datentypen implementieren, daher bietet vue zusätzlich eine ref-Methode, um die Reaktionsfähigkeit einfacher Datentypen zu handhaben. ref überwacht im Wesentlichen keine Daten, sondern erstellt eine RefImpl-Klasse, indem set und get den markiert value-Funktion zur Implementierung. Daher muss ref durch .value ausgelöst werden. Das Wesentliche dabei ist, die value-Methode aufzurufen. 🎜🎜Als nächstes kommt die 🎜Laufzeit runtime🎜: 🎜🎜Die sogenannte Laufzeit bezieht sich meistens auf den Renderer. Der Renderer ist im Wesentlichen ein Objekt Drei interne Hauptmethoden render, hydrate, createApp, wobei render hauptsächlich die Rendering-Logik verarbeitet, hydrate hauptsächlich die serverseitige Rendering-Logik verarbeitet und createApp ist die Methode zum Erstellen einer vue-Instanz. 🎜🎜Hier sprechen wir hauptsächlich über die Render-Rendering-Funktion. Um die Trennung der Host-Umgebung und der Rendering-Logik sicherzustellen, trennt vue3 die gesamte Logik, die sich auf die Host-Umgebung bezieht . Über die Schnittstelle weitergeleitet. Der Zweck davon besteht eigentlich darin, die Host-Umgebung und die Rendering-Logik zu entkoppeln, um sicherzustellen, dass vue in einer Nicht-Browser-Host-Umgebung normal rendern kann. 🎜🎜Weiter unten ist der 🎜editor compiler🎜: Der compiler in 🎜🎜vue ist eigentlich ein DSL (unter bestimmten Feldern Spezial). Spracheditor) , dessen Zweck darin besteht, die template template in die render-Funktion zu kompilieren. Die Logik ist hauptsächlich in drei Hauptschritte unterteilt: parsen, transformieren und generieren. Die Funktion von parse besteht darin, template in AST (Abstract Syntax Tree) zu konvertieren, und transform kann AST (Abstract Syntax Tree) wird in JavaScript AST konvertiert, und schließlich wird JavaScript AST in render by <code>generateumgewandelt > Funktion. Der Konvertierungsprozess umfasst einige etwas komplexe Konzepte, wie z. B. „Finite Automatic State Machine“ (Endliche automatische Zustandsmaschine). Diese werden hier nicht besprochen. 🎜

Darüber hinaus gibt es noch einige weitere Änderungen. Zum Beispiel die neue composition API von vue3. composition API wird in vue3.0 und vue3.2 einige unterschiedliche Darstellungen haben, zum Beispiel: die ursprüngliche composition API Nehmen Sie die Funktion <code>setup als Eingabefunktion. Die Funktion setup muss zwei Arten von Werten zurückgeben: Der erste ist ein Objekt und der zweite ist eine Funktion. vue3 新增的 composition API。 composition API 在 vue3.0 和 vue3.2 中会有一些不同的呈现，比如说：最初的 composition API 以 setup 函数作为入口函数， setup 函数必须返回两种类型的值：第一是对象，第二是函数。

当 setup 函数返回对象时，对象中的数据或方法可以在 template 中被使用。当 setup 函数返回函数时，函数会被作为 render 函数。

但是这种 setup 函数的形式并不好，因为所有的逻辑都集中在 setup 函数中，很容易出现一个巨大的 setup 函数，我们把它叫做巨石（屎山）函数。所以 vue 3.2 的时候，新增了一个 script setup 的语法糖，尝试解决这个问题。目前来看 script setup 的呈现还是非常不错的。

除此之外还有一些小的变化，比如 Fragment、Teleport、Suspense

Wenn die Funktion setup ein Objekt zurückgibt, können die Daten oder Methoden im Objekt in template verwendet werden. Wenn eine setup-Funktion eine Funktion zurückgibt, wird die Funktion als render-Funktion behandelt.

Aber die Form dieser setup-Funktion ist nicht gut, da die gesamte Logik in der setup-Funktion konzentriert ist und es leicht ist, ein riesiges setup zu haben code>-Funktion, wir nennen sie die Boulder-Funktion (Shishan). Daher wurde in <code>vue 3.2 ein neuer Syntaxzucker von script setup hinzugefügt, um zu versuchen, dieses Problem zu lösen. Derzeit ist die Darstellung des Skript-Setups noch sehr gut.

Darüber hinaus gibt es einige kleine Änderungen, wie Fragment, Teleport, Suspense usw., auf die ich nicht näher eingehen werde...

🎜Empfohlenes Lernen: „🎜vue.js Video Tutorial 🎜》🎜🎜

Das obige ist der detaillierte Inhalt vonDer Interviewer fragte plötzlich: Was ist der Unterschied zwischen Vue2 und Vue3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!