[Compilation et résumé] 20 questions d'entretien Vue à haute fréquence

En tant que programmeur, si vous souhaitez trouver votre travail préféré, on vous demandera inévitablement de nombreux essais en huit parties. Même si certains d'entre eux n'ont rien à voir avec le travail, vous devez quand même le faire si vous le souhaitez. je veux passer l'entretien. J'ai donc récemment commencé à résumer certaines questions d'entretien, d'une part pour renforcer ma compréhension et trouver un bon emploi, et d'autre part pour aider autant d'amis que possible à maîtriser rapidement les connaissances pertinentes ou à réussir l'entretien ?

Cet article présente quelques problèmes courants avec vue. J'essaie de classer ces questions en fonction de leur difficulté et de leur pertinence afin de faciliter leur transition et leur compréhension. Bien sûr, cet article n'est pas aussi simple qu'un essai en huit parties, ces points de connaissance sont souvent utilisés dans le travail. [Recommandations associées : tutoriel vidéo vuejs]

cycle de vie vue

Cette question n'est généralement pas beaucoup posée, mais si elle est posée, vous devez y répondre

réponse

Vue2 (option API)	Vue3(configuration)	Description
avantCréation	-	avant la création de l'instance
créé	-	après la création de l'instance
beforeMount	onBeforeMount	Appelé avant le montage du DOM
monté	onMounted	Montage DOM terminé Appelé
beforeUpdate	onBeforeUpdate	Appelé avant la mise à jour des données
updated	onUpdated	est appelé après la mise à jour des données
beforeDestroy	onBeforeUnmount	Appel avant que le composant ne soit détruit
destroyed	onUnmount	Appel après la destruction du composant

Cycle de vie des composants parent-enfant Vue

C'est un peu plus compliqué que la question précédente. Vous pouvez essayer de comprendre la mémoire ou simplement vous en souvenir directement

Processus de rendu

.

Processus de mise à jour

Processus de destruction

RemarqueSi les composants enfants sont des composants asynchrones, leur ordre d'exécution changera. Le cycle de vie du composant parent sera exécuté en premier, puis le cycle de vie du composant enfant sera exécuté

v-if et v-. show

this La question est une question très basique, et elle est facile à comprendre. Les entretiens demandent généralement quelle est la différence entre ces deux instructions, et quelle instruction est appropriée à utiliser dans quel scénario Réponse

• v-if indique si un élément DOM est créé, et v-show contrôle si l'attribut display de cet élément DOM est aucun<p> </p>
v-if表示一个dom元素是否被创建，而v-show则是控制这个dom元素的display属性是否为none

• 一般在频繁切换状态的地方使用v-show,v-if则更适合条件不经常改变的场景，因为它切换开销相对较大

v-for和v-if优先级

这个问题被问到的频率还是比较高的，虽然它在实际开发中并不会这么用。

回答

• 开发过程中一般不建议同时将v-for和v-if放在一个标签中使用

• Vue2中v-for的优先级会更高，所以会先执行循环，再进行v-if判断，所以这样就会导致无论需不需展示这个元素，都会先遍历整个列表

• 在Vue3中v-if的优先级会更高，但是当我们遍历一个数组的时候，根据数组中的某个元素进行v-if判断的时候就会报错，因为v-if会先执行此时还没有拿到这个数组。所以Vue3中依然不建议这样使用

说一下computed和watch

computed和watch实际工作中用的比较多,所以问的也比较多,一般理解了基本都能回答上来

• computed是计算属性,当一个属性受一个或者多个属性影响的时候可以使用.watch是侦听器,当我们需要根据一个属性的变化而做出一些处理的时候,可以使用watch来对这个属性进行监听

• computed具有缓存的特点,即当它所依赖的属性发生改变的时候它才会重新执行内部逻辑.如下代码

<template>
    <div>{{ addSum }}</div>
    <div>{{ addSum }}</div>
    <div>{{ addSum }}</div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
