Cet article résume et partage avec vous quelques questions d'entretien Vue (avec analyse des réponses) pour vous aider à trier les connaissances de base et à enrichir votre réserve de connaissances Vue Cela vaut la peine d'être collecté, venez y jeter un œil !
![[Compilation et résumé] Plus de 45 questions d'entretien Vue pour vous aider à consolider vos points de connaissances !](https://img.php.cn/upload/article/000/000/024/63b41959a5fed714.jpg)
Idées de réponses :
Qu'est-ce que le cycle de vie de Vue ? Vue 生命周期是什么？
Vue 生命周期有哪些阶段？
Vue 生命周期的流程？
结合实践
回答范例：
生命周期这个词应该是很好理解的，在我们生活中就会常常碰到，比如谈到一个人的生命周期，我们会说人这一生会经历婴儿、儿童、少年、青年、中年、老年这几个阶段。
而 Vue 的生命周期也是如此，在 Vue 中的每个组件都会经历从创建到挂载到更新再到销毁这几个阶段，而在这些阶段中，Vue 会运行一种叫做生命周期钩子的函数，方便我们在特定的阶段有机会添加上我们自己的代码。
Vue 生命周期总共可以分为 8 各阶段：创建前后、挂载前后、更新前后、销毁前后，以及一些特殊场景的生命周期（keep-alive 激活时、捕获后代组件错误时）。Vue3 中还新增了三个用于调试和服务端渲染场景。
这几个阶段对应的钩子函数 API依次为：beforeCreate create beforeMount mounted beforeUpdate updated activated(keep-alive 激活时调用) deactivated(keep-alive 停用时调用) beforeDestory destoryed errorCaptured（捕获子孙组件错误时调用）。
在 Vue3 中的变化 绝大多数只要加上前缀 on 即可，比如 mounted 变为 onMounted，除了 beforeDestroy 和 destroyed 被重新命名为 beforeUnmount 和 unMounted（这样与前面的 beforeMount 和 mounted 对应，强迫症表示很赞?）
beforeCreate 在组件创建前调用，通常用于插件开发中执行一些初始化任务；created 组件创建完毕调用，可以访问各种数据，请求接口数据等；mounted 组件挂载时调用 可以访问数据、dom 元素、子组件等；beforeUpdate 更新前调用 此时 view 层还未更新，可用于获取更新前的各种状态；updated 完成更新时调用 此时view层已经完成更新，所有状态已经是最新的了；beforeUnmount 实例被销毁前调用，可用于一些定时器或订阅的取消；unMounted 销毁一个实例时调用 可以清理与其他实例的链接，解绑它的全部指令以及事件监听器。
在 Vue3 中： setup 是比 created 先执行的； 而且没有 beforeCreate 和 created
Vue ? Vue ? Combiné avec de la pratique
🎜🎜🎜Extension : Modifications dans les modifications du cycle de vie deVue3 Vue [Recommandations associées : tutoriel vidéo vuejs🎜, développement web front-end🎜】🎜🎜🎜🎜Exemple de réponse :🎜🎜🎜🎜Le mot cycle de vie doit être facile à comprendre, et nous le rencontrons souvent dans nos vies, par exemple en parlant d'un personne Dans le cycle de vie, on dira qu'une personne va passer par plusieurs étapes dans sa vie : bébé, enfant, adolescent, jeunesse, âge moyen et vieillesse.
Il en va de même pour le cycle de vie de Vue. Chaque composant de Vue passera par le processus de la 🎜création🎜 au 🎜montage🎜 jusqu'à la 🎜mise à jour🎜 puis à la 🎜. destroy🎜 Plusieurs étapes, et dans ces étapes, Vue exécutera une fonction appelée 🎜life cycle hook🎜, afin que nous ayons la possibilité d'ajouter notre propre code à des étapes spécifiques. 🎜🎜🎜🎜Le cycle de vie de Vue peut être divisé en 8 étapes : 🎜avant et après la création🎜, 🎜avant et après le montage🎜, 🎜avant et après la mise à jour🎜, 🎜avant et après la destruction🎜, ainsi que ainsi que quelques 🎜scénarios spéciaux 🎜Cycle de vie (🎜keep-alive lorsqu'il est activé🎜, 🎜lors de la détection d'erreurs de composants descendants🎜). Vue3 ajoute également 🎜trois nouvelles scènes pour le débogage et le rendu côté serveur🎜. 🎜🎜🎜🎜Les API de fonction hook correspondant à ces étapes sont : 🎜beforeCreate create beforeMount Mounted beforeUpdate mis à jour activé (appelé lorsque le maintien en vie est activé) désactivé (appelé lorsque le maintien en vie est désactivé) beforeDestory destoryed errorCaptured (appelé lors de la capture des erreurs de composants descendants)🎜. 🎜🎜La plupart des modifications dans Vue3 doivent simplement être préfixées par on. Par exemple, 🎜Mounted🎜 devient 🎜onMounted🎜, à l'exception de 🎜beforeDestroy code>🎜 et 🎜<code>destroyed🎜 ont été renommés en 🎜beforeUnmount🎜 et 🎜unMounted🎜 (ils sont donc cohérents avec le précédent 🎜beforeMount🎜 correspond à 🎜<code>Mounted🎜, trouble obsessionnel-compulsif veut dire génial ?)🎜🎜🎜🎜🎜beforeCreate🎜 est appelé avant la création du composant, généralement utilisé dans le développement de plug-ins Effectuer certaines tâches d'initialisation ; 🎜créé🎜 Appelé après la création du composant, vous pouvez accéder à diverses données, demander des données d'interface, etc. ; Appelé lorsque le composant est monté, vous pouvez accéder aux données, aux éléments dom, aux sous-composants, etc. ; 🎜beforeUpdate🎜 est appelé avant la mise à jour. La couche code>view n'a pas été mise à jour et peut être utilisée pour obtenir diverses informations avant la mise à jour Statut ; mis à jour🎜 Appelé lorsque la mise à jour est terminée à ce moment. la couche a terminé la mise à jour et tous les statuts sont déjà à jour ; 🎜beforeUnmount🎜 Appelé avant la destruction de l'instance, peut être utilisé Annulation de certains timers ou abonnements 🎜unMounted ; >🎜 Appelé lors de la destruction d'une instance pour nettoyer les liens avec d'autres instances, dissocier toutes ses instructions et ses écouteurs d'événements. 🎜🎜🎜🎜Dans Vue3 : 🎜setup est exécuté avant created 🎜Et il n'y a pas de beforeCreate ni de created code >🎜. 🎜🎜🎜🎜🎜2. Comment gérer les autorisations dans Vue🎜🎜🎜🎜🎜L'exigence générale pour la gestion des autorisations est de gérer les autorisations des pages et des boutons🎜
L'implémentation spécifique est divisée en deux solutions : l'implémentation front-end et l'implémentation back-end :
La solution frontale configurera toutes les informations de routage sur le front-end et exigera que les utilisateurs se connectent via les gardes de routage Une fois les utilisateurs connectés, la table de routage sera filtrée en fonction de leurs rôles , puis des itinéraires. sera ajouté dynamiquement . Par exemple, je vais configurer un tableau asyncRoutesasyncRoutes 数组，需要认证的页面在路由的 meta 中添加一个 roles 字段，等获取用户角色之后取两者的交集，若结果不为空则说明可以访问。过滤结束后剩下的路由就是用户能访问的页面，最后通过 router.addRoutes(accessRoutes) 方式动态添加路由即可。
后端方案会把所有页面路由信息存在数据库中，用户登录的时候根据其角色查询得到其能访问的所有路由信息返回给前端，前端再通过 addRoute 动态添加路由信息。
按钮权限的控制通常会实现一个指令，例如 v-permission，将按钮要求角色通过值传给 v-permission 指令，在指令的 mounted 钩子中可以判断当前用户角色和按钮是否存在交集，有就保留按钮，没有就移除按钮。
纯前端方案的优点是实现简单，不需要额外权限管理页面，但是维护起来问题比较大，有新的页面和角色需求就要修改前端代码和重新打包部署；服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息。
自己的话：权限管理一般分页面权限和按钮权限，而具体实现方案又分前端实现和后端实现，前端实现就是会在前端维护一份动态的路由数组，通过用户登录后的角色来筛选它所拥有权限的页面，最后通过 addRoute 将动态添加到 router 中；而后端实现的不同点就是这些路由是后端返回给前端，前端再动态添加进去的。
按钮权限一般会实现一个 v-permission ，通过判断用户有没有权限来控制按钮是否显示。
纯前端方案的优点是实现简单，但是维护问题大，有新的页面和角色需求都需要改代码重新打包部署，服务端则不存在这个问题。
回答思路：
什么是双向绑定？
双向绑定的好处？
在什么地方使用双向绑定？
双向绑定的使用方式、使用细节、Vue3中的变化
原理实现描述
回答：
Vue中的双向绑定是一个指令 v-model ，它可以绑定一个响应式数据到视图，同时视图中变化也能改变该值。
v-model 是一个语法糖，它的原理（默认请情况下）就是通过 :value 将变量挂到 dom 上，再通过 input事件 监听 dom 的变化改变变量的值。使用 v-model的好处就是方便呀，减少了大量的繁琐的事件处理，提高开发效率。
通常在表单上使用 v-model，还可以在自定义组件上使用，表示某个值得输入和输出控制。
可以结合修饰符做进一步限定（lazy/number/trim）,用在自定义组件上时有些不同，它相当于是给了子组件一个 modelValue 的 属性 和 update:modelValue 的 事件; 在 Vue3 中还可以用参数形式指定多个不同的绑定，如 v-model:foo 这个时候就相当于 给了子组件一个 foo 的 属性 和 update:foo 的事件。
v-model作为一个指令，它的原理就是 Vue 编译器会把它转换成 value属性绑定和input的监听事件，上面说过是默认情况下，实际上编译器会根据表单元素的不同分配不同的事件，比如 checkbox 和 radio 类型的input 会转换为 checked 和 change 事件。
Vue 组件之间通信有以下这么几种：
props, et la page qui nécessite une authentification ajoutera un champ
roles🎜 dans la 🎜metade la route. >🎜, etc. Après avoir obtenu le rôle d'utilisateur, faites l'intersection des deux. Si le résultat n'est pas vide, cela signifie qu'il est accessible. Après filtrage, les routes restantes sont les pages auxquelles les utilisateurs peuvent accéder. Enfin, les routes peuvent être ajoutées dynamiquement via 🎜router.addRoutes(accessRoutes)🎜. 🎜🎜La solution back-end 🎜stockera toutes les informations de routage des pages dans la base de données🎜 Lorsque l'utilisateur se connectera, toutes les informations de routage auxquelles il pourra accéder seront renvoyées au front-end en fonction de sa requête de rôle, et le front-end. end passera ensuite 🎜addRoute🎜 Ajoutez dynamiquement des informations de routage. 🎜🎜Le contrôle des autorisations des boutons 🎜implémente généralement une commande🎜, telle que 🎜v-permission🎜, et transmet le rôle requis du bouton à la commande 🎜v-permission🎜 via le Dans le hook 🎜Mounted🎜 de la commande, vous pouvez déterminer s'il y a une intersection entre le rôle d'utilisateur actuel et le bouton. Si c'est le cas, conservez le bouton. Sinon, supprimez le bouton. 🎜🎜🎜🎜L'avantage de la solution front-end pure est qu'elle est simple à mettre en œuvre🎜 et ne nécessite pas d'autorisations supplémentaires pour gérer la page. Cependant, la maintenance est un gros problème🎜 S'il y a de nouvelles exigences de page et de rôle, le code frontal doit être modifié et 🎜reconditionné pour le déploiement🎜 ; 🎜La solution côté serveur n'a pas ce problème🎜 Grâce à une page dédiée de gestion des rôles et des autorisations, les informations d'autorisation des pages et des boutons sont configurées dans la base de données, et l'application obtient les dernières informations de routage à chaque fois qu'elle se connecte. 🎜🎜routeur via addRoute ; la différence dans l'implémentation du backend est que ces routes sont backend Retour au front-end, et le front-end l'ajoute dynamiquement.
Les autorisations des boutons implémentent généralement une v-permission pour contrôler si le bouton est affiché en déterminant si l'utilisateur a l'autorisation.
L'avantage de la solution frontale pure est qu'elle est simple à mettre en œuvre, mais elle pose de gros problèmes de maintenance. S'il y a de nouvelles exigences de page et de rôle, le code doit être modifié, reconditionné et déployé. Ce problème n'existe pas. le côté serveur. 🎜v-model, qui peut lier des données réactives à la vue, et les modifications dans la vue peuvent également modifier la valeur. 🎜🎜🎜🎜v-model est un sucre syntaxique Son principe (par défaut) est d'accrocher les variables à domvia :value >, et puis écoutez les changements dans dom via l'événement input pour modifier la valeur de la variable. L'avantage d'utiliser v-model est qu'il est pratique, réduit de nombreux traitements d'événements fastidieux et améliore l'efficacité du développement. 🎜🎜🎜🎜Habituellement utilisé sur les formulaires, v-model peut également être utilisé sur des composants personnalisés pour représenter une certaine valeur de contrôle d'entrée et de sortie. 🎜🎜🎜🎜 peut être davantage limité en combinant des modificateurs (lazy/number/trim). C'est un peu différent lorsqu'il est utilisé sur des composants personnalisés. Cela équivaut à donner au sous-composant un attribut modelValue et. Événement update:modelValue ; dans Vue3, vous pouvez également spécifier plusieurs liaisons différentes sous forme de paramètres, telles que v-model:foo. pour donner au sous-composant les propriétés de foo et les événements de update:foo. 🎜🎜🎜🎜v-model est une directive. Son principe est que le compilateur Vue le convertira en 🎜liaison d'attribut de valeur et événements d'écoute d'entrée🎜 Comme mentionné ci-dessus, par défaut, en fait, le le compilateur attribuera différents événements en fonction de différents éléments du formulaire. Par exemple, les types checkbox et radio de input seront convertis en checked <.> et <code>change. 🎜🎜
props🎜$emit, $on, $off, $once (les trois derniers sont dans Obsolète dans Vue3)$emit、$on、$off、$once（后三者在Vue3中已被废除）
$children(Vue3中废除)、$parent
$attrs、$listeners（Vue3中废除）
ref
$root
eventbus （Vue3中不好使了，需要自己封装）
vuex、pinia
provide + inject
以上的方法长按使用场景可以分为：
父子组件之间可以使用
props /$emit/ $parent/ ref /$attrs
兄弟组件之间可以使用
$parent / $root/ eventbus / vuex
跨层及组件之间可以使用
eventbus / vuex pinia / provide + inject
路由懒加载：有效拆分 App 尺寸，访问时才异步加载
const router = createRouter({
routes: [
{ path : '/foo', component: () => import('./foo.vue)}
]
})keep-alive 缓存页面：避免重复创建组件实例，且能保存缓存组件状态
<keep-alive> <router-view v-if="$route.meta.keepAlive == true"></router-view> </keep-alive> <router-view v-if="$route.meta.keepAlive != true"></router-view>
使用 v-show 复用 DOM：避免重复创建组件
v-for 遍历避免同时使用 v-if（实际上这在 Vue3 中是错误的写法）
v-once 和 v-memo: 不再变化的数据使用 v-once；按条件跳过更新时使用 v-memo
长列表性能优化：如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容。一些开源库（vue-virtual-scroller / vue-virtual-scroll-grid）
事件的销毁：Vue组件销毁时，会自动解绑它的全部指令以及事件监听器，但是仅限于组件本身的事件。
图片懒加载，自定义 v-lazy 指令 （参考项目：vue-lazyload）
第三方插件按需引入 element-plus 避免体积太大
子组件分割策略：较重的状态组件适合拆分
SSR 服务端渲染 解决首屏渲染慢的问题
思路：
刷新后 Vuex 状态为什么会丢失？
解决方法
第三方库以及原理探讨
个人理解
回答：
因为 Vuex 只是在内存中保存状态，刷新后就会丢失，如果要持久化就要存起来。
可以是用 localStorage 存储 Vuex 的状态，store 中把值取出来作为 state 的初始值，提交 mutation 的时候就存入 localStorage。
可以用 vuex-persist、vuex-persistedstate 这种插件，可以通过插件选项控制哪些需要持久化。内部的原理就是通过订阅 mutation 变化做统一处理。
这里有两个问题，一是如果用户手动改了 localStorage怎么办？那我 Vuex 里的状态不是也改变了？二是由于 localStorage API 的原因只能存储字符串，所以我们只能将数据通过 JSON.stringify 转换为字符串，而当我们存储的数据为 Map、Set、Function 这种引用类型的数据时，JSON.stringify 转换后会变味 {} 而丢失。
对应第一个问题我的解决方法是可以通过 监听 storage 事件来清除数据
window.addEventListener("storage", function () {
localStorage.clear();
window.location.href = '/login'
console.error("不要修改localStorage的值~~~");
});对于第二个问题没办法了，只能选择不适用 Map 和 Set 这种引用类型。
思路：
属性拦截的几种方式
defineProperty的问题
Proxy的优点
其他考量
回答：
JS 中做属性拦截常见的方式有三种：defineProperty、getter/setters 和 Proxy
$children(Obsolète dans Vue3), $parent🎜🎜🎜🎜< code >$attrs, $listeners(Abolition dans Vue3)🎜🎜🎜🎜ref🎜🎜🎜🎜$ root 🎜🎜🎜🎜eventbus (Ce n'est pas facile à utiliser dans Vue3, vous devez l'encapsuler vous-même)🎜🎜🎜🎜vuex</ code>, < code>pinia🎜🎜🎜🎜provide + inject🎜🎜props /$emit/ $parent / ref /$attrs🎜🎜🎜🎜Peut être utilisé entre des composants frères🎜🎜$parent / $root / eventbus / vuex🎜🎜🎜🎜peut être utilisé sur plusieurs couches et entre composants🎜🎜eventbus / vuex pinia / provide + inject🎜🎜App, charge de manière asynchrone uniquement lors de l'accès🎜🎜{
path: '/login',
component: () => import('../views/login/Login.vue')
},keep-alive Page de cache : évitez de créer à plusieurs reprises des instances de composants et enregistrez l'état des composants en cache🎜🎜{
path: '/login',
component: () => import(/* webpackChunkName: "login" */'../views/login/Login.vue')
},v-show pour réutiliser DOM : évitez de créer des composants à plusieurs reprises🎜🎜🎜🎜v-for traversez pour évitez d'utiliser en même temps v-if (en fait, c'est la mauvaise façon de l'écrire dans Vue3) 🎜🎜🎜🎜v-once et v-memo : données qui ne changent plus. Utilisez v-once ; utilisez v-memo lorsque vous ignorez les mises à jour de manière conditionnelle. 🎜🎜🎜🎜Optimisation des performances de longue liste : si c'est le cas. une longue liste de Big Data, le défilement virtuel peut être utilisé uniquement pour restituer le contenu dans une petite zone. Certaines bibliothèques open source (vue-virtual-scroller / vue-virtual-scroll-grid) 🎜🎜🎜🎜 destruction d'événement : Lorsque le composant Vue est détruit, il sera automatiquement dissocié de toutes les directives et écouteurs d'événements, mais uniquement des événements du composant lui-même. 🎜🎜🎜🎜Chargement paresseux des images, instructions v-lazy personnalisées (projet de référence : vue-lazyload) 🎜🎜🎜🎜Les plug-ins tiers introduisent element on demand -plus Évitez d'être trop grand🎜🎜🎜🎜Stratégie de fractionnement des sous-composants : les composants d'état plus lourds conviennent au fractionnement🎜🎜🎜🎜SSR Le rendu côté serveur résout le problème de rendu lent du premier écran🎜 🎜localStorage pour stocker l'état de Vuex et retirer la valeur de store en tant que state</ code> La valeur initiale est stockée dans <code>localStorage lorsque mutation est soumise. 🎜🎜🎜🎜Vous pouvez utiliser des plug-ins tels que vuex-persist et vuex-persistedstate, et vous pouvez contrôler lesquels doivent être conservés via les options du plug-in. Le principe interne est d'effectuer un traitement unifié en s'abonnant aux changements de mutation. 🎜🎜🎜🎜Il y a deux questions ici. La première est que se passe-t-il si l'utilisateur modifie manuellement localStorage ? Alors le statut de mon Vuex n'a-t-il pas également changé ? Deuxièmement, comme l'localStorage API ne peut stocker que des chaînes, nous ne pouvons convertir les données en chaînes que via JSON.stringify, et lorsque les données que nous stockons sont < Lors du référencement des données du code >Map, Set et Function, JSON.stringify changera après la conversion {} et perdu. 🎜🎜storage🎜+ |- /src + |- /assets 存放资源 + |- /img + |- /css + |- /font + |- /data + |- base-ui 存放多个项目中都会用到的公共组件 + |- components 存放这个项目用到的公共组件 + |- hooks 存放自定义hook + |- views 视图 + |- store 状态管理 + |- router 路由 + |- service 网络请求 + |- utils 工具 + |- global 全局注册、全局常量..
Set sont des types de référence. 🎜JS Il existe trois manières courantes d'intercepter les propriétés : defineProperty, getter/setters et Procuration🎜Vue2 中使用 defineProperty 的原因是， 2013 年只能使用这种方式，由于该 API 存在一些局限性，比如对于数组的拦截有问题，为此 Vue 需要专门为数组响应式做一套实现。另外不能拦截那些新增、删除属性；最后 defineProperty 方案在初始化时需要深度递归遍历处理对象才能对它进行完全拦截，明显增加了初始化的时间。
以上两点在 Proxy 出现后迎刃而解，不仅可以对数组实现拦截，还能对 Map、Set 实现拦截；另外 Proxy 的拦截也是懒处理行为，如果用户没有访问嵌套对象，那么也不会实施拦截，这就让初始化的速度和内存占用改善了。
Proxy 有兼容性问题，完全不支持IE
思路：
必要性
何时用
怎么用
使用细节
回答：
当打包构建时，Javascript 抱回变得非常大，影响页面加载。利用路由懒加载我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应最贱，这样更加高效，是一种优化手段。
一般来说，对于所有的路由都使用动态导入是个好主意
给 component 选项配置一个返回 Promise组件的函数就可以定义懒加载路由.例如：
{
path: '/login',
component: () => import('../views/login/Login.vue')
},结合注释
{
path: '/login',
component: () => import(/* webpackChunkName: "login" */'../views/login/Login.vue')
},vite中结合rollupOptions定义分块 5. 路由中不能使用异步组件
Vue-Router 有三个模式，其中 history 和 hash 更为常用。两者差别主要在显示形式和部署上，
hash模式在地址栏现实的时候有一个 #，这种方式使用和部署都较简单；history模式url看起来更优雅没关，但是应用在部署时需要做特殊配置，web服务器需要做回退处理，否则会出现刷新页面404的问题。
在实现上 hash模式是监听hashchange事件触发路由跳转，history模式是监听popstate 事件触发路由跳转。
在 Vue 中 nextTick 是等待下一次 DOM 更新刷新的工具方法。
Vue 有一个异步更新策略，意思是如果数据变化，Vue 不会立刻更新 DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一时间循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在 DOM 上，此时如果想要获取更新后的 DOM 状态，就需要使用 nextTicknextTick 接受一个函数，我们可以在这个函数内部访问最新的 DOM 状态
在开发时，有两个场景我们会用到 nextTick ：
created 中想要获取 DOM;DOM 更新后的状态;nextTick 的原理：在 Vue 内部，nextTick 之所以能够让我们看到 DOM 更新后的结果，是因为我们传入的 callback 会被添加到队列刷新函数的后面，这样等队列内部的更新函数都执行完毕，所有 DOM 操作也就结束了，callback 自然能够获取最新的 DOM 值。
先回答答案：在 vue2 中， v-for 的优先级更高
但是在 vue3 中， v-if 的优先级更高
拓展：无论什么时候，我们都不应该把 v-for 和 v-if 放在一起，
怎么解决呢？一是可以定义一个计算属性，让 v-for 遍历计算属性。二是可以把 if 移到内部容器里（ul ol）或者把v-for移植外部容器(template)中
documentation vue2documentation vue3
watch
store.subscribe()
watch, vous pouvez écouter sous forme de chaîne $store.state.xx ; < Le paramètre de la méthode code>subscribe est une fonction de rappel. La fonction de rappel accepte les objets mutation et state, qui peuvent être déterminés par mutation. .type La cible à surveiller.
La méthode wtach est plus simple et plus facile à utiliser, tandis que subscribe est un peu plus lourde. Généralement, le plug-in vuex est utilisé (vous pouvez mentionner le plug-in de persistance vuex). dans vuex-persist , vuex-persistedstate)watch 方式，可以以字符串形式监听 $store.state.xx; subscribe 方法参数是一个回调函数，回调函数接受mutation 对象和 state 对象，可以通过 mutation.type 判断监听的目标。
wtach 方法更简单好用， subscribe 会略繁琐，一般用 vuex 插件中（可以提一下vuex的持久化插件vuex-persist、vuex-persistedstate）
不支持持久化，页面刷新状态就会丢失
使用模块比较繁琐
不支持 ts （或者说很不友好）
vue3 + pinia 会是更好的组合。
两者都能返回响应式对象，ref 返回的是一个响应式Ref 对象， reactive 返回的是响应式代理对象。
ref 通常是处理单值得响应式，reactive 用于处理对象类型的数据响应式
ref 需要通过 .value 访问， 在视图中会自动脱 ref，不需要 .value，ref 可以接收对象或数组但内部依然是 reactive 实现的；reactive 如果接收 Ref 对象会自动脱 ref ；使用展开运算符展开 reactive 返回的响应式对象会使其失去响应性，可以结合 toRefs()将值转换为 Ref 对象后再展开。
reactive 内部使用 Prxoy 代理拦截对象各种操作，而 ref 内部封装一个 RefImpl 类，设置 get value/set value，拦截用户对值得访问。
逻辑扩展：mixins、extends、composition api:
内容扩展：slots
mixins 很灵活，但是会冲突很混乱。extends 是一个不太常用的选项，更 mixins 的不同是它只能扩展单个对象，优先级比 mixins 高。
混入的数据和方法 不能明确判断来源 而且可能和当前组件内变量 产生命名冲突，composition api 可以很好解决这些问题，利用独立出来的响应式模块可以很方便的编写独立逻辑并提供响应式数据局，增强代码的可读性和维护性。
扩展：Vue.mixin（全局混入） Vue.extend（有点像是 类/组件的继承 创建一个子类）
vue-loader 是用于处理单文件组件（SFC）的webpack loader
因为有了 vue-loader，我们才能用 .vue 文件形式编写代码，将代码分割为 template script style
webpack 在打包的时候，会以 loader 的方式调用 vue-loader
vue-loader 被执行时，它会对 SFC 中的每个语言块用单独的 loader
ts (ou est très peu convivial)🎜🎜🎜 🎜vue3 + pinia serait une meilleure combinaison. 🎜🎜🎜14. Quelles sont les similitudes et les différences entre ref et reactive ?🎜🎜🎜🎜🎜Les deux peuvent renvoyer des objets réactifs, ref renvoie un objet Ref réactif, < code >reactive renvoie un objet proxy réactif. 🎜🎜🎜🎜ref est généralement utilisé pour gérer les données réactives à valeur unique, reactive est utilisé pour gérer les données de type objet réactives 🎜🎜🎜🎜ref requis Accessible via .value, ref sera automatiquement supprimé de la vue. .value n'est pas nécessaire. ref peut. recevoir des objets. Ou un tableau mais il est toujours implémenté en interne par reactive ; reactive supprimera automatiquement ref s'il reçoit un Ref<. Objet /code> ; utiliser l'expansion L'objet réactif renvoyé par l'opérateur expansion <code>reactive lui fera perdre sa réactivité. Il peut être combiné avec toRefs() pour convertir la valeur en un. Objet Ref puis Développer. 🎜🎜🎜🎜reactive utilise en interne le proxy Prxoy pour intercepter diverses opérations sur l'objet, tandis que ref encapsule en interne un RefImpl</ code> class , définissez <code>get value/set value pour intercepter l'accès des utilisateurs aux valeurs. 🎜🎜🎜🎜🎜16. Comment étendre un composant dans Vue ? 🎜🎜🎜🎜🎜Extensions logiques : mixins, extends, api de composition : 🎜🎜🎜🎜Extensions de contenu : slots🎜🎜🎜🎜mixins sont flexibles, mais contradictoires et déroutants. extends est une option moins couramment utilisée. La différence avec mixins est qu'elle ne peut étendre qu'un seul objet et a une priorité plus élevée que mixins. 🎜🎜Les données et méthodes mixtes 🎜ne peuvent pas déterminer clairement la source🎜 et peuvent provoquer des conflits de noms🎜 avec les variables du composant actuel🎜, API de composition
Ces problèmes peuvent être très bien résolus. Le module réactif indépendant peut être utilisé pour écrire facilement une logique indépendante et fournir des données réactives, ce qui améliore la lisibilité et la maintenabilité du code. 🎜🎜🎜Extensions : Vue.mixin (mixin global) Vue.extend (un peu comme l'héritage de classe/composant pour créer une sous-classe)🎜🎜🎜🎜17. 🎜🎜🎜🎜🎜vue-loader est un chargeur de webpack utilisé pour traiter les composants de fichier unique (SFC)🎜🎜🎜🎜Grâce à vue-loader, nous pouvons utiliser template script style🎜🎜🎜🎜 webpack< /code> Lors du packaging, <code>vue-loader sera appelé sous la forme de loader🎜🎜🎜🎜Lorsque vue-loader est exécuté , chaque bloc de langue dans SFC sera traité avec une chaîne loader distincte, et enfin ces blocs séparés seront assemblés dans le module de composant final🎜🎜🎜🎜🎜18. Un composant peut-il modifier les données du composant parent ? 🎜🎜🎜 ne peut pas être modifié directement. 🎜🎜Il existe un principe de flux de données à sens unique dans le développement de composants. Il est de bon sens de ne pas modifier les données du composant parent dans le composant enfant🎜🎜Si vous avez vraiment besoin de les modifier, veuillez envoyer un événement au composant parent. via émettre et modifier dans le composant parent🎜Nous pouvons utiliser un champ dynamique dans le chemin pour y parvenir, tel que /users/:id où :id est le paramètre de chemin.
Il peut être obtenu via this.$route.parmas, et il peut y avoir plusieurs paramètres. L'objet $route expose également d'autres informations utiles telles que query</. code> <code>hachage etc. /users/:id 其中 :id 就是路径参数。
可以通过 this.$route.parmas获取，参数还可以有多个， $route 对象还公开了其他有用的信息如 query hash等。
思路：
什么是响应式？
为什么vue需要响应式？
有什么好处？
vue的响应式怎么实现的，有哪些优缺点？
vue3中的响应式的新变化
回答：
数据响应式就是 能够监测到数据变化并且做出响应的一种机制
在 vue 中要解决的一个核心问题就是连接数据层和视图层，通过数据变化驱动视图更新，要做到这点就需要对数据做响应式处理。
通过数据响应式加上虚拟 DOM 和 patch 算法，我们只需要操作数据，关心业务，完全不需要接触繁琐的 DOM 操作，打打提升了开发效率，降低开发难度。
vue2 中实现数据响应式的核心就是通过 Object.defineProperty() 方法对数据进行拦截，当 get 数据时做依赖收集 set 数据时做更新通知。这种机制很好的及绝了数据响应式的问题，但是实际使用也存在缺点，比如在初始化时的递归遍历会造成性能损失;无法监听新增或删除属性，在 vue 中要通过像 Vue.set/delete 这种特定的 API 才能实现对对象数组属性的添加和删除，而且也不支持 Ma、Set这些数据结构，
为了解决这些问题，Vue3 重写了这部分实现，利用的是 ES6 中的 Proxy 代理要响应化的数据。它有很多好处，初始化性能和内存都大幅改善，也不需要特殊的 API ，但是不支持 IE 浏览器。
问 template 到 render 的过程其实是问的 vue 编译器 工作原理。
思路：
引入编译器概念
说明编译器的必要性
阐述编译器工作流程
回答：
Vue 中有个独特的编译模块，称为 compiler，它的主要作用是将 template 编译为 js 可执行的 render 函数
之所以需要这个编译过程是为了便于我们高校的编写试图模版。相比而言，我们还是更愿意用 HTML来编写视图，直观且高效。手写 render 函数不仅效率低下，而且失去了被编译器的优化能力。
Vue 编译器 首先会对 template进行解析（ Parse ），结束后会得到一个抽象语法树AST，然后对 AST 进行深加工转换（transform），最后将得到的 AST 生成为 js 代码，也就是 render 函数
缓存组件可以使用 keep-alive 组件，include 和 exclude 可以指定包含不包含哪些组件。
Vue3 结合 vue-router 使用变化非常大，之前是 keep-alive 包含 router-view，现在是 router-view 包含 keep-alive
缓存后如果想要获取数据可以使用 actived 钩子 或者 beforeRouteEnter（ vue-router 的一个守卫）
keep-alive 是一个通用组件，它内部定义了一个 map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的 component 组件对应组件的 vnode，如果改组件在map中存在就直接返回它。由于 component 的 is 属性是一个响应式数据，因此只要它变化，keep-alive 的 render
vue est de connecter la couche de données et la couche de vue, en pilotant les mises à jour des vues via modifications des données. Pour y parvenir, les données doivent être traitées de manière réactive. 🎜DOM et patch, nous n'avons besoin que d'exploiter les données et de nous soucier de notre activité, sans avoir à gérer des tâches fastidieuses. tâches lors de toutes les opérations DOM, DaDa améliore l'efficacité du développement et réduit les difficultés de développement. 🎜vue2 est d'intercepter les données via la méthode Object.defineProperty() When get<. Lorsque les données /code> sont collectées, les dépendances sont collectées et lorsque les données <code>set sont utilisées, une notification de mise à jour est effectuée. Ce mécanisme est très efficace pour résoudre le problème de la réactivité des données, mais il existe également des lacunes dans l'utilisation réelle. Par exemple, le parcours récursif lors de l'initialisation entraînera une perte de performances🎜 ; , vous devez utiliser une API spécifique comme Vue.set/delete pour ajouter et supprimer des attributs de tableau d'objets, et elle ne prend pas en charge Ma< /code>, <code>Définir ces structures de données, 🎜Vue3 a réécrit cette partie de l'implémentation, en utilisant It is les données auxquelles le proxy Proxy dans ES6 doit répondre. Il présente de nombreux avantages, les performances d'initialisation et la mémoire sont grandement améliorées, et aucune API spéciale n'est requise, mais elle ne prend pas en charge le navigateur IE. 🎜modèle au rendu revient en fait à poser des questions sur le processus. vue Comment fonctionne le compilateur. 🎜🎜🎜Idée :🎜🎜Vue</code > Il existe un module de compilation unique appelé <code>compilateur. Sa fonction principale est de compiler le template en js exécutable Le rendu. function🎜HTML pour écrire des vues, ce qui est intuitif et efficace. L'écriture manuscrite de la fonction render est non seulement inefficace, mais perd également la capacité d'être optimisée par le compilateur. 🎜Vue Le compilateur analysera d'abord le template ( Parse ), puis obtiendra un arbre de syntaxe abstraite < code>AST, puis effectuez une conversion de traitement en profondeur (transform) sur AST, et enfin générez le AST résultant en js, c'est-à-dire la fonction render🎜keep-alive, et l'inclusion et l'exclusion peuvent spécifier les composants à inclure et à exclure. 🎜Vue3 combiné avec vue-router a beaucoup changé auparavant, keep-alive incluait . router -view, maintenant router-view contient keep-alive🎜actived ou beforeRouteEnter (un garde de vue-router) 🎜keep-alive< /code> C'est un composant général. Il définit une <code>map en interne et met en cache les instances de composant créées. La fonction de rendu qu'il renvoie recherchera en interne le composant component correspondant au. composant component intégré. code>vnode, si le composant existe dans la carte, renvoyez-le directement. Puisque l'attribut is de component est une donnée réactive, tant qu'elle change, la fonction render de keep-alive</ code> sera à nouveau exécuté. 🎜</li></ul><h2><strong>23. Le DOM virtuel</strong></h2><ul style="list-style-type: disc;"><li><p>Qu'est-ce que le <code>DOM virtuel ?
L'essence du DOM virtuel est un objet Javascript. DOM 是什么？
虚拟 DOM 的本质就是一个 Javascript 对象。为什么要引入虚拟 DOM？（好处）
它能有效减少操作 DOM 的次数，方便实现跨平台
虚拟DOM如何生成？compiler 编译器会把 template 模版编译成渲染函数，接下来在 mount 挂载的过程会调用这个渲染函数，返回的对象就是 虚拟DOM 。挂载结束后，会进入更新流程。如果某些响应式数据发生变化，将会引起组件重新 render，此时会生成新的 虚拟DOM，和上次渲染结果做 diff 操作，最小量的操作 dom，从而高效更新视图。
异步组件就是不会立即加载而是会在需要的时候加载的组件。在大型应用中，我们需要分割代码为更小的块试就可以用异步组件。
不仅可以在路由切换时懒加载组件，还可以在组件中使用异步组件，从而更细的分割代码。
使用异步组件最简单的方式是直接给 defineAsyncComponet 指定一个 loader 函数，结合 ES 模块 动态导入函数 import 可以快速实现。Vue3 还可以结合 Suspense 组件使用异步组件。
异步组件容易和路由懒加载混淆，实际上不是一个东西。异步组件不能被用于定义懒加载路由上，处理它的是 Vue 框架，处理路由组件加载的是 vue-router。但是可以在懒加载的路由组件中使用异步组件。
v-once方式只渲染一次懒加载 方式，在用户需要的时候在加载数据。computed 是计算属性，watch 是侦听器。
computed 通常用于处理模版中复杂的逻辑,而 watch 通常用于需要监听一个响应式对象的变化而做一些操作的时候
watch 可以进行异步操作，computed 不行。
计算属性传递一个对象 有 set 和 get 两个选项，是它称为即可读又可写的计算属性，如果传递的是函数的话默认就是 get 选项，watch 可以传递一个对象，设置deep、immediate等选项
vue3 中 watch 发生了一些变化，例如不能再侦测一个点操符之外的字符串表达式，reactivity API 中新出的 watch、watchEffect 可以完全替代 watch 选项，而且功能更加强大
SPA（Single Page Application）是单页面应用。一般也称为客户端渲染，简称 CSR 。SSR（Server Side Render） 即服务端渲染。一般也称为多页面应用（Mulpile Page Application），简称 MPA。
SPA 只会首次请求 html 文件，后续只需要请求 JSON 数据即可，因此用户体验更好，节约流量，服务端压力也较小。但是首屏加载的时间会变长，而且 SEO 不友好。为了解决以上缺点，就有了 SSR 方案，由于 HTML 内容在服务器一次性生成出来，首屏加载快，搜索引擎也可以很方便的抓取页面信息。但同时 SSR 方案也会有性能，开发受限等问题。
选择上，如果有首屏加载优化需求，SEO需求时，就可以考虑SSR。
但并不是只有这一种替代方案，比如对一些不常变化的静态网站，SSR反而浪费资源，我们可以考虑预渲染的方案。另外 nuxt.js/next.js
DOM virtuel ? (avantage)
Il peut réduire efficacement le nombre d'opérations sur DOM et faciliter la mise en œuvre multiplateforme. Comment générer du DOM virtuel ? compilateur Le compilateur compilera le modèle template dans une fonction de rendu Ensuite, pendant le processus de montage de mount, cette fonction de rendu sera appelée et. l'objet renvoyé Il s'agit du Virtual DOM. Une fois le montage terminé, le processus de mise à jour entrera. Si certaines données réactives changent, le composant sera à nouveau render. À ce moment, un nouveau DOM virtuel sera généré et diff< sera généré. effectué avec le dernier résultat de rendu /code> opération, la quantité minimale d'opération <code>dom, afin de mettre à jour efficacement la vue. 🎜🎜🎜🎜🎜24. Qu'est-ce qu'un composant asynchrone ? 🎜🎜🎜🎜🎜Les composants asynchrones sont des composants qui ne sont pas chargés immédiatement mais qui le seront en cas de besoin. Dans les grandes applications, nous devons diviser le code en morceaux plus petits et utiliser des composants asynchrones. 🎜🎜🎜🎜Non seulement vous pouvez charger paresseusement des composants lorsque le routage est commuté, mais vous pouvez également utiliser des composants asynchrones dans les composants pour diviser le code plus finement. 🎜🎜🎜🎜Le moyen le plus simple d'utiliser des composants asynchrones est d'attribuer directement une fonction loader à defineAsyncComponet, et de la combiner avec la fonction d'importation dynamique du module ES import< /code> pour accomplir rapidement. <code>Vue3 peut également utiliser des composants asynchrones en conjonction avec le composant Suspense. 🎜🎜🎜🎜Les composants asynchrones se confondent facilement avec le chargement paresseux des routes, qui ne sont en fait pas la même chose. Les composants asynchrones ne peuvent pas être utilisés pour définir des routes de chargement différé. Il est géré par le framework Vue, et c'est vue-router qui gère le chargement des composants de routage. Mais vous pouvez utiliser des composants asynchrones dans des composants de routage chargés paresseusement. 🎜🎜🎜🎜🎜25. Parlons des idées d'optimisation de longues listes Vue 🎜🎜v-once pour effectuer un rendu une seule fois🎜🎜Optimiser les mises à jour : mettre en cache les numéros de groupe via v-memo, mettre à jour sous condition, améliorer utilisation et évitez les mises à jour inutiles🎜🎜Charger les données à la demande : vous pouvez utiliser la méthode de chargement paresseux pour charger les données lorsque l'utilisateur en a besoin. 🎜🎜🎜🎜26. calculated & watch🎜🎜🎜🎜🎜calculed est une propriété calculée et watch est un auditeur. 🎜🎜🎜🎜calculé est généralement utilisé pour gérer une logique complexe dans les modèles, tandis que watch est généralement utilisé lorsque vous devez surveiller les modifications dans un objet réactif et effectuer certaines opérations🎜🎜 🎜🎜watch peut effectuer des opérations asynchrones, mais calculed ne le peut pas. 🎜🎜🎜🎜Les propriétés calculées transmettent un objet avec deux options : set et get, qui sont appelées propriétés calculées lisibles et inscriptibles. Si une fonction est passée, la valeur par défaut est <. code>get. watch peut transmettre un objet et définir des options telles que profonde et immédiate.vue3 Dans watch< /code. > a subi quelques changements, par exemple, il ne peut plus détecter les expressions de chaîne autres que les opérateurs point, et les nouveaux <code>watch et dans l'<code>API de réactivité watchEffect peut remplacer complètement l'option watch et est plus puissante🎜🎜🎜🎜🎜27 Quelle est la différence entre SPA et SSR ? 🎜🎜🎜🎜🎜SPA (Application à page unique) est une 🎜Application à page unique🎜. Il est aussi généralement appelé 🎜rendu côté client🎜, ou CSR en abrégé. SSR (Server Side Render) signifie 🎜Server Side Rendering🎜. Elle est aussi généralement appelée 🎜Multiple Page Application🎜 (Mulpile Page Application), ou MPA en abrégé. 🎜🎜🎜🎜SPA ne demandera le fichier html que pour la première fois. Les requêtes suivantes ne nécessiteront que des données JSON, l'expérience utilisateur est donc améliorée. mieux et le trafic est économisé, la pression sur le serveur est également moindre. Mais le temps de chargement du premier écran deviendra plus long et ce n'est pas convivial pour le SEO. Afin de résoudre les défauts ci-dessus, il existe la solution SSR Puisque le contenu HTML est généré une fois sur le serveur, le premier écran se charge rapidement, et les moteurs de recherche peuvent également le faire. explorez facilement les informations de la page. Mais en même temps, la solution SSR aura également des problèmes tels que des performances et un développement limité. 🎜🎜🎜🎜En terme de sélection, si vous avez des besoins d'optimisation du chargement du premier écran ou des besoins SEO, vous pouvez envisager le SSR. 🎜🎜🎜🎜Mais ce n'est pas la seule alternative. Par exemple, pour certains sites Web statiques qui ne changent pas fréquemment, SSR gaspille des ressources. De plus, nuxt.js/next.js nous fournit la solution de génération de sites Web statiques SSG, qui est également une bonne solution de sites Web statiques, combinée à certaines méthodes CI, elle peut obtenir un bon effet d'optimisation. 🎜回答思路：
diff算法是干什么的？
必要性
何时执行
具体执行方式
拔高：说一下vue3中的优化
回答：
Vue 中的 diff 算法称为 patching 算法，虚拟DOM要想转化为真实DOM就需要通过 patch 方法转换。
最初 Vue1.x 视图中农每个依赖均有更新函数对应，可以做到精确更新，因此不需要 虚拟DOM 和 patching 算法支持，但是这样粒度过细导致 Vue1.x 无法承载较大应用；Vue2.x 中为了降低 Watcher 粒度，每个组件只有一个 Watcher 与之对应，此时就需要引入 patching 算法才能精确找到发生变化的地方并高效更新。
vue 中 diff 执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行 render函数 获得最新的 虚拟DOM ，然后执行 patch函数，对比新旧虚拟DOM，将其转化为对应的 DOM 操作。
patch 过程是一个递归过程，遵循深度优先、同层比较的策略；以 vue3 的patch 为例：
vue3 中引入的更新策略：编译期优化 patchFlags、block等
从 0 创建项目我大致会做以下事情：项目构建、引入必要插件、代码规范、提交规范、常用库和组件
目前vue3项目我会用vite或者create-vue创建项目
接下来引入必要插件：vue-router、vuex/pinia、element-plus、antd-vue、axios等等
其他常用的库有 像lodash、dayjs、nprogress等等..
下面是代码规范: editorconfig、prettier、eslint
最后是提交规范，可以使用husky、Commitizen
目录结构我喜欢按照下面的结构来
+ |- /src + |- /assets 存放资源 + |- /img + |- /css + |- /font + |- /data + |- base-ui 存放多个项目中都会用到的公共组件 + |- components 存放这个项目用到的公共组件 + |- hooks 存放自定义hook + |- views 视图 + |- store 状态管理 + |- router 路由 + |- service 网络请求 + |- utils 工具 + |- global 全局注册、全局常量..
一个 SPA 应用的路由需要解决的问题时页面跳转内容改变同时不刷新，同时路由还需要已插件形式存在，所以：
首先我会定义一个 createRouter 函数，返回路由器实例，实例内部做几件事；
hash 或者 popstate 事件path 匹配对应路由将 router 定义成一个 Vue 插件，即实现 install 方法，内部做两件事：
router-link和 router-view，分别实现页面跳转和内容显示$router 和 $route，组件内可以访问当前路由和路由器实例在项目规模变大的之后，单独一个store对象会过于庞大臃肿，此时通过模块方式可以拆分来便于维护
可以按之前规则单独编写资规模代码，然后在主文件中通过 modules 选项组织起来：createStore({modules: {...}})
Lors de son utilisation, veuillez noter que vous devez ajouter le nom du module enregistré lors de l'accès au statut du sous-module. Mais en même temps, les getters, les mutations et les actions sont dans l'espace global et peuvent être utilisés de la même manière qu'avant. Si vous souhaitez réaliser un fractionnement complet, vous devez ajouter l'option namespace aux sous-modules. À ce stade, vous devez ajouter le préfixe d'espace de noms lorsque vous y accédez. getters、mutations和 actions又在全局空间中，使用方式和之前一样。如果要做到完全拆分，需要在子模块加上 namespace选项，此时再访问它们就要加上命名空间前缀。
模块的方式可以拆分代码，但是缺点也很明显，使用起来比较繁琐，容易出错，而且类型系统支持很差，不能给我们带来帮助。pinia 显然在这方面有了很大改进，是时候切换过去了。
vue2 中组件确实只能有一个跟，但 vue3 中组件已经可以多根组件了。
之所以需要这样是因为 vdom 是一颗单根树形结构，patch 方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也会转换为一个 vdom，自然应该满足这个要求。
vue3 中之所以可以写多个根节点，是因为引入了 Fragment 的概念，这是一个抽象的节点，如果发现组件时多根的，就创建一个 Fragment 节点，把多个根节点作为它的 children。将来 pathch 的时候，如果发现是一个 Fragment 节点，则直接遍历 children 创建或更新。
v-once 是 vue 的内置指令，作用是仅渲染指定组件或元素一次，并跳过未来对其更新。
如果我们有一些元素或者组件再初始化渲染之后不再需要变化，这种情况下适合使用 v-once，这样哪怕这些数据变化，vue 也会跳过更新，是一种代码优化手段。
我们只需要作用的组件或元素上加上 v-once 即可。
补充：
vue3.2 之后，又增加了 v-memo，这个指令可以有条件的缓存模板并控制他们的更新。
v-once 的原理：编译器发现有 v-once 时，会将首次计算结果存入缓存对象，组件再次渲染时就会从缓存获取，从而避免再次计算。
url 各部分通常对应某个嵌套的组件，vue-router 中可以使用嵌套路由表示这种关系。view-router，从而形成物理上的嵌套，和逻辑上的嵌套对应起来。定义嵌套路由时使用 children 属性组织嵌套关系router-view 组件内部判断其所处嵌套的深度，将这个深度作为匹配组件数组 matched 的索引，获取对应渲染组件并渲染之。如果你说不出来，可以直接举例子。当我开发一个页面时，如果需要显示一个顶部导航栏，通过导航栏跳转到不同的页面，而顶部的导航栏又必须要在每个页面显示时，就可以使用嵌套路由；还可以举例，当我需要查看某个列表的详情页面时，往往需要嵌套路由 （detail/:id）
watch
store.subscribe()
watch 方式，可以以字符串形式监听 $store.state.xx; subscribe 方法参数是一个回调函数，回调函数接受mutation 对象和 state 对象，可以通过 mutation.type 判断监听的目标。
wtach 方法更简单好用， subscribe
vue2 ne peut en effet avoir qu'un seul nœud racine ? code > Les composants Medium peuvent déjà avoir plusieurs composants racine. La raison pour laquelle cela est nécessaire est que vdom est une structure arborescente à racine unique. La méthode patch démarre à partir du nœud racine lors du parcours, et elle ne nécessite que un nœud racine. Le composant sera également converti en un vdom, qui devrait naturellement répondre à cette exigence.
vue3 est parce que le concept de Fragment est introduit. Il s'agit d'un nœud abstrait si un composant est trouvé avec. plusieurs racines, créez un nœud Fragment et utilisez plusieurs nœuds racines comme enfants. Dans le futur pathch, s'il s'avère qu'il s'agit d'un nœud Fragment, il traversera directement les enfants pour créer ou mettre à jour.
v-once est une instruction intégrée de vue, qui ne restitue le composant ou l'élément spécifié qu'une seule fois et ignore les futures mises à jour. 🎜🎜🎜🎜Si nous avons des éléments ou des composants qui n'ont plus besoin d'être modifiés après le rendu initial, dans ce cas, il convient d'utiliser v-once, de sorte que même si ces données changent, vue Il ignorera également les mises à jour, qui sont une méthode d'optimisation du code. 🎜🎜🎜🎜Il suffit d'ajouter v-once au composant ou à l'élément utilisé. 🎜🎜🎜Ajouté : 🎜🎜🎜🎜vue3.2 Après cela, v-memo a été ajouté. Cette directive peut mettre en cache les modèles de manière conditionnelle et les contrôler lors des mises à jour. . 🎜🎜🎜🎜Le principe du v-once : Lorsque le compilateur constate qu'il y a v-once, il stockera le premier résultat du calcul dans l'objet cache, et lorsque le composant est à nouveau rendu, il proviendra des récupérations du cache pour éviter un recalcul. 🎜🎜🎜🎜34. Dans quels scénarios le routage imbriqué est-il utilisé ? 🎜🎜vue-router pour exprimer cette relation. 🎜🎜L'expression est que lors du basculement entre deux itinéraires, ils ont un contenu de vue commun. A ce moment, un composant parent est généralement extrait et view-router est placé à l'intérieur, formant ainsi une imbrication physique qui correspond à l'imbrication logique. Lors de la définition de routes imbriquées, utilisez l'attribut children pour organiser la relation imbriquée. En principe, la profondeur d'imbrication est déterminée à l'intérieur du composant router-view, et cette profondeur est utilisée. en tant qu'index du tableau de composants correspondant matched, obtenez le composant de rendu correspondant et restituez-le. 🎜detail/:id) 🎜🎜🎜🎜35 Comment surveiller les changements de statut de Vuex ? 🎜🎜🎜🎜🎜watch🎜🎜🎜🎜store.subscribe()🎜🎜🎜watch, vous pouvez surveiller $store.state.xxsous la forme of string >; Le paramètre de méthode subscribe est une fonction de rappel. La fonction de rappel accepte les objets mutation et les objets state, qui peuvent être transmis à Cette étape du mécanisme de mise à jour de reprise exécutera immédiatement une fonction de mise à jour des composants, qui exécutera la fonction de rendu pour la première fois et exécutera le patch pour convertir le vnode obtenu précédemment. > into dom; En même temps, il 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 à l'avenir. <code>patch 将前面获得vnode 转换为 dom；同时会创建它内部响应式数据和组件更新函数之间的依赖关系，这使得以后数据变化时会执行对应的更新函数。
key 的作用主要是为了更高效的更新虚拟 DOM 。
key 是 vue 在 patch 过程中判断两个节点是否是相同节点的关键条件（另一个是元素类型），如果不设置 key，它的值就是 undefined，vue 则可能永远认为这是两个相同节点，只能去做更新操作，这造成了大量的 dom 更新操作，明显是不可取的。
实际使用的过程中必须设置 key，而且应该尽量避免使用数组索引，这可能导致一些隐藏 bug。
watchEffect立即运行函数，被动地追踪它的依赖，传入的函数即是依赖收集的数据源，也是回调函数；watch 侦测一个或多个响应式数据源，在数据源变化时调用一个回调函数，通过 immediate 选项也可以设置立即执行一次。
watchEffect是一种特殊的 watch。如果不关心响应式数据前后的值，可以使用 watchEffect。其他情况都可以用 watch。
parent created -> child created -> child mounted -> parent mounted
原因：Vue 创建是一个递归的过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件首次创建时会添加 Mounted 钩子到队列，等到 patch 结束再执行它们，可见子组件的 mounted 钩子是选进入到队列中的，因此等到 patch 结束执行这些钩子时也先执行。
vuex是一个专门为vue应用开发的状态管理模式库，
当你遇到多个组件共享状态时或者项目中的组件难以管理的时候就可以使用vuex，它以一个全局单例模式管理全局的状态。
基本核心概念有 state、mutation、action、getters、module等
说些使用过程的感受 ts不友好 模块使用繁琐 页面刷新数据也会消失
如果某个组件通过组件名称引用它自己，这种情况就是递归组件。
类似 Tree、Menu 这类组件，它们的节点往往包含子节点，子节点结构和父节点往往是相同的。这类组件的数据往往也是树形结构，这种都是使用递归组件的典型场景。
使用自定义指令分为定义、注册、和使用
定义有两种方式，对象和函数形式，前者类似组件定义，有各种生命周期；后者只会在 mounted 和 updated 时执行
注册：可以使用 app.directive 全局注册 也可以通过选项局部注册
使用时在注册名称前加上 v-即可。
v-copy 复制粘贴
v-lazy 图片懒加载
v-debounce 防抖
v-permission 按钮权限
v-longpress 长按
API 层面
Composition API
setup 语法糖
Teleport 传送门
Fragments 可以多个根节点
Emits
createRenderer 自定义渲染器
SFC 状态驱动 css 变量 (v-bind in <style>
key est principalement pour une mise à jour plus efficace du DOM virtuel. 🎜🎜🎜key est la condition clé pour vue pour déterminer si deux nœuds sont le même nœud pendant le processus patch (l'autre est le type d'élément), si key n'est pas défini, sa valeur est undefined, vue peut toujours penser qu'il s'agit de deux nœuds identiques, et ne peut que opération de mise à jour, qui entraîne un grand nombre d'opérations de mise à jour dom, ce qui est évidemment indésirable. 🎜🎜🎜🎜key doit être définie lors de l'utilisation réelle, et l'indexation des tableaux doit être évitée autant que possible, ce qui peut conduire à des bugs cachés. 🎜🎜🎜watchEffectExécutez la fonction immédiatement et suivez-la passivement. dépendance, la fonction transmise dépend de la source de données collectée et est également une fonction de rappel ; watch détecte une ou plusieurs sources de données réactives et appelle une fonction de rappel lorsque la source de données change, via L'option immédiate peut également être configurée pour s'exécuter immédiatement. 🎜🎜🎜🎜watchEffect est une montre spéciale. Si vous ne vous souciez pas des valeurs avant et après les données réactives, vous pouvez utiliser watchEffect. watch peut être utilisé dans d'autres situations. 🎜🎜🎜Vue code > La création est un processus récursif, 🎜créez d'abord le composant parent🎜, et 🎜créez le composant enfant s'il a un composant enfant🎜, donc lors de la création, il y a d'abord le composant parent puis le composant enfant quand le composant enfant ; est créé pour la première fois, les hooks <code>Mountedpatch avant de les exécuter. On peut voir que le Mountedcode> le hook du sous-composant est 🎜sélectionné dans la file d'attente🎜, alors attendez que le <code>patch soit également exécuté en premier une fois l'exécution de ces hooks terminée. 🎜Tree et Menu, leurs nœuds contiennent souvent des nœuds enfants et la structure du nœud enfant est souvent la même que celle du nœud parent. Les données de ces composants se trouvent souvent dans une structure arborescente, ce qui constitue un scénario typique d'utilisation de composants récursifs. 🎜🎜🎜monté et mis à jour 🎜🎜🎜🎜Inscription : vous pouvez utiliser app .directive code> L'enregistrement global peut également être enregistré localement via l'option 🎜🎜🎜🎜Lors de son utilisation, ajoutez simplement v- avant le nom d'enregistrement. 🎜🎜🎜🎜<code>v-copy Copier et coller🎜🎜🎜🎜v-lazy Chargement paresseux de l'image🎜🎜🎜🎜v-debounce Anti- shake🎜 🎜🎜🎜v-permission autorisation du bouton🎜🎜🎜🎜v-longpress appui long🎜🎜🎜API de composition🎜🎜🎜🎜setup Syntaxe sugar🎜🎜🎜🎜 Le portail Téléportation🎜🎜🎜🎜Fragments peut avoir plusieurs nœuds racines🎜🎜🎜🎜Émissions 🎜🎜🎜🎜createRenderer depuis Définir le moteur de rendu 🎜🎜🎜🎜SFC variable css pilotée par l'état (v-bind dans <style>)🎜🎜🎜🎜🎜Dans De plus, Vue3 présente également de nombreuses améliorations au niveau du framework🎜🎜DOM
DOM 重写patchFlags、block 等Proxy 的响应式系统最大设计目标就是替代 Vue2，为了实现这一点，Vue3 在以下几个方面做了很大改进，如：易用性，框架性能、扩展性、可维护性、开发体验等
易用性方面：主要有 API 简化 v-model 变成了 v-model 和 sync 修饰符的结合体。类似的还有 h(type,props,children) 函数中的 props 不用考虑区分属性、特性、事件等，框架替我们判断，易用性增。
开发体验方面：新组建 Teleport Fragment Suspense 等都会简化特定场景的代码编写。 setup 语法糖更是极大提升了我们的开发体验。
扩展性方面提升： 如独独立的 reactivity 模块，custom render API等
可维护性方面主要是 Composition API，更容易编写高复用性的业务逻辑。还有对TS支持的提升。
性能方面：编译器优化、基于 Proxy 的响应式系统。
。。。
代码方面：全新的响应式API，基于 Proxy 实现，初始化事件和内存占用均大幅改进；
编译方面：做了更多编译优化处理，比如静态提升、动态内容标记、事件缓存、区块等，可以有效跳过大量diff过程
打包方面：更好的支持 tree-shaking ，因此体积更小，加载更快.（因为vue3 所有的API都通过ES6模块化的方式引入，这样就能让webpack或rollup等打包工具在打包时对没有用到API进行剔除，最小化bundle体积）
$attrs 和 $listeners 是做什么的？$attrs 获取没有在 props 中定义的属性，v-bind="$attrs" 可以用于属性透传$listeners 用于获取事件，vue3 中已经移除合并到 attrs 中，使用起来更方便
Composition API 是一组API，包括 Reactivity API、生命钩子、依赖注入，使用户可以通过导入函数方式编写组件，而 Options API 则通过声明组件选项的对象形式编写组件。
Composition API 更简洁、逻辑复用更高效。解决的过去 Options API 中 mixins 的各种缺点（会冲突很混乱）；另外 Composition API 更自由，没有 Options API 那样固定的写法，并且可以更有效的将逻辑代码组织在一起，而不用东一块西一块搞得很混乱，最后 Composition API 拥有更好的类型推断，对 ts 支持友好。
编码风格方面：
组件命名时使用 多词风格避免和html元素冲突
属性名峰命名，模板或jsx中使用 肉串命名
v-for 务必加上key 且不要和v-if写在一起‘’
性能方面：
路由懒加载减少应用尺寸
SSR 减少首屏加载事件
v-once v-memo
长列表 虚拟滚动技术
对于深层嵌套对象的大数据可以使用 shallowRef 或 shallowReactive 降低开销
避免不必要的组件抽象
mutation 用于修改 stateaction 用于提交一个 mutation，而且 action 可以包含异步操作
要实现一个 Store 存储全局状态
要提供修改状态所需的API：commit({type, payload}), dispatch(type,payload)Optimisation du compilateur : promotion statique, patchFlags, bloc, etc.
Proxy
Le plus grand objectif de conception est de remplacer Vue2 Pour y parvenir, Vue3 a fait beaucoup dans les aspects suivants. Améliorations majeures, telles que : facilité d'utilisation, performances du framework, évolutivité, maintenabilité, expérience de développement, etc.🎜
En termes de facilité d'utilisation : principalementAPI code> simplifie v-model en une combinaison de modificateurs v-model et sync. De même, il y a des props dans la fonction h(type,props,children). Il n'est pas nécessaire d'envisager de distinguer les attributs, les caractéristiques, les événements, etc., comme le fait le framework. le jugement pour nous, ce qui augmente la facilité d'utilisation. 🎜🎜
En termes d'expérience de développement : de nouveaux composants tels que Teleport Fragment Suspense simplifieront l'écriture de code pour des scénarios spécifiques . setup Le sucre syntaxique a grandement amélioré notre expérience de développement. 🎜🎜
Évolutivité améliorée : telle qu'un module de réactivité indépendant, une API de rendu personnalisée, etc. 🎜🎜
Maintenable en termes de fonctionnalités, il s'agit principalement de l'API de composition, qui facilite l'écriture d'une logique métier hautement réutilisable. Il y a également des améliorations dans la prise en charge de TS. 🎜🎜
Performance : Optimisation du compilateur, système réactif basé sur Proxy. 🎜🎜
. . . 🎜
Aspect code : toute nouvelle API réactive, basée sur l'implémentation du Proxy, les événements d'initialisation et L'utilisation de la mémoire a été grandement améliorée ; 🎜🎜
En termes de compilation : davantage d'optimisations de compilation ont été effectuées, telles que la promotion statique, le balisage de contenu dynamique, la mise en cache des événements, les blocs, etc., qui peuvent efficacement ignorer un grand nombre de processus de comparaison🎜🎜
En termes de packaging : meilleure prise en charge du tree-shaking, donc la taille est plus petite et le chargement est plus rapide (Car toutes les API. de vue3 sont modularisés via l'introduction d'ES6, afin que les outils de packaging tels que webpack ou rollup puissent éliminer les API inutilisées lors du packaging et minimiser la taille du bundle)🎜
$listeners ? $attrs Récupère les attributs non définis dans props, v-bind="$attrs" > Peut être utilisé pour la transmission transparente d'attribut $listeners pour obtenir des événements. vue3 a été supprimé et fusionné dans attrs, ce qui le rend plus pratique à utiliser🎜.
API de composition est un ensemble d'API, comprenant l'API de réactivité, des hooks de vie et l'injection de dépendances, permettant aux utilisateurs d'écrire en important fonctions Composants, et l'API Options écrit des composants en déclarant leurs options en tant qu'objets. 🎜
API de composition est plus concise et la réutilisation logique est plus efficace. Il résout les diverses lacunes des mixins dans le passé Options API (conflits et confusions) ; L'API Options a une méthode d'écriture fixe et peut organiser le code logique plus efficacement, au lieu de le rendre confus en un seul morceau ici et là. Enfin, l'API de composition a. meilleure inférence de type. Compatible avec le support ts. 🎜
Style de codage :🎜
Utilisez un style multi-mots lorsque vous nommez les composants pour éviter les conflits avec les éléments HTML🎜🎜
Nommez les attributs des pics, utilisez des brochettes de viande dans les modèles ou jsx pour les nommer🎜🎜
v-for doit ajouter une clé et ne pas l'écrire avec v-if''🎜
Performance :🎜
Le chargement paresseux de routage réduit la taille de l'application🎜🎜
SSR Réduit les événements de chargement du premier écran🎜🎜
v-once
v-memo🎜🎜Technologie de défilement virtuel à longue liste🎜🎜
Peut être utilisé pour le Big Data avec des objets imbriqués Utilisez shallowRef ou shallowReactive pour réduire les frais généraux🎜🎜
Évitez l'abstraction inutile des composants🎜
mutation est utilisé pour modifier l'étataction est utilisé pour soumettre une mutation code> et <code>action peuvent contenir des opérations asynchrones🎜
Pour implémenter un Store pour stocker l'état global🎜🎜
Pour fournir l'API requise pour modifier l'état : commit({type, charge utile}) code>, <code>dispatch(type,charge utile)🎜
Implémentez Store, vous pouvez définir la classe Store, le constructeur accepte les options options et définit l'attribut state code> pour être exposé au monde extérieur Statut, fournissant les propriétés de modification <code>commit et dispatch. Ici, vous devez définir state comme objet réactif et définir Store comme plug-in Vue (méthode d'installation). Store，可以定义 Store 类，构造函数接受选项 options，设置属性 state 对外暴露状态，提供 commit 和 dispatch 修改属性。这里需要设置 state 为响应式对象，同时将 Store 定义为一个 Vue 插件(install方法)。
commit 可以获取用户传入 mutations 并执行它，这样可以按用户提供的方法修改状态，dispatch 类似，但是 dispatch 需要返回一个 Promise
commit peut récupérer les mutations transmises par l'utilisateur et les exécuter, afin que le statut puisse être modifié selon la méthode fournie par l'utilisateur dispatch. est similaire, mais dispatch doit renvoyer une Promesse à l'utilisateur pour le traitement des résultats asynchrones. (Partage de vidéos d'apprentissage : Tutoriel d'introduction à vuejs, Vidéo de programmation de base
)🎜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!
Pourquoi vue.js signale-t-il une erreur ?
Quelles sont les utilisations des slots vue.js ?
Comment sauter avec des paramètres dans vue.js
Comment définir le chinois dans vscode
Comment résoudre le problème que localhost ne peut pas être ouvert
Quels sont les quatre principaux modèles d'E/S en Java ?
Suffixe du nom du fichier de modification par lots Linux
Comment MySQL et Redis assurent-ils la cohérence des doubles écritures ?
![Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![Combat réel Front-end Vue3 [projet vue manuscrit]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
