🎜 —🎜🎜serverPrefetch🎜 🎜L'instance du composant est appelée avant d'être rendue sur le serveur🎜🎜🎜🎜Cycle de vie des composants parent-enfant :
-
Chargement de la phase de rendu : parent avantCréation -> parent créé -> parent avantMontage -> ; enfant avantMontage -> enfant monté -> parent monté加载渲染阶段：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
-
更新阶段：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
-
销毁阶段：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
Vue.$nextTick
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
nextTick 是 Vue 提供的一个全局 API，由于 Vue 的异步更新策略，导致我们对数据修改后不会直接体现在 DOM 上，此时如果想要立即获取更新后的 DOM 状态，就需要借助该方法。
Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue 将开启一个异步更新队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入队列一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的 DOM 操作完成后才调用。
使用场景：
Vue 实例挂载过程中发生了什么？
挂载过程指的是 app.mount()过程，这是一个初始化过程，整体上做了两件事情：初始化和建立更新机制。
初始化会创建组件实例、初始化组件状态、创建各种响应式数据。
建立更新机制这一步会立即执行一次组件的更新函数，这会首次执行组件渲染函数并执行patch将vnode 转换为 dom； 同时首次执行渲染函数会创建它内部响应式数据和组件更新函数之间的依赖关系，这使得以后数据发生变化时会执行对应的更新函数。
Vue 的模版编译原理
Vue 中有个独特的编译器模块，称为compiler，它的主要作用是将用户编写的template编译为js中可执行的render函数。
在Vue 中，编译器会先对template进行解析，这一步称为parse，结束之后得到一个JS对象，称之为抽象语法树AST；然后是对AST进行深加工的转换过程，这一步称为transform，最后将前面得到的AST生成JS代码，也就是render函数。
Vue 的响应式原理
-
Vue 2 中的数据响应式会根据数据类型做不同的处理。如果是对象，则通过Object.defineProperty(obj,key,descriptor)拦截对象属性访问，当数据被访问或改变时，感知并作出反应；如果是数组，则通过覆盖数组原型的方法，扩展它的7个变更方法（push、pop、shift、unshift、splice、sort、reverse），使这些方法可以额外的做更新通知，从而做出响应。
缺点：
- 初始化时的递归遍历会造成性能损失；
- 通知更新过程需要维护大量
dep 实例和 watcher 实例，额外占用内存较多；
- 新增或删除对象属性无法拦截，需要通过
Vue.set 及 delete 这样的 API 才能生效；
- 对于
ES6中新产生的Map、Set这些数据结构不支持。
-
Vue 3 中利用ES6的Proxy
Phase de mise à jour : parent avantMise à jour ->enfant mis à jour -> /code > : parent beforeDestroy -> enfant beforeDestroy -> enfant détruit -> Le cycle de mise à jour du DOM se termine par le rappel différé. Utilisez cette méthode immédiatement après avoir modifié les données pour obtenir le DOM mis à jour.
nextTick est une API globale fournie par Vue En raison de la stratégie de mise à jour asynchrone de Vue, nos modifications de données ne seront pas directement reflétées dans le DOM pour le moment, si nous souhaitons obtenir les données mises à jour. immédiatement l'état DOM, vous devez utiliser cette méthode. Vue s'exécute de manière asynchrone lors de la mise à jour du DOM. Lorsque les données changent, Vue ouvrira une file d'attente de mise à jour asynchrone et mettra en mémoire tampon toutes les modifications de données qui se produisent dans la même boucle d'événements. Si le même watcher est déclenché plusieurs fois, il ne sera placé dans la file d'attente qu'une seule fois. Cette déduplication lors de la mise en mémoire tampon est importante pour éviter les calculs et opérations DOM inutiles. La méthode nextTick ajoute une fonction de rappel à la file d'attente pour garantir que la fonction n'est appelée qu'une fois l'opération DOM précédente terminée.
Scénarios d'utilisation : -
Si vous souhaitez obtenir la structure DOM mise à jour immédiatement après avoir modifié les données, vous pouvez utiliser Vue.nextTick()🎜🎜🎜🎜 dans Que se passe-t-il lors de l'opération DOM pendant le cycle de vie de la création🎜🎜🎜🎜Montage de l'instance Vue ? 🎜🎜🎜Le processus de montage fait référence au processus app.mount(). Il s'agit d'un processus d'initialisation. Il fait deux choses dans son ensemble : Initialisation et Établissement. Mécanisme de mise à jour. 🎜🎜L'initialisation créera des instances de composants, initialisera les états des composants et créera diverses données réactives. 🎜🎜L'établissement du mécanisme de mise à jour exécutera immédiatement la fonction de mise à jour du composant. Cela exécutera la fonction de rendu du composant pour la première fois et exécutera patch pour convertir vnode en . >dom code>; Dans le même temps, l'exécution de la fonction de rendu pour la première fois créera une dépendance entre ses données réactives internes et la fonction de mise à jour du composant, de sorte que la fonction de mise à jour correspondante sera exécutée lorsque les données changeront dans le avenir. 🎜<h3 data-id="heading-6">🎜Principe de compilation des modèles de Vue🎜🎜🎜Vue possède un module de compilateur unique appelé <code>compilateur. Sa fonction principale est de convertir les utilisateurs en modèle écrit. est compilé dans une fonction exécutable render dans js. 🎜Dans Vue, le compilateur analysera d'abord le template. Cette étape est appelée parse. Une fois terminé, un objet JS sera obtenu, appelé arbre de syntaxe abstraite. AST; puis il y a le processus de conversion de traitement profond de AST. Cette étape est appelée transformation, et enfin le AST. obtenu précédemment est le code JS généré, c'est-à-dire la fonction render. 🎜🎜Principe de réactivité de Vue🎜🎜🎜🎜🎜La réactivité des données dans Vue 2 sera traitée différemment selon le type de données. S'il s'agit d'un objet, interceptez l'accès aux propriétés de l'objet via Object.defineProperty(obj,key,descriptor) Lorsque les données sont consultées ou modifiées, détectez et réagissez s'il s'agit d'un tableau, écrasez le tableau. prototype., étendant ses sept méthodes de modification (push, pop, shift, unshift, splice, sort, reverse) afin que ces méthodes puissent également effectuer des notifications de mise à jour et répondre. 🎜Inconvénients : 🎜🎜🎜Le parcours récursif lors de l'initialisation entraînera une perte de performances ; 🎜🎜Le processus de mise à jour des notifications nécessite de maintenir un grand nombre d'instances dep et d'instances watcher, ce qui prend beaucoup de temps. beaucoup de mémoire supplémentaire ; 🎜🎜Les propriétés d'objet ajoutées ou supprimées ne peuvent pas être interceptées et doivent être prises en compte via des API telles que Vue.set et delete ; ES6 Les structures de données Map et Set nouvellement générées ne sont pas prises en charge. 🎜🎜🎜🎜🎜Vue 3 utilise le mécanisme Proxy de ES6 pour proxy les données qui doivent être réactives. Il peut prendre en charge des objets et des tableaux en même temps. Les ajouts et suppressions d'attributs dynamiques peuvent être interceptés. Toutes les nouvelles structures de données sont prises en charge. Les attributs imbriqués d'objets sont récursifs au moment de l'exécution et sont proxy uniquement lorsqu'ils sont utilisés. nombre de dépendances, et les performances ont été grandement améliorées. 🎜🎜🎜🎜🎜Virtual DOM🎜🎜🎜🎜🎜Concept : 🎜Virtual DOM, comme son nom l'indique, est un objet DOM virtuel. Il s'agit lui-même d'un objet JS, mais il décrit une structure de vue à travers différents attributs. 🎜
Avantages du DOM virtuel :
(1) Amélioration des performances
Il existe des limites à l'exploitation directe du DOM. Il existe de nombreux attributs sur un élément réel. Si vous l'exploitez directement, de nombreux contenus d'attributs supplémentaires seront exploités en même temps. Ce n'est pas nécessaire. Si ces opérations sont transférées vers des objets JS, ce sera beaucoup plus simple. De plus, l'exploitation du DOM est relativement coûteuse et des opérations fréquentes du DOM peuvent facilement entraîner un redessinage et une redistribution des pages. Si le traitement intermédiaire est effectué via un VNode abstrait, le nombre d'opérations DOM directes peut être efficacement réduit, réduisant ainsi le redessinage et la redistribution des pages.
(2) Pratique pour une implémentation multiplateforme
Le même nœud VNode peut être rendu dans le contenu correspondant sur différentes plates-formes. Par exemple : lorsqu'il est rendu dans le navigateur, il s'agit d'un nœud d'élément DOM, et lorsqu'il est rendu en natif (iOS, Android. ) il devient le contrôle correspondant. Vue 3 permet aux développeurs d'implémenter des moteurs de rendu personnalisés basés sur VNode pour faciliter le rendu pour différentes plates-formes.
Structure :
Il n'existe pas de norme unifiée, incluant généralement tag, props et children. tag、props、children三项。
tag：必选。就是标签，也可以是组件，或者函数。
props：非必选。就是这个标签上的属性和方法。
children：非必选。就是这个标签的内容或者子节点。如果是文本节点就是字符串；如果有子节点就是数组。换句话说，如果判断children是字符串的话，就表示一定是文本节点，这个节点肯定没有子元素。
diff 算法
1、概念：
diff算法是一种对比算法，通过对比旧的虚拟DOM和新的虚拟DOM，得出是哪个虚拟节点发生了改变，找出这个虚拟节点并只更新这个虚拟节点所对应的真实节点，而不用更新其他未发生改变的节点，实现精准地更新真实DOM，进而提高效率。
2、对比方式：
diff算法的整体策略是：深度优先，同层比较。比较只会在同层级进行, 不会跨层级比较；比较的过程中，循环从两边向中间收拢。
- 首先判断两个节点的
tag是否相同，不同则删除该节点重新创建节点进行替换。
-
tag相同时，先替换属性，然后对比子元素，分为以下几种情况：
- 新旧节点都有子元素时，采用双指针方式进行对比。新旧头尾指针进行比较，循环向中间靠拢，根据情况调用
patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode节点再分情况操作。
- 新节点有子元素，旧节点没有子元素，则将子元素虚拟节点转化成真实节点插入即可。
- 新节点没有子元素，旧节点有子元素，则清空子元素，并设置为新节点的文本内容。
- 新旧节点都没有子元素时，即都为文本节点，则直接对比文本内容，不同则更新。
Vue中key的作用？
key的作用主要是为了更加高效的更新虚拟 DOM。
Vue 判断两个节点是否相同时，主要是判断两者的key和元素类型tag。因此，如果不设置key，它的值就是 undefined，则可能永远认为这是两个相同的节点，只能去做更新操作，将造成大量的 DOM 更新操作。
为什么组件中的 data 是一个函数？
在 new Vue() 中，可以是函数也可以是对象，因为根实例只有一个，不会产生数据污染。
在组件中，data 必须为函数，目的是为了防止多个组件实例对象之间共用一个 data，产生数据污染；而采用函数的形式，initData 时会将其作为工厂函数都会返回全新的 data 对象。
Vue 中组件间的通信方式？
-
父子组件通信：
父向子传递数据是通过props，子向父是通过$emit触发事件；通过父链/子链也可以通信（$parent/$children）；ref也可以访问组件实例；provide/inject；$attrs/$listeners。
-
兄弟组件通信：
全局事件总线EventBus、Vuex。
-
跨层级组件通信：
全局事件总线EventBus、Vuex、provide/injectbalise : obligatoire. C'est une étiquette, ou cela peut être un composant ou une fonction.
props : facultatif. Ce sont les propriétés et les méthodes sur cette étiquette. 🎜enfants : facultatif. Il s'agit du contenu ou des nœuds enfants de cette balise. S'il s'agit d'un nœud de texte, c'est une chaîne ; s'il a des nœuds enfants, c'est un tableau. En d'autres termes, si children est déterminé comme étant une chaîne, cela signifie qu'il doit s'agir d'un nœud de texte et que ce nœud ne doit avoir aucun élément enfant. 🎜🎜🎜
algorithme diff
🎜1 Concept : 🎜🎜l'algorithme diff est un. Un algorithme de comparaison, en comparant l'ancien DOM virtuel et le nouveau DOM virtuel, nous pouvons découvrir quel nœud virtuel a changé, trouver ce nœud virtuel et mettre à jour uniquement le nœud réel correspondant à ce nœud virtuel, sans mettre à jour les autres nœuds inchangés vers. mettre à jour avec précision le vrai DOM, améliorant ainsi l'efficacité. 🎜🎜🎜2. Méthode de comparaison : 🎜🎜La stratégie globale de l'algorithme diff est : profondeur d'abord, comparaison de même niveau. Les comparaisons ne seront effectuées qu'au même niveau et ne seront pas comparées entre les niveaux ; pendant le processus de comparaison, la boucle se rétrécira des deux côtés vers le milieu. 🎜🎜Déterminez d'abord si le tag des deux nœuds est le même. S'ils sont différents, supprimez le nœud et créez un nouveau nœud pour le remplacer. 🎜🎜Lorsque tag est identique, remplacez d'abord les attributs, puis comparez les sous-éléments, qui sont répartis dans les situations suivantes : 🎜Lorsque l'ancien et le nouveau nœuds ont des sous-éléments , des pointeurs doubles sont utilisés à des fins de comparaison. Comparez les anciens et les nouveaux pointeurs de tête et de queue, bouclez plus près du milieu, appelez patchVnode en fonction de la situation pour répéter le processus de patch, appelez createElem code> pour créer un nouveau nœud, à partir de La table de hachage recherche les nœuds <code>VNode avec la même clé et opère ensuite en fonction de la situation. 🎜🎜Si le nouveau nœud a des éléments enfants et que l'ancien nœud n'a pas d'éléments enfants, convertissez simplement le nœud virtuel de l'élément enfant en un nœud réel et insérez-le. 🎜🎜Si le nouveau nœud n'a aucun élément enfant et que l'ancien nœud a des éléments enfants, les éléments enfants seront effacés et définis sur le contenu texte du nouveau nœud. 🎜🎜Lorsque l'ancien et le nouveau nœuds n'ont pas d'éléments enfants, c'est-à-dire qu'ils sont tous deux des nœuds de texte, le contenu du texte sera comparé directement et s'ils sont différents, ils seront mis à jour. 🎜
🎜
Quel est le rôle de la clé dans Vue ?
🎜La fonction principale de key est de mettre à jour le DOM virtuel plus efficacement. 🎜🎜Lorsque Vue détermine si deux nœuds sont identiques, il détermine principalement leur key et leur balise de type d'élément. Par conséquent, si key n'est pas défini et que sa valeur n'est pas définie, on peut toujours considérer qu'il s'agit de deux nœuds identiques et qu'ils ne peuvent qu'être mis à jour, ce qui entraînera un grand nombre d'opérations de mise à jour du DOM. 🎜Pourquoi les données du composant sont-elles une fonction ?
🎜Dans new Vue(), il peut s'agir d'une fonction ou d'un objet, car il n'y a qu'une seule instance racine et aucune pollution des données ne se produira. 🎜🎜Dans les composants, les données doivent être une fonction.Le but est d'empêcher plusieurs objets d'instance de composants de partager les mêmes données et de provoquer une pollution des données. Sous la forme d'une fonction, lorsque initData est utilisé, il sera utilisé comme fonction d'usine. et un nouvel objet de données sera renvoyé. 🎜Comment communiquer entre les composants dans Vue ?
🎜🎜Communication entre les composants parent et enfant : 🎜🎜Le parent transmet les données à l'enfant via props , et l'enfant transmet les données au parent. L'événement est déclenché via $emit ; il peut également communiquer via la chaîne parent/enfant ($parent/$; children); refVous pouvez également accéder aux instances de composants ; <code>provide/inject ; $auditeurs. 🎜🎜🎜🎜Communication des composants frères : 🎜🎜Global event bus EventBus, Vuex. 🎜🎜🎜🎜Communication des composants inter-niveaux : 🎜🎜Bus d'événements global EventBus, Vuex, provide/inject . 🎜
Quelle est la différence entre v-show et v-if ?
Différentes méthodes de contrôle. v-show ajoute l'attribut CSS display: none à l'élément, mais l'élément existe toujours et v-if contrôle l'affichage ou le masquage ; de l’élément. Ajoutez ou supprimez entièrement des éléments. v-show是通过给元素添加 css 属性display: none，但元素仍然存在；而v-if控制元素显示或隐藏是将元素整个添加或删除。
编译过程不同。v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件；v-show只是简单的基于 css 切换。
编译条件不同。v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，渲染条件为假时，并不做操作，直到为真才渲染。
触发生命周期不同。v-show由 false 变为 true 的时候不会触发组件的生命周期；v-if由 false 变为 true 的时候，触发组件的beforeCreate、created、beforeMount、mounted钩子，由 true 变为 false 的时候触发组件的beforeDestory、destoryed钩子。
性能消耗不同。v-if有更高的切换消耗；v-show有更高的初始渲染消耗。
使用场景：
如果需要非常频繁地切换，则使用v-show较好，如：手风琴菜单，tab 页签等；
如果在运行时条件很少改变，则使用v-if较好，如：用户登录之后，根据权限不同来显示不同的内容。
computed 和 watch 的区别？
-
computed计算属性，依赖其它属性计算值，内部任一依赖项的变化都会重新执行该函数，计算属性有缓存，多次重复使用计算属性时会从缓存中获取返回值，计算属性必须要有return关键词。
-
watch侦听到某一数据的变化从而触发函数。当数据为对象类型时，对象中的属性值变化时需要使用深度侦听deep属性，也可在页面第一次加载时使用立即侦听immdiate属性。
运用场景：
计算属性一般用在模板渲染中，某个值是依赖其它响应对象甚至是计算属性而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。
v-if 和 v-for 为什么不建议放在一起使用？
Vue 2 中，v-for的优先级比v-if高，这意味着v-if将分别重复运行于每一个v-for循环中。如果要遍历的数组很大，而真正要展示的数据很少时，将造成很大的性能浪费。
Vue 3 中，则完全相反，v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，会导致异常。
通常有两种情况导致要这样做：
- 为了过滤列表中的项目，比如：
v-for = "user in users" v-if = "user.active"。这种情况，可以定义一个计算属性，让其返回过滤后的列表即可。
- 为了避免渲染本该被隐藏的列表，比如
v-for = "user in users" v-if = "showUsersFlag"。这种情况，可以将v-if移至容器元素上或在外面包一层template即可。
$set
可手动添加响应式数据，解决数据变化视图未更新问题。当在项目中直接设置数组的某一项的值，或者直接设置对象的某个属性值，会发现页面并没有更新。这是因为Object.defineProperty()的限制，监听不到数据变化，可通过this.$set(数组或对象，数组下标或对象的属性名，更新后的值)
🎜🎜Le processus de compilation est différent. La commutation v-if a un processus de compilation/désinstallation partielle. Pendant le processus de commutation, les écouteurs d'événements internes et les sous-composants sont correctement détruits et reconstruits ; v-show est simplement basé ; sur le commutateur CSS. 🎜🎜🎜🎜Les conditions de compilation sont différentes. v-if est un vrai rendu conditionnel. Il garantira que les écouteurs d'événements et les sous-composants du bloc conditionnel sont correctement détruits et reconstruits pendant le processus de commutation. Lorsque la condition de rendu est fausse, aucune opération n'est effectuée. 't rendu jusqu'à ce que ce soit vrai. 🎜🎜🎜🎜Le cycle de vie du déclencheur est différent. Lorsque v-show passe de faux à vrai, le cycle de vie du composant ne sera pas déclenché ; lorsque v-if passe de faux à vrai, le beforeCreate du composant le sera. être déclenchés , created, beforeMount, mount déclenchent le beforeDestorydu composant lors du changement de. vrai à faux >, crochet détruit. 🎜🎜🎜🎜La consommation de performance est différente. v-if a un coût de commutation plus élevé ; v-show a un coût de rendu initial plus élevé. 🎜🎜🎜🎜Scénarios d'utilisation :
Si vous devez changer très fréquemment, il est préférable d'utiliser v-show, tel que : menu accordéon, page à onglet, etc. ;
Si les conditions changent rarement pendant l'exécution, il est préférable d'utiliser v-if. Par exemple, une fois l'utilisateur connecté, différents contenus seront affichés en fonction de différentes autorisations. 🎜🎜Quelle est la différence entre calculé et montre ? 🎜🎜🎜calculéLes propriétés calculées s'appuient sur d'autres propriétés pour calculer les valeurs. Les modifications dans les dépendances internes réexécuteront la fonction. Lorsque les propriétés calculées sont réutilisées plusieurs fois, la fonction sera réexécutée. Pour obtenir la valeur de retour du cache, l'attribut calculé doit avoir le mot-clé return. 🎜🎜watch écoute les changements de certaines données et déclenche la fonction. Lorsque les données sont de type objet, vous devez utiliser l'attribut d'écoute profonde deep lorsque la valeur de l'attribut dans l'objet change. Vous pouvez également utiliser l'écoute immédiate immdiate lorsque la page. est la première propriété chargée. 🎜🎜🎜Scénarios d'application :
Les propriétés calculées sont généralement utilisées dans le rendu des modèles. Une certaine valeur dépend d'autres objets de réponse ou même de propriétés calculées, tandis que les propriétés d'écoute conviennent pour observer les changements d'une certaine valeur afin de compléter une logique métier complexe ; . 🎜🎜Pourquoi il n'est pas recommandé d'utiliser v-if et v-for ensemble ? 🎜🎜🎜Dans Vue 2, v-for a une priorité plus élevée que v-if, ce qui signifie que v-if sera exécuté à plusieurs reprises . dans chaque boucle v-for. Si le tableau à parcourir est grand et que les données réelles à afficher sont très petites, cela entraînera un énorme gaspillage de performances. 🎜🎜Dans Vue 3, c'est exactement le contraire. v-if a une priorité plus élevée que v-for, donc quand v-if est exécuté, la variable qu'elle appelle n'existe pas encore, provoquant une exception. 🎜🎜Il y a généralement deux situations qui conduisent à faire cela : 🎜🎜Pour filtrer les éléments de la liste, comme : v-for = "user in users" v-if = "user.active". Dans ce cas, vous pouvez définir une propriété calculée et la laisser renvoyer la liste filtrée. 🎜🎜Pour éviter de rendre des listes qui doivent être masquées, telles que v-for = "user in users" v-if = "showUsersFlag". Dans ce cas, vous pouvez déplacer v-if vers l'élément conteneur ou l'envelopper avec une couche de template. 🎜🎜🎜$set🎜🎜🎜Vous pouvez ajouter manuellement des données réactives pour résoudre le problème de la non-mise à jour de la vue de modification des données. Lorsque vous définissez directement la valeur d'un élément dans le tableau ou définissez directement la valeur d'une propriété de l'objet dans le projet, vous constaterez que la page n'est pas mise à jour. Cela est dû aux limitations de Object.defineProperty(), qui ne peut pas surveiller les modifications des données. Vous pouvez utiliser this.$set(array or object, array subscript or object property name, update value. )résolu. 🎜Qu'est-ce que le maintien en vie ?
- Fonction : implémentez la mise en cache des composants, maintenez l'état des composants et évitez les problèmes de performances causés par un rendu répété.
- Principe de fonctionnement : Vue.js résume en interne les nœuds DOM en nœuds VNode individuels. Le cache du composant
keep-alive est également basé sur les nœuds VNode. Il met en cache les composants qui remplissent les conditions dans l'objet de cache, puis retire le nœud VNode de l'objet de cache et le restitue lors du nouveau rendu. keep-alive组件的缓存也是基于 VNode 节点的。它将满足条件的组件在 cache 对象中缓存起来，重新渲染的时候再将 VNode 节点从 cache 对象中取出并渲染。
- 可以设置以下属性：
① include：字符串或正则，只有名称匹配的组件会被缓存。
② exclude：字符串或正则，任何名称匹配的组件都不会被缓存。
③ max：数字，最多可以缓存多少组件实例。
匹配首先检查组件的name选项，如果name选项不可用，则匹配它的局部注册名称（父组件 components选项的键值），匿名组件不能被匹配。
设置了keep-alive缓存的组件，会多出两个生命周期钩子：activated、deactivated。
首次进入组件时：beforeCreate --> created --> beforeMount --> mounted --> activated --> beforeUpdate --> updated --> deactivated
再次进入组件时：activated --> beforeUpdate --> updated --> deactivated
mixin
mixin（混入）， 它提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
使用场景： 不同组件中经常会用到一些相同或相似的代码，这些代码的功能相对独立。可以通过mixin 将相同或相似的代码提出来。
劣势：
插槽
slot插槽，一般在组件内部使用，封装组件时，在组件内部不确定该位置是以何种形式的元素展示时，可以通过slot占据这个位置，该位置的元素需要父组件以内容形式传递过来。slot分为：
-
默认插槽：子组件用<slot>标签来确定渲染的位置，标签里面可以放DOM结构作为后备内容，当父组件在使用的时候，可以直接在子组件的标签内写入内容，该部分内容将插入子组件的<slot>标签位置。如果父组件使用的时候没有往插槽传入内容，后备内容就会显示在页面。
-
具名插槽：子组件用name属性来表示插槽的名字，没有指定name的插槽，会有隐含的名称叫做 default。父组件中在使用时在默认插槽的基础上通过v-slot指令指定元素需要放在哪个插槽中，v-slot值为子组件插槽name属性值。使用v-slot指令指定元素放在哪个插槽中，必须配合<template>元素，且一个<template>元素只能对应一个预留的插槽，即不能多个<template> 元素都使用v-slot指令指定相同的插槽。v-slot的简写是#，例如v-slot:header可以简写为#header。
-
作用域插槽：子组件在<slot>标签上绑定props数据，以将子组件数据传给父组件使用。父组件获取插槽绑定 props 数据的方法：
scope="接收的变量名"：<template scope="接收的变量名">
slot-scope="接收的变量名"：<template slot-scope="接收的变量名">
-
v-slot:插槽名="接收的变量名"：<template v-slot:插槽名="接收的变量名">
Vous pouvez définir les attributs suivants :
① include : chaîne ou expression régulière, seuls les composants dont les noms correspondent seront mis en cache.
② exclude : chaîne ou expression régulière, tout composant avec un nom correspondant ne sera pas mis en cache.
③ max : Nombre, le nombre maximum d'instances de composants pouvant être mises en cache.
La correspondance vérifie d'abord l'option name du composant. Si l'option name n'est pas disponible, elle correspond ensuite à son nom d'enregistrement local (la valeur clé du parent. option composants du composant), le composant anonyme ne peut pas être mis en correspondance.
Les composants avec un cache keep-alive configuré auront deux hooks de cycle de vie supplémentaires : activé, désactivé.
Lors de la première saisie du composant : avantCréation --> créé --> avantMontage --> activé --> mis à jour --> br/> Encore une fois Lors de la saisie du composant : activé --> avant la mise à jour --> mis à jour --> désactivé
mixin
mixin (mélangé), il fournit un moyen très flexible de distribuer des fonctionnalités réutilisables dans les composants Vue.
Scénarios d'utilisation : des codes identiques ou similaires sont souvent utilisés dans différents composants, et les fonctions de ces codes sont relativement indépendantes. Le même code ou un code similaire peut être extrait via des mixins. 🎜🎜Inconvénients : 🎜🎜🎜La source des variables n'est pas claire🎜🎜🎜🎜Plusieurs mixins peuvent provoquer des conflits de noms (solution : l'API de combinaison de Vue 3)🎜🎜🎜 🎜 Il existe plusieurs paires de relations entre le mixin et les puits de composants, ce qui rend le projet plus complexe. 🎜🎜🎜🎜Slot🎜🎜🎜slot Le slot est généralement utilisé à l'intérieur du composant lors de l'encapsulation du composant, il n'est pas sûr que la position soit. à l'intérieur du composant. Lors de l'affichage d'éléments sous n'importe quelle forme, vous pouvez occuper cette position via slot. L'élément à cette position doit être transmis sous forme de contenu depuis le composant parent. slot est divisé en : 🎜🎜🎜Slot par défaut : les sous-composants utilisent la balise <slot> pour déterminer la position de rendu, et vous peut mettre La structure DOM sert de contenu de sauvegarde Lorsque le composant parent est utilisé, vous pouvez directement écrire du contenu dans la balise du composant enfant. Cette partie du contenu sera insérée dans le <slot> du code du composant enfant> position de l'étiquette. Si le composant parent ne transmet pas le contenu à l'emplacement lorsqu'il est utilisé, le contenu de sauvegarde sera affiché sur la page. 🎜🎜Named Slot : les sous-composants utilisent l'attribut name pour représenter le nom de l'emplacement qui ne spécifie pas name aura un nom implicite. est appelé par défaut. Lorsqu'elle est utilisée dans le composant parent, la directive v-slot est utilisée pour spécifier dans quel emplacement l'élément doit être placé en fonction de la valeur par défaut de v-slot. est l'emplacement inséré par le composant enfant. Valeur de l'attribut Slot name. Utilisez la directive v-slot pour spécifier dans quel emplacement l'élément est placé. Il doit correspondre à l'élément <template> et à un <template> Il ne peut correspondre qu'à un seul emplacement réservé, c'est-à-dire que plusieurs éléments <template> ne peuvent pas utiliser la directive v-slot pour spécifier le même emplacement. L'abréviation de v-slot est #. Par exemple, v-slot:header peut être abrégé en #header. 🎜🎜Scope Slot : le composant enfant lie les données props sur la balise <slot> pour transmettre les données du composant enfant à l'utilisation du composant parent. . Méthode permettant au composant parent d'obtenir les données des accessoires de liaison d'emplacement :
🎜🎜scope="received variable name":<template scope= "Received nom de la variable">🎜🎜🎜🎜 slot-scope="Nom de la variable reçue": <template slot-scope="Nom de la variable reçue">🎜 🎜🎜🎜v- slot: slot name="nom de la variable reçue": <template v-slot: slot name="nom de la variable reçue">🎜🎜🎜🎜🎜🎜 🎜Quels sont les modificateurs dans Vue ? 🎜🎜🎜Dans Vue, les modificateurs gèrent de nombreux détails des événements DOM, de sorte que nous n'avons plus besoin de passer beaucoup de temps à gérer ces choses gênantes et que nous pouvons avoir plus d'énergie pour nous concentrer sur le traitement logique du programme. Les modificateurs dans Vue sont divisés dans les types suivants : 🎜
Modificateur de formulaire
lazy Après avoir rempli les informations, la valeur ne sera attribuée à la valeur que lorsque le curseur quittera l'étiquette, c'est-à-dire que les informations seront synchronisées après le change événement. <code>lazy 填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步。
number 自动将用户输入值转化为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值。
trim 自动过滤用户输入的首尾空格，而中间的空格不会被过滤。
事件修饰符
stop 阻止了事件冒泡，相当于调用了event.stopPropagation方法。
prevent 阻止了事件的默认行为，相当于调用了event.preventDefault方法。
self 只当在 event.target 是当前元素自身时触发处理函数。
once 绑定了事件以后只能触发一次，第二次就不会触发。
capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理。
passive 告诉浏览器你不想阻止事件的默认行为。
native 让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件。
鼠标按键修饰符
left 左键点击。
right 右键点击。
middle 中键点击。
-
键值修饰符
键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，有如下：keyCode存在很多，但vue为我们提供了别名，分为以下两种：
- 普通键（enter、tab、delete、space、esc、up...）
- 系统修饰键（ctrl、alt、meta、shift...）
对 SPA 的理解？
概念：
SPA（Single-page application），即单页面应用，它是一种网络应用程序或网站的模型，通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换时打断用户体验。在SPA中，所有必要的代码（HTML、JavaScript 和 CSS）都通过单个页面的加载而检索，或者根据需要（通常是响应用户操作）动态装载适当的资源并添加到页面。页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。举个例子，就像一个杯子，上午装的是牛奶，中午装的是咖啡，下午装的是茶，变得始终是内容，杯子始终不变。
-
SPA与MPA的区别：
MPA（Muti-page application），即多页面应用。在MPAnumber convertit automatiquement la valeur saisie par l'utilisateur en un type numérique, mais si la valeur ne peut pas être analysée par parseFloat, la valeur d'origine sera renvoyée.
trim filtre automatiquement le premier et le dernier espaces saisis par l'utilisateur, mais les espaces du milieu ne seront pas filtrés.
Le modificateur d'événement
stop empêche l'événement de bouillonner, ce qui équivaut à appeler la méthode event.stopPropagation.
prevent empêche le comportement par défaut de l'événement, ce qui équivaut à appeler la méthode event.preventDefault. |
self La fonction de gestionnaire n'est déclenchée que lorsque event.target est l'élément actuel lui-même.
once Après avoir lié un événement, il ne peut être déclenché qu'une seule fois, et il ne sera pas déclenché la deuxième fois. |
capture utilise le mode de capture d'événements, c'est-à-dire que les événements déclenchés par l'élément lui-même sont d'abord traités ici, puis transmis aux éléments internes pour traitement.
passif indique au navigateur que vous ne souhaitez pas bloquer le comportement par défaut de l'événement. |
native permet au composant d'écouter les événements natifs de l'élément racine comme la balise intégrée html Sinon, en utilisant v-on. sur le composant n'écoutera que lui-même.
Modificateur du bouton de la souris
gauche Clic gauche. |
droit Clic droit.
milieu Clic du milieu. |
|
Modificateurs de valeur de cléLes modificateurs de clavier sont utilisés pour modifier les événements du clavier (onkeyup, onkeydown), comme suit : keyCode Il y en a beaucoup, mais vue nous fournit des alias, qui se répartissent selon les deux types suivants : | Touches communes (entrée, tabulation, supprimer, espace, esc, haut... )Touches de modification du système (ctrl, alt, méta, shift...)Compréhension du SPA ?
|
| Concept :
SPA (Single-page application), c'est-à-dire une application d'une seule page, qui est un modèle d'application réseau ou de site Web qui est réécrit dynamiquement Utiliser la page actuelle pour interagir avec l'utilisateur Cette méthode évite d'interrompre l'expérience utilisateur lors du basculement entre les pages. Dans SPA, tout le code nécessaire (HTML, JavaScript et CSS) est récupéré avec le chargement d'une seule page, ou les ressources appropriées sont chargées dynamiquement et ajoutées à la page selon les besoins (généralement en réponse aux demandes de l'utilisateur). actions) . La page ne se recharge à aucun moment et ne contrôle pas le transfert vers d'autres pages. Par exemple, tout comme une tasse, elle contient du lait le matin, du café à midi et du thé l'après-midi. Elle a toujours le contenu et la tasse reste inchangée.
| La différence entre SPA et MPA :
MPA (Muti-page application), c'est-à-dire multi-page application. Dans MPA, chaque page est une page principale et est indépendante Chaque fois qu'une page est accédée, les fichiers Html, CSS et JS doivent être rechargés et les fichiers publics sont requis à la demande. |
|
|
SPA |
MPA |
|
composé de |
une page principale et plusieurs fragments de page |
plusieurs pages principales
|
mode URL | mode hachage |
mode historique
🎜🎜Optimisation des moteurs de recherche SEO🎜🎜difficile à mettre en œuvre, peut être améliorée en utilisant la méthode SSR🎜🎜facile à mettre en œuvre🎜🎜🎜🎜transfert de données🎜🎜facile🎜🎜transmis via URL, cookie, stockage local, etc.🎜🎜🎜🎜changement de page 🎜🎜rapide, bonne expérience utilisateur🎜🎜Changement de ressources de chargement, vitesse lente, expérience utilisateur médiocre🎜🎜🎜🎜Coût de maintenance🎜🎜Relativement facile🎜🎜Relativement complexe🎜🎜🎜🎜
-
SPA Avantages et inconvénients : SPA的优缺点：
优点：
- 具有桌面应用的即时性、网站的可移植性和可访问性
- 用户体验好、快，内容的改变不需要重新加载整个页面
- 良好的前后端分离，分工更明确
缺点：
双向绑定？
概念：
Vue 中双向绑定是一个指令v-model，可以绑定一个响应式数据到视图，同时视图的变化能改变该值。v-model是语法糖，默认情况下相当于:value和@input，使用v-model可以减少大量繁琐的事件处理代码，提高开发效率。
使用：
通常在表单项上使用v-model，还可以在自定义组件上使用，表示某个值的输入和输出控制。
原理：
v-model是一个指令，双向绑定实际上是Vue 的编译器完成的，通过输出包含v-model模版的组件渲染函数，实际上还是value属性的绑定及input事件监听，事件回调函数中会做相应变量的更新操作。
子组件是否可以直接改变父组件的数据？
所有的prop都遵循着单项绑定原则，props因父组件的更新而变化，自然地将新状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。
另外，每次父组件更新后，所有的子组件中的props都会被更新为最新值，这就意味着不应该子组件中去修改一个prop，若这么做了，Vue 会在控制台上抛出警告。
-
实际开发过程中通常有两个场景导致要修改prop：
-
prop被用于传入初始值，而子组件想在之后将其作为一个局部数据属性。这种情况下，最好是新定义一个局部数据属性，从props获取初始值即可。
- 需要对传入的
prop值做进一步转换。最好是基于该prop值定义一个计算属性。
实践中，如果确实要更改父组件属性，应emit一个事件让父组件变更。当对象或数组作为props被传入时，虽然子组件无法更改props绑定，但仍然可以更改对象或数组内部的值。这是因为JS的对象和数组是按引用传递，而对于 Vue 来说，禁止这样的改动虽然可能，但是有很大的性能损耗，比较得不偿失。
Vue Router中的常用路由模式和原理？
1、hash 模式：
-
location.hash的值就是url中 # 后面的东西。它的特点在于：hash虽然出现url中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
- 可以为hash的改变添加监听事件
window.addEventListener("hashchange", funcRef, false)，每一次改变hash (window.location.hash)，都会在浏览器的访问历史中增加一个记录，利用hash的以上特点，就可以实现前端路由更新视图但不重新请求页面的功能了。
特点：兼容性好但是不美观
2、history 模式：
利用 HTML5 History Interface 中新增的pushState()和replaceState()方法。
这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go Avantages :
Possède l'immédiateté des applications de bureau, la portabilité et l'accessibilité des sites Web 🎜🎜🎜Bonne expérience utilisateur, rapide, contenu Le changement fait ne nécessite pas de recharger la page entière🎜🎜🎜Bonne séparation front-end et back-end, division plus claire du travail🎜🎜
🎜Inconvénients : 🎜🎜🎜Pas propice à l'exploration des moteurs de recherche🎜🎜🎜Le premier rendu la vitesse est relativement lente Lent 🎜🎜
🎜
Liaison bidirectionnelle ?
🎜🎜Concept : 🎜La liaison bidirectionnelle dans Vue est une instruction v-model qui peut être lié Une donnée réactive est ajoutée à la vue et les modifications apportées à la vue peuvent modifier la valeur. v-model est du sucre de syntaxe, équivalent à :value et @input par défaut, utilisez v-model Il peut réduire une grande partie du code de traitement des événements fastidieux et améliorer l'efficacité du développement. 🎜🎜🎜🎜Utilisation : 🎜Utilisez généralement v-model sur les éléments de formulaire, et peut également être utilisé sur des composants personnalisés pour représenter le contrôle d'entrée et de sortie d'une certaine valeur. 🎜🎜🎜🎜Principe : 🎜v-model est une instruction. La liaison bidirectionnelle est en fait effectuée par le compilateur Vue en produisant des composants contenant le modèle v-model. La fonction de rendu est en fait la liaison de l'attribut value et de l'écouteur d'événement input. La fonction de rappel d'événement mettra à jour les variables correspondantes. 🎜🎜
Les composants enfants peuvent-ils modifier directement les données des composants parents ?
🎜🎜Tous les prop suivent le principe de liaison unique, propsModifications dues aux mises à jour du composant parent, le nouvel état est naturellement transmis au composant enfant sans le transmettre en arrière. Cela empêche les composants enfants de modifier accidentellement l'état du composant parent, sinon le flux de données de l'application deviendrait facilement confus et difficile à comprendre. 🎜De plus, chaque fois que le composant parent est mis à jour, les props de tous les composants enfants seront mis à jour avec la dernière valeur, ce qui signifie qu'un propne doit pas être modifié dans le composant enfant. >, si vous faites cela, Vue lancera un avertissement sur la console. 🎜🎜🎜🎜Dans le processus de développement actuel, il existe généralement deux scénarios qui conduisent à la nécessité de modifier prop : 🎜🎜prop est utilisé pour transmettre le valeur initiale, et le sous-composant souhaite l'utiliser plus tard comme attribut de données locales. Dans ce cas, il est préférable de définir un nouvel attribut de données locales et d'obtenir la valeur initiale de props. 🎜🎜La valeur prop entrante doit être davantage convertie. Il est préférable de définir une propriété calculée basée sur la valeur prop. 🎜
🎜🎜🎜En pratique, si vous souhaitez vraiment modifier les propriétés du composant parent, vous devez émettre un événement pour laisser le composant parent changer. Lorsqu'un objet ou un tableau est transmis en tant que props, bien que le sous-composant ne puisse pas modifier la liaison props, il peut toujours modifier le contenu interne du valeur d’un objet ou d’un tableau. En effet, les objets et tableaux JS sont transmis par référence, et pour Vue, bien qu'il soit possible d'interdire de tels changements, cela entraînera une énorme perte de performances et le gain l'emportera sur le gain. 🎜🎜
Quels sont les modes et principes de routage courants dans Vue Router ?
🎜1. Mode de hachage : 🎜🎜location.hashLa valeur est ce qui suit # dans l'url. Sa caractéristique est que même si le hachage apparaît dans l'URL, il ne sera pas inclus dans la requête HTTP et n'a aucun impact sur le backend, donc changer le hachage ne rechargera pas la page. 🎜🎜Vous pouvez ajouter un événement d'écoute pour les modifications de hachage window.addEventListener("hashchange", funcRef, false) Chaque fois que vous modifiez hash (window.location.hash). , ce sera En ajoutant un enregistrement à l'historique d'accès du navigateur et en utilisant les caractéristiques de hachage ci-dessus, vous pouvez réaliser la fonction de routage frontal mettant à jour la vue sans redemander la page. 🎜Caractéristiques : Bonne compatibilité mais pas belle🎜🎜
🎜2. Mode Historique : 🎜🎜Utilisez les nouveaux pushState() et replaceState() dans le code de l'interface d'historique HTML5> méthode. 🎜Ces deux méthodes sont appliquées à la pile d'historique du navigateur. Sur la base des <code>back, forward et go actuellement existants, elles fournissent la fonction de modifier les documents historiques. 🎜Ces deux méthodes ont une chose en commun : lorsqu'elles sont appelées pour modifier la pile de l'historique du navigateur, même si l'URL actuelle a changé, le navigateur ne rafraîchit pas la page. Cela crée un problème pour le routage frontal de l'application monopage. pour "mettre à jour la vue mais pas redemander" la page" fournit les 🎜Caractéristiques de base : bien qu'elle soit belle, 404 apparaîtra lors de l'actualisation et nécessite une configuration backend. 🎜Routage dynamique ?
Souvent, nous devons mapper des itinéraires avec un modèle de correspondance donné au même composant. Dans ce cas, nous devons définir un routage dynamique. Par exemple, nous avons un composant User, qui doit être utilisé pour restituer tous les utilisateurs avec des ID différents. Ensuite, nous pouvons utiliser dynamic segment (dynamic segment) dans le chemin de routage de vue-router pour obtenir cet effet : {path: '/user/:id', compenent: User} , où <code>:id est le paramètre de chemin dynamique. 动态路径参数（dynamic segment）来达到这个效果：{path: '/user/:id', compenent: User}，其中:id就是动态路径参数。
对Vuex的理解？
概念：
Vuex 是 Vue 专用的状态管理库，它以全局方式集中管理应用的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
解决的问题：
Vuex 主要解决的问题是多组件之间状态共享。利用各种通信方式，虽然也能够实现状态共享，但是往往需要在多个组件之间保持状态的一致性，这种模式很容易出问题，也会使程序逻辑变得复杂。Vuex 通过把组件的共享状态抽取出来，以全局单例模式管理，这样任何组件都能用一致的方式获取和修改状态，响应式的数据也能够保证简洁的单向流动，使代码变得更具结构化且易于维护。
什么时候用:
Vuex 并非是必须的，它能够管理状态，但同时也带来更多的概念和框架。如果我们不打算开发大型单页应用或应用里没有大量全局的状态需要维护，完全没有使用Vuex的必要，一个简单的 store 模式就够了。反之，Vuex将是自然而然的选择。
用法：
Vuex 将全局状态放入state对象中，它本身是一颗状态树，组件中使用store实例的state访问这些状态；然后用配套的mutation方法修改这些状态，并且只能用mutation修改状态，在组件中调用commit方法提交mutation；如果应用中有异步操作或复杂逻辑组合，需要编写action，执行结束如果有状态修改仍需提交mutation，组件中通过dispatch派发action。最后是模块化，通过modules选项组织拆分出去的各个子模块，在访问状态（state）时需注意添加子模块的名称，如果子模块有设置namespace，那么提交mutation和派发action时还需要额外的命名空间前缀。
页面刷新后Vuex 状态丢失怎么解决？
Vuex 只是在内存中保存状态，刷新后就会丢失，如果要持久化就需要保存起来。
localStorage就很合适，提交mutation的时候同时存入localStorage，在store中把值取出来作为state的初始值即可。
也可以使用第三方插件，推荐使用vuex-persist插件，它是为 Vuex 持久化储存而生的一个插件，不需要你手动存取storage，而是直接将状态保存至 cookie 或者 localStorage中。
关于 Vue SSR 的理解？
SSR即服务端渲染（Server Side Render）
Vous comprenez Vuex ? 🎜🎜
- 🎜Concept :
Vuex est une bibliothèque de gestion d'état dédiée à Vue Elle gère de manière centralisée l'état de l'application et de manière globale. utilise les règles correspondantes pour garantir que l'état change de manière prévisible.
🎜
- 🎜Problèmes résolus :
Le principal problème résolu par Vuex est le partage d'état entre plusieurs composants. Bien que le partage d'état puisse également être réalisé à l'aide de diverses méthodes de communication, il est souvent nécessaire de maintenir la cohérence des états entre plusieurs composants. Ce modèle est sujet à des problèmes et complique la logique du programme. Vuex extrait l'état partagé des composants et le gère en mode singleton global, de sorte que n'importe quel composant puisse obtenir et modifier l'état de manière cohérente. Les données réactives peuvent également garantir un flux unidirectionnel simple, rendant le code plus structuré et plus simple. à maintenir.
🎜
- 🎜Quand l'utiliser :
Vuex n'est pas nécessaire, il peut gérer l'état, mais il apporte également plus de concepts et de frameworks. Si nous ne prévoyons pas de développer une grande application d'une seule page ou s'il n'y a pas beaucoup d'état global à maintenir dans l'application, il n'est pas nécessaire d'utiliser Vuex. Un simple mode magasin suffit. Sinon, Vuex serait le choix naturel. 🎜
- 🎜Utilisation :
Vuex place l'état global dans l'objet state, qui est lui-même une arborescence d'état. Utilisez storedans le composant. >Le state de l'instance accède à ces états ; utilise ensuite la méthode mutation correspondante pour modifier ces états, et ne peut utiliser que mutation pour modifier l'état, dans le composant Appelez la méthode commit pour soumettre une mutation ; s'il y a des opérations asynchrones ou des combinaisons logiques complexes dans l'application, vous devez écrire une action. . S'il y a des modifications d'état après l'exécution, vous devez toujours soumettre une mutation et le composant envoie une action via dispatch. La dernière étape est la modularisation. Utilisez l'option modules pour organiser les sous-modules divisés. Lors de l'accès à l'état, vous devez ajouter le nom du sous-module si le sous-module a un espace de noms code de définition>, des préfixes d'espace de noms supplémentaires sont requis lors de la soumission de la <code>mutation et de la distribution de l'action. 🎜
🎜Comment résoudre le problème de perte d'état Vuex après l'actualisation de la page ? 🎜🎜🎜Vuex enregistre uniquement l'état en mémoire et sera perdu après l'actualisation. Si vous souhaitez persister, vous devez le sauvegarder. 🎜🎜localStorage est très approprié lors de la soumission d'une mutation, elle est également stockée dans localStorage, et la valeur est récupérée dans store<.> Utilisez-le simplement comme valeur initiale de <code>state. 🎜🎜Vous pouvez également utiliser des plug-ins tiers. Il est recommandé d'utiliser le plug-in vuex-persist. Il s'agit d'un plug-in pour le stockage persistant Vuex et ne nécessite pas que vous le fassiez manuellement. accédez au storage , mais enregistrez l'état directement dans cookie ou localStorage. 🎜🎜Vous comprenez Vue SSR ? 🎜🎜🎜SSR est Server Side Render (Server Side Render), ce qui signifie que Vue restitue les balises en HTML côté client pour les compléter côté serveur, puis html est renvoyé directement au client. 🎜
- Avantages :
A un meilleur référencement et le premier écran se charge plus rapidement.
- Inconvénients :
Les conditions de développement seront limitées. Le rendu côté serveur ne prend en charge que deux hooks, beforeCreate et Create. Lorsque nous avons besoin de bibliothèques d'extensions externes, un traitement spécial est également requis dans le nœud. js environnement d'exécution. Le serveur aura des exigences de charge plus importantes.
Quelles méthodes d'optimisation des performances de Vue connaissez-vous ?
- Chargement paresseux des itinéraires. Divisez efficacement la taille de l'application et chargez-la de manière asynchrone lors de son accès.
-
keep-alive met en cache les pages. Évitez la création en double d'instances de composants et conservez l'état des composants mis en cache. keep-alive缓存页面。避免重复创建组件实例，且能保留缓存组件状态。
-
v-for遍历避免同时使用v-if。实际上在 Vue 3 中已经是一个错误用法了。
- 长列表性能优化，可采用虚拟列表。
-
v-once。不再变化的数据使用v-once
Le parcours v-for évite d'utiliser v-if en même temps. En fait, c'est déjà une mauvaise utilisation dans Vue 3. - Optimisation des performances de liste longue, une liste virtuelle peut être utilisée.
-
v-once. Utilisez v-once pour les données qui ne changent plus. - Destruction d'événements. Une fois le composant détruit, les variables globales et les temporisateurs sont détruits.
- Les images sont chargées paresseusement.
- Des plug-ins tiers sont introduits sur demande.
Fractionnement des sous-composants. Les composants à l'état plus lourd conviennent au fractionnement. Rendu côté serveur.
(Partage de vidéos d'apprentissage : 🎜Tutoriel d'introduction à Vuejs🎜, 🎜Vidéo de programmation de base🎜)🎜
![[Compilé et partagé] Quelques questions d'entretien Vue courantes (avec analyse des réponses)](https://img.php.cn/upload/article/000/000/024/63d65dc9e82f5730.jpg)