Vue

1. Qu'est-ce que Vue

Vue est un framework JavaScript progressif

Vue est un framework JavaScript progressif qui peut être utilisé pour créer des interfaces utilisateur.
Vue est facile à apprendre, léger, efficace et flexible.
Vue adopte le modèle MVVM et réalise le développement de composants via des vues basées sur les données.
Vue dispose d'un écosystème riche, tel que Vue Router, Vuex, Vue CLI, etc.
Vue prend en charge le rendu côté serveur, TypeScript et d'autres fonctionnalités pour répondre aux différents besoins de développement.

Vue peut être utilisée pour créer des interfaces utilisateur

Vue est un framework progressif pour la création d'interfaces utilisateur. Il adopte le modèle MVVM, pilote les vues via les données et fournit des idées réactives et composées de composants, permettant aux développeurs de créer plus facilement des applications interactives.
Vue peut être utilisé pour créer des interfaces utilisateur. Il fournit une série d'instructions et de composants, notamment v-bind, v-model, v-if, v-for, etc., et prend également en charge les instructions et composants personnalisés. Grâce à ces instructions et composants, les développeurs peuvent créer rapidement différents types d'interfaces utilisateur, telles que des formulaires, des listes, une navigation, etc.

La bibliothèque principale de Vue se concentre uniquement sur la couche de vue - La bibliothèque principale de Vue se concentre uniquement sur la couche de vue, elle est donc facile à apprendre et à intégrer dans d'autres projets.

Vue utilise le DOM virtuel pour optimiser les performances et fournit un développement réactif et composant.
Vue prend en charge la syntaxe des modèles et la syntaxe JSX et peut être intégrée de manière transparente à d'autres bibliothèques et frameworks.

2. Caractéristiques de Vue

cadre progressif
Vue basée sur les données
Développement de composants
poids léger
facile à utiliser

3. La syntaxe de base de Vue

syntaxe du modèle

Expression d'interpolation : { { }}

<div>{
      
      {
      
       message }}</div>

Directive v-bind : lier les données aux attributs des éléments HTML
```
<img v-bind:src="imageSrc">
```
Directive v-if : rendu conditionnel des éléments en fonction de la valeur vraie ou fausse d'une expression
```
<div v-if="isShow">显示的内容</div>
```

Directive v-for : liste de rendu

<ul>
<li v-for="item in items">{
      
      {
      
       item }}</li>
</ul>

Directive v-on : événement de liaison

<button v-on:click="handleClick">点击</button>

Propriété calculée : calculée

<div>{
      
      {
      
       reversedMessage }}</div>
...
computed: {
      
      
  reversedMessage: function () {
      
      
    return this.message.split('').reverse().join('')
  }
}

Attribut d'écoute : regarder

watch: {
      
      
 message: function (newVal, oldVal) {
      
      
   console.log('message changed from', oldVal, 'to', newVal)
 }
}

Cycle de vie : créé, monté, mis à jour, détruit

created: function () {
      
      
console.log('组件实例创建完成')
},
mounted: function () {
      
      
console.log('组件挂载到DOM上')
},
updated: function () {
      
      
console.log('组件更新')
},
destroyed: function () {
      
      
console.log('组件销毁')
}

instruction

Directive v-bind : utilisée pour lier des valeurs d'attribut, telles que la liaison src, href, etc.
Directive v-model : utilisée pour implémenter la liaison bidirectionnelle des données de formulaire
Instruction v-if : utilisée pour juger s'il faut restituer les éléments selon les conditions
Directive v-for : utilisée pour boucler les éléments de rendu
Directive v-on : utilisée pour lier les écouteurs d'événements, tels que @click, @keyup, etc.
Commande v-show : utilisée pour déterminer s'il faut afficher les éléments en fonction des conditions
Directive v-text : utilisée pour définir le contenu textuel d'un élément à une valeur spécifiée
Directive v-html : utilisée pour définir le contenu HTML de l'élément à la valeur spécifiée
Instruction v-pre : utilisée pour ignorer le processus de compilation de l'élément spécifié et de ses sous-éléments, qui peuvent être utilisés pour optimiser les performances
Instruction v-cloak : utilisée pour empêcher le clignotement de la page, peut être utilisée conjointement avec CSS
Instruction v-once : utilisée pour restituer les éléments une seule fois, sans restituer à mesure que les données changent