const a = ref(1)
const b = ref(2)
let addSum = computed(() => {
    console.log('内部逻辑执行')
    return a.value + b.value
})
</script>

页面多次使用addSum,但是只会打印一次"内部逻辑执行"

• watch在页面首次加载的时候默认不会执行,需要设置immediate:true首次才会执行监听

• watch默认只监听一层数据,不监听多层数据里属性的变化,需要设置deep:true才会进行深度监听

vue-router

关于vue-router能问的问题非常多，比如它的实现原理，路由跳转，路由守卫等等，所以建议去系统的查看vue-router文档

问题1：vue-router是什么，描述一下它的原理？

Vue Router是Vue官方的路由管理器，有hash和history两种模式

hash模式是通过监听hashchange事件来实现更新页面部分内容的操作，url后面会带有#号

history模式则是通过监听popstate事件来实现更新页面部分内容的操作原理和hash模式差不多，只不过url后面不会出现#会显得更加美观。同时会带来一个问题，因为没有#号，所以当用户刷新页面时会向服务器发请求导致请求资源为404，因此需要对nginx进行一个配置，需要把所有路由都重定向到根页面

问题2：路由跳转方式有哪些？

• 内置组件跳转

• router.push({ path: '/home' }),router.replace({ path: '/home' })

问题3:说一下路由守卫？

路由守卫分为全局路由守卫，路由独享守卫，组件路由守卫

• 全局路由守卫

• beforeEach,接收to、from、next三个参数，每个路由跳转前都会触发，登录验证时用的比较多

• beforeResolve，和beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用

• afterEach，在路由跳转完成后调用，接收to、from两个参数

• 路由独享守卫

beforeEnter

Généralement, v-show est utilisé dans les endroits où le statut est fréquemment changé. v-if est plus adapté aux scénarios où les conditions. ne changez pas fréquemment, car son coût de changement est relativement élevé🎜

🎜priorité v-for et v-if🎜🎜🎜Cette question est. demandé relativement fréquemment, bien qu'il ne soit pas utilisé dans le développement réel. 🎜🎜🎜Réponse🎜🎜🎜🎜🎜Il n'est généralement pas recommandé d'utiliser v-for et v-if dans la même balise en même temps pendant le processus de développement🎜🎜🎜La priorité de v-for dans Vue2 sera plus élevé, donc la boucle sera exécutée en premier, puis le jugement v-if sera effectué, donc que cet élément doive être affiché ou non, la liste entière sera parcourue en premier🎜🎜🎜Dans Vue3 , la priorité de v-if sera plus élevée. Mais lorsque nous parcourrons un tableau, une erreur sera signalée lors du jugement v-if basé sur un certain élément du tableau, car v-if sera exécuté en premier et le tableau a. n'a pas été obtenu pour le moment. Par conséquent, il n'est toujours pas recommandé de l'utiliser de cette façon dans Vue3🎜

🎜Parlons de calculé et de montre🎜🎜🎜calculé et de montre sont utilisés plus dans le travail réel, donc il y a beaucoup de questions, et je peux en gros y répondre une fois que je les comprends🎜🎜🎜🎜🎜calculé🎜 est un attribut calculé, qui peut être utilisé lorsqu'un attribut est affecté par un ou plusieurs attributs. 🎜watch🎜 est un auditeur, lorsque nous devons effectuer un traitement basé sur les modifications d'un attribut, vous pouvez utiliser 🎜watch🎜 pour surveiller cet attribut🎜🎜🎜🎜computed🎜 a les caractéristiques de la mise en cache, qui c'est-à-dire que lorsque les attributs dont il dépend changent, il réexécutera la logique interne le moment venu. Le code suivant🎜

//子组件
<template>
    <slot />
</template>

//父组件
<Child>
  <div>默认插槽</div>  
</Child>

