Maison interface Web Voir.js Quelle est la différence entre vue3.0 et vue2.0 ?

Quelle est la différence entre vue3.0 et vue2.0 ?

Nov 18, 2020 pm 03:01 PM
vue

Différence : dans vue2.0, quelle que soit la taille des données, un observateur sera créé pour elles au début ; lorsque les données sont volumineuses, cela peut entraîner une pression évidente sur les performances lors du chargement de la page. Vue3.0 ne créera des observateurs que pour "les données utilisées pour restituer la partie visible initiale", et les observateurs de vue3.0 sont plus efficaces.

Quelle est la différence entre vue3.0 et vue2.0 ?

La différence entre vue3.0 et 2.0

Vue-cli3.0 dans 8 Il est sorti officiellement le 11 mars Après avoir lu les commentaires, la compatibilité n'est pas très bonne et il y a beaucoup de changements dans les commandes. Je ne suis pas particulièrement optimiste

Par rapport à vue2.0, les avantages du. La version de vue3.0 se reflète principalement dans : Plus rapide, plus petit, plus facile à maintenir, plus facile à utiliser en natif, plus facile pour les développeurs

Plus rapide
1. Le DOM virtuel est complètement réécrit, le montage et l'application des correctifs sont 100 % plus rapides ;
2. Plus de rappels au moment de la compilation pour réduire la surcharge d'exécution ;
3. Mécanisme d'observation basé sur un proxy pour assurer une couverture linguistique complète et de meilleures performances
4. Abandonner l'objet. définirProperty, utiliser un proxy natif plus rapide ;
5. Vitesse d'initialisation de l'instance de composant augmentée de 100 %
6. Vitesse doublée/utilisation de la mémoire réduite de moitié

Plus petite
1. Le tremblement d'arbre est plus convivial ;
2. Nouveau moteur d'exécution de base : ~ 10 ko gzippé

===============

3.0 ajoute la prise en charge de TypeScript et PWA

Certaines commandes ont changé :

  • Téléchargez et installez npm install -g vue@cli

  • Liste de vues supprimées

  • Créer un projet vue create

  • Démarrer le projet npm run serve

  • La structure du répertoire du projet par défaut a également changé :

  • Le répertoire du fichier de configuration, les dossiers config et build ont été supprimés

  • Suppression du fichier statique dossier, ajout d'un dossier public et déplacement de index.html vers public

  • Ajout d'un dossier vues dans le dossier src pour classer les composants de vue et les composants publics


Remarque :

le travail en ligne chinois php a également commencé à enseigner la dernière version des cours vue. Les amis intéressés peuvent en savoir plus.

Installer

npm install -g vue@cli
Copier après la connexion

Créer un fichier de projet :


vue create project //项目的名称
Copier après la connexion

============= = =======

La différence entre vue2 et vue3

1 Commandes communes

vue -V Afficher la version locale de la vue<. 🎜>

2. Documents officiels

3.0 : https://cli.vuejs.org/zh/

3. Créer des fichiers

3.0 : vue créer entrer le dossier du fichier du projet pour créer le projet.

2.0 : vue init webpack

4. Démarrez le projet

3.0 start npm run serve

2.0 start npm run dev

build Gone, la configuration a disparu, oh, et le point le plus important est que le modèle de nœud est automatiquement téléchargé lors de l'installation du projet 3.0.

Créez un vue.config.js dans le répertoire racine

module.exports = {
 baseUrl: process.env.NODE_ENV === &#39;production&#39; ? &#39;/online/&#39; : &#39;/&#39;,
 // outputDir: 在npm run build时 生成文件的目录 type:string, default:&#39;dist&#39;
 // outputDir: &#39;dist&#39;,
 // pages:{ type:Object,Default:undfind }
 devServer: {
 port: 8888, // 端口号
 host: &#39;localhost&#39;,
 https: false, // https:{type:Boolean}
 open: true, //配置自动启动浏览器
 // proxy: &#39;http://localhost:4000&#39; // 配置跨域处理,只有一个代理
 proxy: {
 &#39;/api&#39;: {
 target: &#39;<url>&#39;,
 ws: true,
 changeOrigin: true
 },
 &#39;/foo&#39;: {
 target: &#39;<other_url>&#39;
 }
 }, // 配置多个代理
 }
 }
Copier après la connexion

==================

La différence entre Vue3.0 et Vue2.0

1 L'observation paresseuse est effectuée par défaut.