Syntaxe du formulaire :

nom de la commande	décrire
liaison en V	pour lier les valeurs de propriété
modèle en V	Liaison bidirectionnelle pour les données de formulaire
v-si	Utilisé pour déterminer s'il faut restituer les éléments en fonction des conditions
v-pour	Utilisé pour parcourir les éléments
v-on	Utilisé pour lier les écouteurs d'événements
v-show	Utilisé pour déterminer s'il faut afficher les éléments en fonction des conditions
v-texte	Utilisé pour définir le contenu textuel d'un élément à une valeur spécifiée
v-html	Utilisé pour définir le contenu HTML d'un élément sur une valeur spécifiée
pour	Utilisé pour ignorer le processus de compilation de l'élément spécifié et de ses enfants
cape en V	Utilisé pour empêcher le scintillement des pages
v-une fois	Utilisé pour restituer l'élément une seule fois

Composants

Exemple 1:

<template>
<div>
  <h1>{
        
        {
        
        title}}</h1>
  <p>{
        
        {
        
        content}}</p>
</div>
</template>

<script>
export default {
        
        
data() {
        
        
  return {
        
        
    title: '这是标题',
    content: '这是内容'
  }
}
}
</script>

Exemple 2 :

<template>
 <div>
   <input v-model="message">
   <p>{
        
        {
        
        message}}</p>
 </div>
</template>

<script>
export default {
        
        
 data() {
        
        
   return {
        
        
     message: ''
   }
 }
}
</script>

cycle de vie

cycle de vie

Une instance Vue a un cycle de vie complet, c'est-à-dire une série de processus depuis le début de la création, l'initialisation des données, la compilation des modèles, le montage de Dom, le rendu, la mise à jour, la désinstallation, etc. Nous appelons cela le cycle de vie de Vue. . Les cycles de vie couramment utilisés sont les suivants :
1. beforeCreate : après l'initialisation de l'instance, avant l'appel de la configuration de l'observateur de données et de l'événement événement/observateur.
2. créé : appelé après la création de l'instance. Dans cette étape, l'instance a effectué les configurations suivantes : observateur de données, fonctionnement des attributs et des méthodes, rappel d'événement watch/event. Cependant, la phase de montage n'a pas encore commencé et la propriété $el n'est pas visible pour le moment.
3. beforeMount : appelé avant le début du montage : la fonction de rendu correspondante est appelée pour la première fois.
4. monté : el est remplacé par le vm.$el nouvellement créé, et ce hook est appelé après avoir été monté sur l'instance.
5. beforeUpdate : appelé lorsque les données sont mises à jour, avant que le DOM virtuel ne soit restitué et corrigé. D'autres changements d'état peuvent être effectués au sein de ce hook sans déclencher de passes de rendu supplémentaires.
6. mis à jour : ce hook sera appelé une fois que le DOM virtuel aura été restitué et corrigé en raison de modifications de données.
7. beforeDestroy : appelé avant la destruction de l'instance. A cette étape, l'instance est toujours entièrement disponible.
8. détruit : appelé après la destruction de l'instance. À ce stade, toutes les commandes ont été dissociées, tous les écouteurs d'événements ont été supprimés et toutes les instances enfants ont été détruites.

propriété calculée