🎜La page utilise addSum plusieurs fois, mais il n'imprimera "l'exécution de la logique interne" qu'une seule fois🎜🎜🎜🎜🎜 watch🎜 ne sera pas exécuté par défaut lorsque la page est chargée pour la première fois. Vous devez définir immediate:true pour exécuter. surveillance pour la première fois🎜🎜🎜🎜watch🎜Par défaut, il ne surveille qu'une seule couche de données et ne surveille pas plusieurs. Les modifications des attributs dans les données de la couche doivent être définies sur deep:true pour effectuer une surveillance approfondie🎜

🎜vue-router🎜 🎜🎜Vous pouvez poser de nombreuses questions sur vue-router, comme son principe de mise en œuvre, le saut de route, le garde de route, etc., il est donc recommandé de vérifier vue-router dans le système >Documentation🎜🎜🎜Question 1 : Qu'est-ce que vue-router et décrire son principe ? 🎜🎜🎜Vue Router est le gestionnaire de routage officiel de Vue. Il dispose de deux modes : hachage et historique. 🎜🎜Le mode hash met à jour une partie du contenu de la page en écoutant le hashchange événement. Opération, l'url sera suivie du numéro <code>#🎜🎜historique consiste à mettre en œuvre le principe de fonctionnement et à mettre à jour une partie du contenu de la page en écoutant le popstate. Le mode hash est similaire, sauf que # n'apparaît pas après l'url, ce qui sera plus beau. En même temps, cela posera un problème. Comme il n'y a pas de numéro #, lorsque l'utilisateur actualisera la page, une requête sera adressée au serveur, entraînant une demande de ressources 404. une configuration de nginx est requise, toutes les routes doivent être redirigées vers la page racine🎜🎜🎜Question 2 : Quelles sont les méthodes de saut de routage ? 🎜🎜🎜🎜🎜Saut de composant intégré🎜🎜🎜router.push({ chemin : '/home' }),router.replace({ chemin : '/ home'' })🎜🎜🎜Question 3 : Parlez-nous des gardes de routage ? 🎜🎜🎜Les gardes de route sont divisés en 🎜gardes de route globaux🎜, 🎜gardes de route exclusifs🎜, 🎜gardes de route composants🎜🎜

🎜gardes de route globaux

🎜🎜beforeEach, qui reçoit trois paramètres : to, from et next. Il sera déclenché avant chaque saut d'itinéraire. Il est souvent utilisé pour vérification de connexion. 🎜🎜🎜beforeResolve, similaire à beforeEach, la différence est qu'il est appelé avant la confirmation de la navigation et après les gardes et les composants de routage asynchrone. sont résolus dans tous les composants🎜 🎜🎜afterEach, appelés une fois le saut d'itinéraire terminé, recevant deux paramètres vers et depuis 🎜

🎜Garde exclusive pour l'itinéraire

🎜beforeEnter, généralement configuré dans le fichier de configuration de routage (router/index.js), effectue les opérations associées avant de saisir une certaine route🎜

• 组件路由守卫

接收to、from、next三个参数

• beforeRouteEnter,进入该组件之前调用，无法获取到vue实例

• beforeRouteUpdate，在当前路由改变，但是该组件被复用时调用

• beforeRouteLeave, 在离开当前组件时调用

vue2和vue3区别

当面试问你会用vue3吗,如果你回答会用的话,那么大概率会问vue2和vue3有哪些区别,最近我去面试的时候百分之90都问了这个问题。

回答

• 写法上的区别:vue2使用的是options(选项)Api,vue3的是composition Api(当然vue3也兼容composition api)。options Api中methods，compute，data等api都是分散的。而composition api中的代码是根据逻辑功能来组织的,我们可以将一个功能所定义的methods，compute，data等api会放在一起,让我们可以更灵活地组合组件逻辑。

• vue2将响应式数据放到data函数中,而vue3则是使用ref和reactive将数据声明为响应式

