L'intervieweur a soudainement demandé : quelle est la différence entre Vue2 et Vue3 ?

Préface

L'affirmation selon laquelle le front-end est mort est désormais virale sur Internet. En fait, la raison essentielle est que le nombre de personnes a augmenté et le nombre de postes a diminué, entraînant une pression concurrentielle accrue. .

Nous n'avons aucun moyen de résoudre les problèmes existants dans la société, mais nous pouvons partir de nous-mêmes pour accroître notre compétitivité.

Lorsque plusieurs personnes concourent pour un poste, il n'y a en fait aucune différence entre la deuxième place et la dernière place, car elles ne veulent que la première place.

Il est donc très important de répondre à chaque question sur 100 points !

C'est aussi la raison pour laquelle j'ai ouvert "Une question pour confondre l'intervieweur".

Ce sujet espère aider tout le monde à obtenir 100 points dans chaque question et à « conquérir » l'intervieweur dans les plus brefs délais. Chérissez chaque opportunité d'entretien entre vos mains et souhaitez que vous puissiez tous rejoindre votre entreprise préférée avec un salaire élevé dès que possible

Comment répondre à la question "La différence entre vue2 et vue3"

Vue peut être divisé en trois composants internes majeurs basés sur les modules de fonctions : 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 函数Réactivité reactivite, runtime runtime, éditeur compilateur et quelques petits points de fonction. Donc pour parler de la différence entre vue2 et vue3, nous devons commencer par ces trois aspects et ajouter des points fonctionnels plus petits.

Parlons tout d'abord de la 🎜Réactivité reactivite🎜 : 🎜🎜La réactivité de vue2 repose principalement sur Object.defineProperty pour l'implémentation, mais Object.defineProperty ne peut surveiller que le comportement getter et le comportement setter de la propriété spécifiée de l'objet spécifié🎜, cela peut donc causer des problèmes dans certains cas. 🎜🎜Quel est le problème ? 🎜🎜Par exemple : nous avons déclaré un objet person dans data, mais avons ajouté de nouveaux attributs à person plus tard, ces nouvelles propriétés perdront alors leur réactivité. Il est en fait très simple de résoudre ce problème. Vous pouvez utiliser la méthode Vue.$set pour augmenter la réactivité de l'attribut spécifié de l'objet spécifié🎜. Mais une telle approche est déraisonnable dans le mécanisme de réactivité automatique de Vue. 🎜🎜Donc dans Vue3, Vue introduit les concepts de réflexion et de proxy. La soi-disant réflexion fait référence à Reflect, et ce qu'on appelle. proxy fait référence à Proxy. Nous pouvons utiliser Proxy pour proxy directement un objet commun et obtenir un objet proxy de instance proxy. Dans vue3, ce processus est implémenté via la méthode reactive. 🎜🎜Mais proxy ne peut implémenter que des types de données proxy complexes, donc vue fournit en plus une méthode ref pour gérer la réactivité des types de données simples. ref ne surveille essentiellement pas les données, mais construit une classe RefImpl, via set et get Marqué le fonction value pour l'implémentation. Donc ref doit être déclenché via .value. L'essence de cela est d'appeler la value méthode. 🎜🎜Vient ensuite le 🎜runtime runtime🎜 : 🎜🎜Le soi-disant runtime fait la plupart du temps référence au renderer renderer. Le moteur de rendu est essentiellement un objet. trois méthodes internes principales render, hydrate, createApp, parmi lesquelles render gère principalement la logique de rendu, hydrate gère principalement la logique de rendu côté serveur, et createApp est la méthode pour créer une instance vue. 🎜🎜Ici, nous parlons principalement de la fonction de rendu de rendu Afin d'assurer la séparation de l'environnement hôte et de la logique de rendu, vue3 sépare toute la logique liée à l'environnement hôte. . Passé par l'interface. Le but de ceci est en fait de dissocier l'environnement hôte et la logique de rendu pour garantir que vue puisse s'afficher normalement dans un environnement hôte sans navigateur. 🎜🎜Plus bas se trouve le 🎜editor compiler🎜 : Le compilateur dans 🎜🎜vue est en fait un DSL (sous champs spécifiques Spécial éditeur de langage) , son but est de compiler le template template dans la fonction render. La logique est principalement divisée en trois étapes principales : analyser, transformer et générer. La fonction de parse est de convertir le template en AST (Abstract Syntax Tree), et transform peut convertir AST (Abstract Syntax Tree) est converti en JavaScript AST, et enfin JavaScript AST est converti en render par <code>generate fonction. Le processus de conversion impliquera certains concepts légèrement complexes, tels que 🎜Finite Automatic State Machine🎜 Cela ne sera pas abordé ici. 🎜

De plus, il y a d'autres changements. Par exemple, la nouvelle API de composition de vue3. L'API de composition aura des présentations différentes dans vue3.0 et vue3.2, par exemple : l'API de composition originale > Prenez la fonction setup comme fonction d'entrée. La fonction setup doit renvoyer deux types de valeurs : la première est un objet et la seconde est une fonction. 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

Lorsque la fonction setup renvoie un objet, les données ou méthodes de l'objet peuvent être utilisées dans le template. Lorsqu'une fonction setup renvoie une fonction, la fonction est traitée comme une fonction render.

Mais la forme de cette fonction setup n'est pas bonne, car toute la logique est concentrée dans la fonction setup, et il est facile d'avoir une énorme configuration , nous l'appelons la fonction boulder (Shishan). Par conséquent, dans vue 3.2, un nouveau sucre de syntaxe de script setup a été ajouté pour tenter de résoudre ce problème. À l'heure actuelle, la présentation de la configuration du script est encore très bonne.

De plus, il y a quelques petits changements, comme Fragment, Teleport, Suspense, etc., je n'entrerai pas dans ces détails...

🎜Apprentissage recommandé : "🎜vidéo vue.js tuto 🎜》🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!