<template>
  <div>
    <p>{
      
      {
      
       message }}</p>
    <p>{
      
      {
      
       reversedMessage }}</p>
  </div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      message: 'Hello World'
    }
  },
  computed: {
      
      
    reversedMessage() {
      
      
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

Ici, nous définissons une propriété calculée reverseMessage qui renvoie la chaîne inversée du message. Dans le modèle, nous pouvons utiliser reverseMessage directement sans écrire de code logique dans le modèle pour réaliser la fonction d'inversion de la chaîne. La valeur d'une propriété calculée est mise en cache et réévaluée uniquement lorsque la dépendance associée change.

Listener - Utilisation de base de Listener :

var vm = new Vue({
    
    
  data: {
    
    
    message: 'Hello'
  },
  watch: {
    
    
    message: function (newVal, oldVal) {
    
    
      console.log('newVal: ', newVal, ' oldVal: ', oldVal)
    }
  }
})

Surveillance approfondie :

var vm = new Vue({
      
      
  data: {
      
      
    obj: {
      
      
      a: 1
    }
  },
  watch: {
      
      
    'obj.a': function (newVal, oldVal) {
      
      
      console.log('newVal: ', newVal, ' oldVal: ', oldVal)
    }
  }
})

Exécutez immédiatement l'écouteur :

var vm = new Vue({
      
      
  data: {
      
      
    message: 'Hello'
  },
  watch: {
      
      
    message: {
      
      
      handler: function (newVal, oldVal) {
      
      
        console.log('newVal: ', newVal, ' oldVal: ', oldVal)
      },
      immediate: true
    }
  }
})

4. Utilisation avancée de Vue

directive personnalisée

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
      
      
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
      
      
  // 聚焦元素
  el.focus()
}
})

// 局部注册一个自定义指令
directives: {
      
      
focus: {
      
      
  // 指令的定义
  inserted: function (el) {
      
      
    el.focus()
  }
}
}

brancher

Plugins :
- Vue Router : le gestionnaire de routage officiel de Vue.js pour créer des applications d'une seule page.
- Vuex : La bibliothèque officielle de gestion d'état de Vue.js, utilisée pour gérer de manière centralisée l'état de tous les composants de l'application.
- Vue CLI : l'outil d'échafaudage officiel fourni par Vue.js pour créer rapidement des applications Vue.js.
- Vue Test Utils : bibliothèque d'outils de test officielle de Vue.js pour l'écriture de tests unitaires et de tests d'intégration.
- Element UI : un ensemble de bibliothèques de composants basées sur Vue.js qui fournissent des composants d'interface utilisateur riches et des effets interactifs.
- Vue-i18n : Le plug-in d'internationalisation officiel fourni par Vue.js, qui est utilisé pour réaliser le support multilingue de l'application.
- Vue-meta : Un plug-in officiellement fourni par Vue.js pour gérer les méta-informations de page, qui peut facilement définir le titre de la page, les mots-clés, la description et d'autres informations.
- Vue-lazyload : Un plugin pour le chargement paresseux d'images, qui peut améliorer la vitesse de chargement des pages et l'expérience utilisateur.
- Vue-axios : Un plugin officiellement recommandé par Vue.js pour lancer des requêtes HTTP, qui peut facilement interagir avec l'API backend.
- Vue-socket.io : Un plug-in pour la communication WebSocket, qui peut réaliser une communication et une interaction de données en temps réel.

mélanger

mélanger

Les mixins sont un moyen de fonctionnalités réutilisables fournies par Vue, qui nous permettent de combiner un ensemble d'options de composants en un seul objet, qui peut ensuite être utilisé comme options dans plusieurs composants. Cela nous permet de partager les mêmes options sur plusieurs composants, évitant ainsi la duplication de code.
```
// 定义一个mixin对象
const myMixin = {
      
      
  created() {
      
      
    console.log('mixin created')
  },
  methods: {
      
      
    foo() {
      
      
      console.log('mixin foo')
    }
  }
}

// 在组件中使用mixin
export default {
      
      
  mixins: [myMixin],
  created() {
      
      
    console.log('component created')
  },
  methods: {
      
      
    bar() {
      
      
      console.log('component bar')
    }
  }
}
```
Dans l'exemple ci-dessus, nous avons défini un objet mixin nommé myMixin, qui contient une fonction hook créée et une méthode nommée foo. Ensuite, nous utilisons l'option mixins dans le composant pour mélanger myMixin dans le composant. Enfin, le composant contient les options définies dans myMixin, tout en conservant les propres options du composant.

Lorsque le composant et le mixin contiennent les mêmes options, les options du composant remplaceront les options du mixin. Si nous voulons appeler la méthode dans le mixin dans le composant, nous pouvons utiliser $emit pour déclencher la méthode dans le mixin.
```
export default {
      
      
  mixins: [myMixin],
  created() {
      
      
    this.$emit('foo')
  }
}
```

Transitions et animations

Utilisation de base de la transition Vue

<transition>
<p v-if="show">hello</p>
</transition>