• 响应式实现方式:vue2中是通过Object.defineProperty对数据劫持实现的,vue3中则是使用Proxy对数据代理实现的。

• 生命周期区别:vue3中将beforeCreate和created合并到了setup函数中

• 根节点: vue3组件允许多个根节点,而vue2只允许一个

• 内置组件: vue3新增了传送组件Teleport和异步依赖处理组件Suspense

vue插件使用

面试一般会问你如何写一个vue插件,所以没写过vue插件的最好去亲自体验一下

回答:

vue实例会有一个use函数,它接受的是一个带有install函数的对象和一个可选的选项对象,当我们使用 vue.use(plugin)或者app.use(plugin)会调用我们插件的install属性的函数,并且将当前组件的实例传进来.所以在插件中就可以对这个实例进行一些操作来实现我们插件的功能

vue插槽

插槽slot可以理解为占坑，当使用一个组件的时候，在组件标签里的对应的内容就会替换掉这个组件中的slot标签。

插槽分为默认插槽，具名插槽，作用域插槽。

默认插槽子组件中用slot标签来确定渲染位置，父组件使用它时直接在子组件的标签内写入内容即可

//子组件
<template>
    <slot />
</template>

//父组件
<Child>
  <div>默认插槽</div>  
</Child>

具名插槽

顾名思义就是具有名字的插槽，子组件中可以用name熟悉对slot命名，父组件在使用的时候通过template中的v-slot:name或者#name来定义这个插槽中的内容

//子组件
<template>
  <slot name="content"></slot>
</template>

//父组件
<Child>
    <template v-slot:content>具名插槽内容</template>
</Child>

作用域插槽

子组件中的slot可以通过类似组件属性传递的方式将子组件的值传递给父组件中这个子组件的插槽内容中（子组件标签内），在父组件使用子组件的时候要用v-slot的值进行接收这些参数，默认插槽可以将其直接写在子组件标签上，具名插槽则写在template上。而传过来的值只能在子组件标签中或者template标签中使用。所以在父组件作用域中获取到了子组件作用域中的变量，可以认为作用域插槽延伸了子组件数据的作用范围，因此叫做作用域插槽

如果你想详细理解插槽的作用可以阅读这篇文章Vue3中插槽(slot)用法汇总 - 掘金 (juejin.cn)

组件通信

这里我大概归纳了一下vue2和vue3的传参方式

way	Vue2	Vue3
de père à fils	props	props
fils à père	$emit	émet
Père à fils	$ attrs	attrs
fils à père	$auditeurs	Aucun (fusionné dans la manière attrs)
père à fils	fournir/injecter	fournir/injecter
Le composant enfant accède au composant parent	$parent	Aucun
Le composant parent accède aux composants enfants	$children	Aucun
Le composant parent accède aux composants enfants	$ref	expose&ref
composants frères et sœurs Valeur du Pass	EventBus	mitt

它们的具体用法可以参考我的这篇文章盘点Vue2和Vue3的10种组件通信方式(值得收藏) - 掘金 (juejin.cn)

除了上面的传参方式你也可以回答Vuex和Pinia，前提你了解这两个状态管理器，因为你说了大概率下个问题就会问你Vuex和Pinia

vuex

面试问到这个问题的时候，不要上来就开始说什么state,mutation...。你要先阐述Vuex干嘛用的，什么时候需要用Vuex。

回答

• Vuex是Vue中的全局状态管理框架，它可以管理应用的所有组件的状态。并不是每个项目都需要引入Vuex的，当我们的项目有很多个页面，并且这些页面共享着多个数据状态，此时我们可以引入Vuex。

• Vuex有三个核心的概念，state,mutations,actions,其中state为存放数据的地方，mutations中的函数作用则是用来修改state，actions中一般是用了处理一些异步操作的函数。