Dans la version 2.x, quelle que soit la taille des données, des observateurs seront créés pour celles-ci au début. Lorsque les données sont volumineuses, cela peut entraîner une pression importante sur les performances lors du chargement de la page. Dans la version 3.x, les observateurs ne seront créés que pour les "données utilisées pour restituer la partie visible initiale", et les observateurs 3.x sont plus efficaces.

2. Des notifications de modifications plus précises.

En terme de proportion : en version 2.x, lorsque vous utilisez Vue.set pour ajouter une propriété à un objet, tous les watchers de cet objet seront réexécutés en version 3.x, uniquement ceux-là ; qui dépendent de cette propriété. L'observateur s'exécutera à nouveau.

3.0 a récemment ajouté la prise en charge de TypeScript et PWA

4. Certaines commandes ont changé :

Téléchargez et installez npm install -g vue@cli

Liste de vues supprimée

Créer un projet vue create

Démarrer le projet npm run serve

5. La structure du répertoire du projet par défaut a également changé :

Supprimé le répertoire du fichier de configuration, les dossiers config et build

Suppression du dossier statique, ajout d'un dossier public et déplacement de index.html vers public

Dans le dossier src Un nouveau dossier de vues est ajouté pour la classification afficher les composants et les composants publics

Recommandations associées :


Un résumé des questions d'entretien avec vue frontale en 2020 (avec réponses))

Recommandation du didacticiel Vue : les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter :
Enseignement de la programmation

! !

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser Vue pour implémenter des formulaires de citation électronique avec un en-tête unique et multi-corps? Comment utiliser Vue pour implémenter des formulaires de citation électronique avec un en-tête unique et multi-corps? Apr 04, 2025 pm 11:39 PM

Comment mettre en œuvre des formulaires de citation électronique avec un en-tête unique et multi-corps en Vue. Dans la gestion de l'entreprise moderne, le traitement électronique des formulaires de citation consiste à améliorer l'efficacité et ...

Pourquoi n'y a-t-il pas d'informations sur la demande de page sur le réseau de console après le saut Vue-Router? Pourquoi n'y a-t-il pas d'informations sur la demande de page sur le réseau de console après le saut Vue-Router? Apr 04, 2025 pm 05:27 PM

Pourquoi n'y a-t-il pas d'informations sur la demande de page sur le réseau de console après le saut Vue-Router? Lorsque vous utilisez Vue-Router pour la redirection de page, vous remarquerez peut-être un ...

Comment implémenter la fonction de téléchargement de photos des photographes élevés de différentes marques à l'avant? Comment implémenter la fonction de téléchargement de photos des photographes élevés de différentes marques à l'avant? Apr 04, 2025 pm 05:42 PM

Comment implémenter la fonction de téléchargement de photos de différentes marques de photographes élevés sur le frontal Lors du développement de projets frontaux, vous rencontrez souvent la nécessité d'intégrer des équipements matériels. pour...

Comment réaliser l'effet de segmentation avec une bordure de courbe de 45 degrés? Comment réaliser l'effet de segmentation avec une bordure de courbe de 45 degrés? Apr 04, 2025 pm 11:48 PM

Conseils pour implémenter les effets des segments dans la conception de l'interface utilisateur, le segmenter est un élément de navigation commun, en particulier dans les applications mobiles et les pages Web réactives. ...

Les spécifications de dénomination JavaScript soulèvent-elles des problèmes de compatibilité dans Android WebView? Les spécifications de dénomination JavaScript soulèvent-elles des problèmes de compatibilité dans Android WebView? Apr 04, 2025 pm 07:15 PM

Spécification de dénomination JavaScript et Android ...

Comment s'assurer que le bas d'un objet 3D est fixé sur la carte à l'aide de Mapbox et Three.js dans Vue? Comment s'assurer que le bas d'un objet 3D est fixé sur la carte à l'aide de Mapbox et Three.js dans Vue? Apr 04, 2025 pm 06:42 PM

Comment utiliser Mapbox et Three.js dans Vue pour adapter des objets tridimensionnels pour cartographier les angles de visualisation. Lorsque vous utilisez VUE pour combiner Mapbox et Three.js, les objets tridimensionnels créés doivent ...

Comment utiliser EL-Table pour implémenter le groupe de table, glisser et déposer le tri dans Vue2? Comment utiliser EL-Table pour implémenter le groupe de table, glisser et déposer le tri dans Vue2? Apr 04, 2025 pm 07:54 PM

Implémentation du tri et du tri de groupe de table EL-Table Tri dans Vue2. L'utilisation de tables El-Table pour implémenter le tri et le tri de groupe dans VUE2 est une exigence commune. Supposons que nous ayons un ...

See all articles