Noms de classe CSS pour les transitions Vue

<transition name="fade">
 <p v-if="show">hello</p>
</transition>

Fonction de hook JS pour la transition Vue

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
>
  <p v-if="show">hello</p>
</transition>

Utilisation de base de l'animation Vue

<transition name="fade" mode="out-in">
 <p :key="message">{
      
      {
      
       message }}</p>
</transition>

Fonction de hook JS pour l'animation Vue

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
>
 <p :key="message">{
      
      {
      
       message }}</p>
</transition>

Animation d'éléments multiples pour l'animation Vue

<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item">{
      
      {
      
       item }}</li>
</transition-group>

Noms de classe CSS personnalisés pour les animations Vue

<transition
 name="fade"
 enter-active-class="animated fadeIn"
 leave-active-class="animated fadeOut"
>
 <p v-if="show">hello</p>
</transition>

Fonction de hook JS personnalisée pour l'animation Vue

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <p v-if="show">hello</p>
</transition>

routage

Exemple d'utilisation de base du routage :

// 安装路由
npm install vue-router --save

// 引入路由
import VueRouter from 'vue-router'

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      component: Home
    },
    {
    
    
      path: '/about',
      component: About
    }
  ]
})

// 注册路由
new Vue({
    
    
  router,
  render: h => h(App)
}).$mount('#app')

Exemple d'utilisation de l'imbrication de routes :

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      component: Home,
      children: [
        {
    
    
          path: 'child',
          component: Child
        }
      ]
    }
  ]
})

Exemple d'utilisation du routage dynamique :

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user/:id',
      component: User
    }
  ]
})

// 跳转路由
this.$router.push('/user/123')

Exemple d'utilisation d'une route nommée :

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/',
      component: Home,
      name: 'home'
    }
  ]
})

// 跳转路由
this.$router.push({
    
     name: 'home' })

Exemple d'utilisation des paramètres d'itinéraire :

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user/:id',
      component: User
    }
  ]
})

// 跳转路由
this.$router.push({
    
     path: '/user/123', query: {
    
     name: '张三' } })

// 接收参数
this.$route.params.id // 123
this.$route.query.name // 张三

Exemple de chargement paresseux d'itinéraires :

// 配置路由
const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user',
      component: () => import('./User.vue')
    }
  ]
})

Exemple d'utilisation d'un garde-route :

// 全局前置守卫
router.beforeEach((to, from, next) => {
    
    
  // 判断是否登录
  if (to.path !== '/login' && !isLogin) {
    
    
    next('/login')
  } else {
    
    
    next()
  }
})

// 全局后置守卫
router.afterEach((to, from) => {
    
    
  // 统计PV
  pv++
})

Gestion de l'état Vuex - Gestion de l'état Vuex

Vuex est la bibliothèque officielle de gestion d'état de Vue permettant de gérer l'état de tous les composants de l'application. Il centralise l'état de l'application en un seul endroit, ce qui facilite le suivi et le débogage des changements d'état. Voici un exemple simple de gestion d'état Vuex :