• Vuex除了上面三个概念还有getters,moudles，getters就像Vue中的计算属性computed一样用来描述依赖响应式状态state中的复杂逻辑。moudles则是可以将store分割成模块（module），每个模块都拥有自己的state,mutations,actions等，在大型应用中经常用到

• 场景：当我们异步获取结果并赋值给state的时候，比如数据请求，我们可以在actions中进行数据请求，拿到结果通过它的dispatch方法调用mutations中修改state的函数，从而将结果赋值给了state

pinia

这个现在问的好像不多，从我最近面试来看只有我提到了才会问一下，但是以后问的肯定会越来越多。关于pinia问的一般是它和Vuex的区别，确切的说应该是它和Vuex4之间的区别

回答

pinia其实就是Vuex5，它和Vuex的主要区别有以下几点

• Pinia使用更简单，更符合开发者的开发习惯

• pinia中没有了mutations,状态state的修改可以直接进行修改，或者在actions中修改，或者使用它的$patch方法进行修改

• pinia中没有了modules,如果想使用多个store，直接使用defineStore定义多个store传入不同的id即可

• 更好的TS支持，不需要创建自定义的复杂包装器来支持TS

vue自定义指令

vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令。除此之外vue 还允许开发者自定义指令。面试经常会问什么是自定义指令?你用自定义指令做过哪些功能?

回答1:什么是自定义指令?

• 自定义指令包含局部指令和全局指令,在模板中使用指令前必须先使用directives选项注册。局部指令指在某个组件中注册,而全局则是将指令注册到全局,通常在main.js中注册。

• 自定义指令由一个包含类似组件生命周期钩子的对象来定义。它的生命周期钩子包含created,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted,

• 常用的钩子为mounted 和 updated,它接受el,binding等参数.binding参数的值一般包含绑定到这个元素上的信息,比如下面这个指令

<div v-example:foo.bar="baz">

它的binding会是这个对象

 {
    arg: 'foo',
    modifiers: { bar: true },
    value: /* `baz` 的值 */,
    oldValue: /* 上一次更新时 `baz` 的值 */ 
 }

---

回答2:你用自定义指令做过哪些功能?

• 数据埋点,通过绑定自定义事件传入点击当前元素需要埋点的事件名,在指令中监听当前元素的点击事件后调用后台接口将事件名传入

• 权限控制,通过绑定自定义事件传入控制当前元素的权限字段,在指令中获取到当前元素根据权限字段来控制该元素的状态(显示,隐藏等)

• ...

keep-alive

官网描述

<KeepAlive> est un composant intégré, sa fonction est de mettre en cache les instances de composants supprimées lors de la commutation dynamique entre plusieurs composants. <KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

回答

• 通常我们切换组件的时候，上一个组件就会被销毁，而当我们使用<KeepAlive>将其包裹的话这个组件就会被缓存，当这个组件再一次被显示时就会保留之前的状态。

• keep-alive接收两个属性include 和 exclude，分别代表哪些组件要用缓存和哪些不需要缓存，它接收组件的名字数组，字符串或者正则，当我们使用动态组件component或者路由router-view的时候可以使用

• keep-alive还接收max属性表示最大缓存实例数，如果超出这个数则最久没有被访问的缓存实例将被销毁。

• keep-alive有两个生命周期，分别是activated和deactivated，activated钩子会在首次挂载或者每次从缓存中被重新插入的时候调用。deactivated钩子则是在组件从DOM上移除或者组件卸载时调用

vue2混入-Mixin

vue3中已经没有Mixin这个概念了，所以未来被问到的几率会越来越小，但是目前被问到的频率还是很高的。一般会它的概念以及优缺点，有时还会问它与父组件的生命周期执行顺序

vue官网描述：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

回答1.Mixin的作用将组件的公共逻辑提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可 2. Mixin的生命周期会在父组件生命周期之前执行，如果Mixin中的属性或者方法与父组件冲突则会使用父组件中的 2. 优点：可以降低代码冗余提高逻辑复用性。 3. 缺点：命名容易冲突，不好追溯源，后期排查不方便

vue响应式原理

这道题问道的频率极高,就我经历的多场面试几乎都会问到,而且是面试到vue方面的开门题。

下面是我自己的理解回答,以vue2为例,大家可以借鉴参考

• vue的响应式原理是根据Object.defineProperty这个api来对数据进行劫持并结合发布者-订阅者模式实现的

• 首先会利用Object.defineProperty中的get函数来对vue中的data的所有属性进行访问劫持,中间会涉及到劫持data中更深层次的属性需要递归调用劫持方法。这里是通过一个Observer类实现的

• 劫持到每一个属性后会给这个属性绑定多个订阅者watcher,因为一个属性可能被用在很多地方;而这个watcher中则包含更新视图的函数update。

• watcher和属性的对应关系以及和视图的联系则是通过编译模板Compile类来实现的。Compile中会拿到整个dom对象,然后遍历元素子节点获取到使用过vue中data属性的则给该属性直接添加一个watcher并赋予一些更新当前视图的方法.

• 每个属性的多个订阅者watcher都会被添加到对应的数组中,这里则是通过Deps类实现的,初始化watcher的时候会调用Deps中的addSub方法将对应watcher添加该类的Subs数组中

• 当data中的某个属性发生改变时则会触发Object.defineProperty中的set函数,这时便会调用该属性的Deps类中的notify函数遍历Subs数组中的订阅者watcher并调用其函数update去触发视图的更新

Object.defineProperty和proxy区别

一般问完响应式原理可能会问这两者的区别

回答

• Object.defineProperty 只能代理属性，Proxy 代理的是对象。