// 定义一个Vuex store
const store = new Vuex.Store({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    increment(state) {
    
    
      state.count++
    }
  },
  actions: {
    
    
    incrementAsync({
     
      commit }) {
    
    
      setTimeout(() => {
    
    
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    
    
    doubleCount(state) {
    
    
      return state.count * 2
    }
  }
})

// 在Vue组件中使用Vuex
<template>
  <div>
    <p>Count: {
    
    {
    
     count }}</p>
    <p>Double count: {
    
    {
    
     doubleCount }}</p>
    <button @click="incrementCount">Increment count</button>
  </div>
</template>

<script>
export default {
    
    
  computed: {
    
    
    count() {
    
    
      return this.$store.state.count
    },
    doubleCount() {
    
    
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    
    
    incrementCount() {
    
    
      this.$store.commit('increment')
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous avons défini un simple magasin Vuex avec un état countet une incrementmutation pour incrémenter countla valeur. Nous définissons également une incrementAsyncaction pour incrémenter countla valeur de manière asynchrone. Enfin, nous définissons un doubleCountgetter pour calculer countle double. Dans les composants Vue, nous utilisons computeddes propriétés pour obtenir la valeur de l'état et des getters, et utilisons methodsdes propriétés pour déclencher des mutations.

5. L'écosystème de Vue

Afficher la CLI

Vue CLI est un outil de ligne de commande officiellement fourni pour créer rapidement des projets Vue.js.
Cela peut nous aider à générer l'infrastructure du projet Vue, y compris la configuration du webpack, le routage, la gestion des états, etc.
Vue CLI fournit également une multitude de plug-ins et d'options prédéfinies, qui peuvent nous aider à intégrer facilement d'autres outils et bibliothèques, tels que Babel, TypeScript, ESLint, etc.
En plus de créer de nouveaux projets, Vue CLI peut également être utilisé pour gérer des projets Vue existants, en fournissant diverses commandes et options, telles que la construction, les tests, le déploiement, etc.
En général, Vue CLI est l'un des outils essentiels de l'écosystème Vue, qui peut grandement améliorer notre efficacité de développement.

Vue Router

Vue Router est le gestionnaire de routage officiel de Vue.js. Il est profondément intégré au cœur de Vue.js, ce qui facilite la création d'applications d'une seule page. Il peut rapidement vous aider à créer une application d'une seule page et, basé sur l'API officielle de Vue.js, il vous permet de configurer le routage de manière très pratique.
Vue Router prend en charge l'imbrication de routage et le chargement paresseux des composants, ainsi qu'une variété de hooks de navigation, vous permettant de mieux contrôler les sauts de routage.

Vuex

Bibliothèque de gestion d'état Vuex
- Documentation officielle : https://vuex.vuejs.org/
- Tutoriel de démarrage de Vuex : https://www.runoob.com/w3cnote/vuex-learn.html
- Combat Vuex : https://juejin.im/post/5c9f5b9e6fb9a05e3c6fdafe
Bibliothèque d'assistance Vuex
- Vuex-persistedstate：https://www.npmjs.com/package/vuex-persistedstate
- Vuex-router-sync：https://www.npmjs.com/package/vuex-router-sync
Cas Vuex
- Panier Vuex : https://github.com/bailicangdu/vue2-manage
- Plateforme de commerce électronique Vuex : https://github.com/one-pupil/Vue-Shop
- Lecteur de musique Vuex : https://github.com/uncleLian/vue-music

Vue Test Utils

Vue Test Utils est une bibliothèque d'utilitaires de tests unitaires officiellement fournie par Vue.js, qui peut nous aider à écrire et à exécuter des cas de test plus facilement et à améliorer la qualité et la stabilité de notre code.
Grâce à Vue Test Utils, nous pouvons simuler les comportements d'interaction des utilisateurs, tels que les clics, les entrées, etc., pour tester le comportement et l'état des composants.
Vue Test Utils fournit également des fonctions et des outils auxiliaires, tels que mount,shallowMount, etc., pour créer et rendre des instances de composants, ce qui nous permet de tester facilement.
En plus de Vue Test Utils, il existe également des bibliothèques d'outils de test tiers, telles que Jest, Mocha, etc., qui peuvent également être intégrées à Vue.js pour fournir une solution de test plus complète.

Interface utilisateur de l'élément

Element UI est une bibliothèque de composants de bureau basée sur Vue 2.0 qui fournit des composants riches et divers thèmes pour aider les développeurs à créer rapidement des interfaces belles et faciles à utiliser.
Exemple de code :

<template>
  <el-button>默认按钮</el-button>
</template>

<script>
import { ElButton } from 'element-ui'

export default {
  components: {
    ElButton
  }
}
</script>

Vuetifier

Vuetify est un framework d'interface utilisateur basé sur Vue.js qui fournit des composants et des styles riches pour aider les développeurs à créer rapidement de belles applications Web.
Vuetify suit entièrement la spécification Material Design et fournit un grand nombre de composants de style Material Design, tels que des boutons, des cartes, des formulaires, des boîtes de dialogue, etc.
Vuetify fournit également certains composants avancés, tels que des tableaux de données, des chronologies, des calendriers, des téléchargements de fichiers, etc., qui peuvent considérablement améliorer l'efficacité du développement.
Vuetify prend également en charge des thèmes personnalisés, qui peuvent facilement personnaliser l'apparence de l'application en fonction de vos propres besoins.
La documentation de Vuetify est très détaillée, fournissant des exemples riches et une documentation API que les développeurs peuvent apprendre et utiliser.

Ant Design Vue - Ant Design Vue : Ant Design Vue est une bibliothèque de composants d'interface utilisateur basée sur Vue.js développée par Ant Financial, qui fournit une série de composants d'interface utilisateur couramment utilisés, tels que des boutons, des formulaires, des formulaires, des fenêtres contextuelles, etc. ., qui peut aider les développeurs à créer rapidement des applications Web belles et faciles à utiliser. Ant Design Vue fournit également de riches fonctions de personnalisation de thème, permettant aux développeurs de personnaliser les composants d'interface utilisateur qui répondent au style de leur propre marque en fonction de leurs propres besoins.

6. Avantages et inconvénients de Vue

6.1 Avantages

Framework progressif, facile à apprendre et à utiliser

Framework progressif : Vue est un framework progressif qui peut être introduit progressivement en fonction des exigences du projet au lieu d'introduire toutes les fonctions en même temps, améliorant ainsi la maintenabilité et l'évolutivité du projet.
Facile à apprendre et à utiliser : la syntaxe de Vue est simple et facile à comprendre, avec une documentation détaillée et facile à utiliser. C'est un framework très convivial pour les débutants.

Vue basée sur les données pour améliorer l'efficacité du développement

Vue basée sur les données pour améliorer l'efficacité du développement
- Exemple : Vue associe des données et des vues via la liaison de données. Il vous suffit de prêter attention aux changements de données et les vues seront automatiquement mises à jour, ce qui améliore considérablement l'efficacité du développement.

Développement basé sur des composants, facile à maintenir et à réutiliser

Développement basé sur les composants : Vue adopte une méthode de développement basée sur les composants pour diviser la page en plusieurs composants. Chaque composant se concentre uniquement sur sa propre logique et son propre style, ce qui améliore la lisibilité et la maintenabilité du code et facilite le développement de composants réutilisés.
Facile à maintenir et à réutiliser : Vue fournit une multitude d'API et de plug-ins, permettant aux développeurs de créer rapidement des composants et des modules réutilisables, tout en facilitant également la maintenance et les mises à niveau du projet.

Chargement léger et rapide - Léger : Vue.js se concentre uniquement sur la couche de vue, il s'agit donc d'un framework léger. Il est moins volumineux qu'Angular car il utilise un DOM virtuel, qui restitue les vues rapidement et améliore les performances.

Chargement rapide : la taille du fichier de Vue.js n'est que d'environ 20 Ko, il se charge et s'exécute donc rapidement. Cela rend Vue.js idéal pour créer des applications monopage (SPA).

6.2 Inconvénients

pas convivial pour le référencement

pas convivial pour le référencement

Étant donné que Vue est rendu côté client et que les robots des moteurs de recherche explorent uniquement le HTML, le référencement de Vue n'est pas aussi bon que celui des sites Web rendus côté serveur, et un traitement supplémentaire est nécessaire pour améliorer l'effet référencement.

Par rapport à React, l'écosystème n'est pas parfait

Par rapport à React, l'écosystème n'est pas parfait : l'écosystème de Vue n'est pas parfait par rapport à React, il peut donc y avoir quelques inconvénients sous certains aspects. Par exemple, dans React, il existe de nombreuses bibliothèques tierces matures qui peuvent être utilisées, tandis que Vue dispose de relativement peu de bibliothèques tierces, ce qui oblige les développeurs à trouver des solutions ou à écrire du code pour les implémenter eux-mêmes.

Pour les applications volumineuses, des outils de gestion d'état supplémentaires sont requis - Pour les applications volumineuses, des outils de gestion d'état supplémentaires sont requis :

Par exemple, Vuex est une bibliothèque de gestion d'état développée spécifiquement pour les applications Vue.js. Lorsque l'application devient très volumineuse et complexe, Vue.js peut ne pas suffire à gérer tout l'état. Dans ce cas, vous pouvez utiliser Vuex pour gérer l'état de votre application.

Tutoriel vue front-end (version détaillée)

Vue