• 对象上新增属性，Proxy可以监听到，Object.defineProperty

  Réponse🎜
  • 🎜Habituellement, lorsque nous changeons de composant, le composant précédent sera détruit, et lorsque nous utilisez <KeepAlive> pour l'envelopper, le composant sera mis en cache et l'état précédent sera conservé lorsque le composant sera à nouveau affiché. 🎜
  • 🎜keep-alive reçoit deux attributs include et exclude, qui représentent respectivement quels composants doivent être mis en cache et dont Aucune mise en cache n'est requise. Il reçoit le tableau de noms, la chaîne ou l'expression régulière du composant. Il peut être utilisé lorsque nous utilisons des composants dynamiques component ou un routage router-view🎜li>
  • 🎜keep-alive reçoit également l'attribut max indiquant le nombre maximum d'instances de cache. Si ce nombre est dépassé, l'instance de cache qui n'a pas été accédée. pendant très longtemps sera détruit. 🎜
  • 🎜keep-alive a deux cycles de vie, à savoir activé et désactivé, activé hook sera appelé lors de son premier montage ou à chaque fois qu’il sera réinséré depuis le cache. Le hook <code>désactivé est appelé lorsque le composant est supprimé du DOM ou que le composant est désinstallé🎜

  vue2 mix-in- Mixin

  🎜Vue3 n'a plus le concept de Mixin, donc la chance d'être demandé deviendra de plus en plus petite à l'avenir, mais la fréquence d'être demandé est encore très élevé. Généralement, vous découvrirez son concept, ses avantages et ses inconvénients, et parfois vous poserez également des questions sur l'ordre d'exécution du cycle de vie entre celui-ci et le composant parent 🎜🎜description du site officiel de vue : 🎜🎜🎜Mixin fournit un moyen de distribution très flexible. composants dans les composants Vue. Un mixin peut contenir des options de composants arbitraires. Lorsqu'un composant utilise un mixin, toutes les options du mixin seront "mixées" dans les options du composant lui-même. 🎜🎜Réponse1. La fonction de Mixin est d'extraire la logique publique du composant Lorsqu'un composant a besoin de l'utiliser, mixez directement la partie extraite. dans le composant. Juste interne. 2. Le cycle de vie de Mixin sera exécuté avant le cycle de vie du composant parent. Si les propriétés ou méthodes de Mixin entrent en conflit avec le composant parent, les propriétés ou méthodes. dans le composant parent sera utilisé. 2. Avantages : il peut réduire la redondance du code et améliorer la réutilisation de la logique. 3. Inconvénients : les conflits de noms sont faciles, il est difficile de retracer la source et le dépannage ultérieur n'est pas pratique🎜

  principe de réactivité de Vue

  🎜 Cette question La fréquence de la question est extrêmement élevée. Elle est posée dans presque toutes les interviews que j'ai vécues, et c'est une question d'ouverture dans les interviews Vue. 🎜🎜Ce qui suit est ma propre compréhension de la réponse, en prenant vue2 comme exemple, tout le monde peut en tirer des leçons🎜
  • 🎜Le principe de réactivité de vue est basé sur Object .definePropertyCette API est utilisée pour détourner les données et les implémenter en conjonction avec le modèle éditeur-abonné🎜
  • 🎜Tout d'abord, nous utiliserons le dans <code>Object .defineProperty La fonction get effectue un détournement d'accès sur tous les attributs des données dans Vue, ce qui implique le détournement d'attributs plus profonds dans les données et nécessite d'appeler de manière récursive la méthode de piratage. Ceci est implémenté via une classe Observer🎜
  • 🎜Après avoir détourné chaque attribut, plusieurs abonnés watcher seront liés à cet attribut, car un attribut peut être utilisé à de nombreux endroits ; et ce watcher contient la fonction update qui met à jour la vue. 🎜
  • 🎜La relation correspondante entre watcher et les attributs et la connexion avec la vue sont réalisées en compilant la classe modèle Compile. Compile obtiendra l'intégralité de l'objet dom, puis traversera les nœuds enfants de l'élément pour obtenir l'attribut data dans vue, puis ajoutera directement un watcher à l'attribut et attribuera un courant de mise à jour Méthode View.🎜
  • 🎜Plusieurs abonnés watcher pour chaque attribut seront ajoutés au tableau correspondant, ici via Deps Implémenté par la classe, lors de l'initialisation watcher, la méthode addSub dans Deps sera appelée pour ajouter la classe correspondant à watcher 🎜
  • 🎜Dans le tableau Subs, lorsqu'une propriété dans les données change, la fonction set dans <code>Object.defineProperty sera déclenchée, puis. la fonction notify dans la classe Deps de l'attribut sera appelée pour parcourir les abonnés watcher dans le tableau <code>Subs Et appelez sa fonction update pour déclencher la mise à jour de la vue🎜

  Object.defineProperty et proxy Difference

  🎜Généralement, après avoir posé des questions sur le principe de réactivité, vous pouvez poser des questions sur la différence entre les deux🎜🎜Réponse🎜
  • 🎜Object.defineProperty ne peut que proxy des propriétés, tandis que Proxy peut proxy des objets. 🎜
  • 🎜De nouvelles propriétés sont ajoutées à l'objet, Proxy peut le surveiller, mais Object.defineProperty ne le peut pas. 🎜

  • Object.defineProperty 的代理行为是在破坏原对象的基础上实现的，Proxy 则不会破坏原对象，只是在原对象上覆盖了一层。

  • 数组新增修改，Proxy可以监听到，Object.defineProperty不能。

  • Proxy不兼容IE11及以下

  vue3内置组件

  vue3新增了两个内置组件分别是Teleport和Suspense。

  • Teleport组件

  可以称之为传送门，作用将其插槽内容渲染到 DOM 中的另一个位置，接收两个参数to（要去的位置）和disabled（是否留在原位置）。接收比如下面代码

  <teleport to="#popup"> 
      <video src="./my-movie.mp4"> 
  </teleport>

  video将会被传送到id为popup的元素下。

  • Suspense组件

  • <Suspense> 组件用于协调对组件树中嵌套的异步依赖的处理。

  • 它一般用于包裹多个异步组件处理多个异步组件加载前与完成后的统一状态

  • <Suspense> 组件有两个插槽：#default 和 #fallback,在初始渲染时，<Suspense> 将在内存中渲染其默认的插槽内容。如果在这个过程中遇到任何异步依赖，则会进入挂起状态等待异步组件加载完毕。在挂起状态期间，展示的是 #fallback插槽内容

  nextTick及原理

  关于nextTick会问到它的用法,然后是它的原理,然后还可能问到JS的时间循环机制。

  问题1:vue中的nextTick是干什么用的?

  这个其实比较简单,用过都知道它是干嘛的,vue官方的解释是:

  在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

  这是什么意思呢,其实vue中修改data不会立刻触发dom更新;而是把需要更新的Watcher加入到queueWatcher队列中,然后在合适的时机在nextTick中调用这些Watcher的更新函数进行dom更新,所以在data刚被修改的时候,我们是获取不到更新后的dom的,这时候便需要调用nextTick函数在它的回调函数中获取到变化后的dom

  问题2:nextTick原理

  • nextTick原理是借助浏览器事件循环来完成的,因为每次事件循环之间都有一次视图渲染,nextTick尽量在视图渲染之前完成dom更新,所以nextTick优先使用的是promise(微任务)实现

  • 每次执行nextTick时会将传入的回调函数放入一个队列中(callbacks数组),然后当在本次事件循环的同步代码执行完毕后开启一个微任务(promise或者MutationObserver)去依次执行这个callbacks中的回调函数。

  • 但是当浏览器不支持promise的时候在vue2中会进行进行降级处理,依次使用setImmediate、setTimeout开启一个宏任务执行callbacks

  • 当一个data数据更新时对应的watcher便会调用一次nextTick,将它对应的dom更新操作作为回调函数放入callbacks中,所以当我们想获取这个data更新后的dom需要在其值变化后也调用nextTick将回调函数传入排在上个更新dom的回调函数后面,所以我们可以在这个nextTick的回调函数中获取到更新后的data

  问题3:js事件循环机制

  不属于vue,后面文章再介绍

  vue虚拟dom,diff算法

  这题在工作中有用吗是?？？答案是没有用，但是在面试中有用啊，所以我们要会回答?

  问题1：什么是虚拟dom？

  简单来说就是一个描述dom结构的js对象

  问题2：为什么要用虚拟dom？

  • 每当我们用原生JS或者JQ操作DOM时，浏览器会从头开始进行DOM树的构建，频繁的操作DOM开销是很大的。

  • 而虚拟DOM就是为了减少这些操作的，虚拟DOM首先会通过状态生成一个虚拟节点树（js对象），然后使用虚拟节点树进行渲染。当某些状态发生变更时会生成新的虚拟DOM节点树，然后与上一次虚拟DOM节点树进行比较（diff），从而找到差异的部分，最后渲染到真实的DOM节点上面

  问题3：说一下diff算法

  L'essence de l'algorithme diff est de trouver la différence entre deux objets, dans le but de réutiliser autant que possible les nœuds. En vue, c'est un algorithme utilisé pour calculer la différence entre le DOM virtuel après le changement et le DOM virtuel avant le changement lorsque l'état change.

  L'implémentation spécifique ne peut pas être expliquée clairement en quelques phrases. Je recommande un article

  Parlons de l'algorithme de comparaison à double extrémité de Vue - Nuggets (juejin.cn)

  Conclusion

  Les questions ci-dessus sont essentiellement la référence. partie Les informations sont résumées sur la base de ma propre compréhension, il est donc inévitable qu'il y ait des erreurs et des insuffisances. Si vous les trouvez, j'espère que vous le signalerez. Merci beaucoup.
  (Partage de vidéos d'apprentissage :

  développement web front-end, 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!