Partage des questions d'entretien à haute fréquence Vue en 2023 (avec analyse des réponses)

Cet article résume pour vous quelques sélections 2023 à collectionnervueQuestions d'entretien à haute fréquence (avec réponses). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Que sont les gardes de navigation de Vue-router ?

• Préfixe/hook global : beforeEach, beforeResolve, afterEach
• Gardes exclusifs à la route : beforeEnter
• Gardes au sein du composant : beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

(Partage vidéo d'apprentissage : tutoriel vidéo Vue)

Pourquoi Proxy est-il adopté dans Vue3.0 et Object.defineProperty est-il abandonné ?

Object.defineProperty lui-même a une certaine capacité à surveiller les changements dans les indices du tableau, mais dans Vue, compte tenu de la rentabilité des performances/expérience, cette fonctionnalité a été abandonnée (pourquoi Vue ne peut pas détecter les changements de tableau). Afin de résoudre ce problème, après le traitement interne de Vue, vous pouvez utiliser les méthodes suivantes pour surveiller le tableau

push();
pop();
shift();
unshift();
splice();
sort();
reverse();

Étant donné que seules les 7 méthodes ci-dessus sont piratées, les propriétés des autres tableaux ne peuvent pas être détectées et elles ont toujours certaines limitations. limitation.

Object.defineProperty ne peut détourner que les propriétés d'un objet, nous devons donc parcourir chaque propriété de chaque objet. Dans Vue 2.x, la surveillance des données est réalisée par récursion + parcours de l'objet de données. Si la valeur de l'attribut est également un objet, alors un parcours approfondi est évidemment un meilleur choix si un objet complet peut être détourné.

Le proxy peut détourner l'objet entier et renvoyer un nouvel objet. Le proxy peut non seulement proxy des objets, mais également des tableaux proxy. Vous pouvez également proxy des attributs ajoutés dynamiquement.

v-for Pourquoi ajouter une clé

Si la clé n'est pas utilisée, Vue utilisera un algorithme qui minimise les éléments dynamiques et essaiera de modifier/réutiliser les éléments du même type en place autant que possible. La clé est la seule marque pour vnode dans Vue. Grâce à cette clé, notre opération de comparaison peut être plus précise et plus rapide

• Plus précise : Parce qu'avec la clé, elle n'est pas réutilisée sur place dans la même fonction Node. key === b.key peut éviter la réutilisation sur place lors de la comparaison. Ce sera donc plus précis.

• Plus rapide : Utiliser l'unicité de la clé pour générer un objet cartographique afin d'obtenir le nœud correspondant est plus rapide que la méthode de traversée

Comment passer du DOM réel au DOM virtuel

Implique le modèle principe de compilation dans Vue , le processus principal :

• Convertir le modèle en un arbre ast, ast utilise des objets pour décrire la vraie syntaxe JS (convertir le vrai DOM en virtuel DOM) ast 树， ast 用对象来描述真实的JS语法（将真实DOM转换成虚拟DOM）

• 优化树

• 将 ast 树生成代码

为什么Vue采用异步渲染呢？

Vue 是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能， Vue 会在本轮数据更新后，在异步更新视图。核心思想 nextTick 。

dep.notify（） 通知 watcher进行更新， subs[i].update 依次调用 watcher 的 update ， queueWatcher 将watcher 去重放入队列， nextTick（ flushSchedulerQueue

Optimiser l'arborescence

Générer du code à partir de l'arborescence ast

Pourquoi Vue utilise-t-il le rendu asynchrone ?

Vue est une mise à jour au niveau du composant. Si les mises à jour asynchrones ne sont pas utilisées, le composant actuel sera restitué à chaque fois que les données sont mises à jour. Par conséquent, pour des raisons de performances, Vue sera utilisé ici. Après la série de mises à jour des données, la vue est mise à jour de manière asynchrone. Idée de base <code> nextTick.

dep.notify() informe l'observateur de mettre à jour, subs[i].update appelle à son tour la mise à jour de l'observateur, queueWatcher Mettez l'observateur dans la file d'attente et nextTick (<code> flushSchedulerQueue) actualise la file d'attente de l'observateur au tick suivant (de manière asynchrone).

• Pourquoi les données du composant vue doivent-elles être une fonction ?
• Les objets sont des types de référence. Lors de la réutilisation de composants, puisque les objets de données pointent tous vers le même objet de données, lorsque les données sont modifiées dans un composant, les données des autres composants réutilisés seront modifiées en même temps lors de l'utilisation du retour ; object Function, puisque chaque fois qu'il renvoie un nouvel objet (une instance d'Object) et que l'adresse de référence est différente, ce problème ne se produira pas.

La différence entre MVC et MVVM

MVC

Le nom complet de MVC est Model View Controller, qui est l'abréviation de model-view-controller, un modèle de conception logicielle🎜🎜🎜 Modèle : La partie de l'application qui gère la logique des données d'application. Habituellement, l'objet modèle est responsable de l'accès aux données de la base de données 🎜🎜View (View) : C'est la partie de l'application qui gère l'affichage des données. Habituellement, les vues sont créées sur la base des données du modèle 🎜🎜Contrôleur : c'est la partie de l'application qui gère l'interaction de l'utilisateur. Habituellement, le contrôleur est responsable de la lecture des données de la vue, du contrôle des entrées de l'utilisateur et de l'envoi des données au modèle : une description en une phrase est que le contrôleur est responsable de l'affichage des données du modèle à l'aide de la vue. En d’autres termes, le modèle est affiché dans le contrôleur. Les données sont affectées à View. 🎜🎜🎜MVVM🎜🎜🎜MVVM a ajouté une nouvelle classe de VM🎜

• ViewModel 层：做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）

整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM 元素。因为在 MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也观察不到 View，这种低耦合模式提高代码的可重用性

注意：Vue 并没有完全遵循 MVVM 的思想 这一点官网自己也有说明

那么问题来了 为什么官方要说 Vue 没有完全遵循 MVVM 思想呢？

• 严格的 MVVM 要求 View 不能和 Model 直接通信，而 Vue 提供了$refs 这个属性，让 Model 可以直接操作 View，违反了这一规定，所以说 Vue 没有完全遵循 MVVM。

Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题 ？你能说说如下代码的实现原理么？

1）Vue为什么要用vm.$set() 解决对象新增属性不能响应的问题

• Vue使用了Object.defineProperty实现双向数据绑定

• 在初始化实例时对属性执行 getter/setter 转化

• 属性必须在data对象上存在才能让Vue将它转换为响应式的（这也就造成了Vue无法检测到对象属性的添加或删除）

所以Vue提供了Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)

2）接下来我们看看框架本身是如何实现的呢?

Vue 源码位置：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 为数组  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
    target.length = Math.max(target.length, key)
    // 利用数组的splice变异方法触发响应式  
    target.splice(key, 1, val)
    return val
  }
  // key 已经存在，直接修改属性值  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 本身就不是响应式数据, 直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  // 对属性进行响应式处理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

我们阅读以上源码可知，vm.$set 的实现原理是：

• 如果目标是数组，直接使用数组的 splice 方法触发相应式；

• 如果目标是对象，会先判读属性是否存在、对象是否是响应式，

• 最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理

defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法

Vue3.0 和 2.0 的响应式原理区别

Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。

相关代码如下

import { mutableHandlers } from "./baseHandlers"; // 代理相关逻辑
import { isObject } from "./util"; // 工具方法

export function reactive(target) {
  // 根据不同参数创建不同响应式对象
  return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(target, baseHandler) {
  if (!isObject(target)) {
    return target;
  }
  const observed = new Proxy(target, baseHandler);
  return observed;
}

const get = createGetter();
const set = createSetter();

function createGetter() {
  return function get(target, key, receiver) {
    // 对获取的值进行放射
    const res = Reflect.get(target, key, receiver);
    console.log("属性获取", key);
    if (isObject(res)) {
      // 如果获取的值是对象类型，则返回当前对象的代理对象
      return reactive(res);
    }
    return res;
  };
}
function createSetter() {
  return function set(target, key, value, receiver) {
    const oldValue = target[key];
    const hadKey = hasOwn(target, key);
    const result = Reflect.set(target, key, value, receiver);
    if (!hadKey) {
      console.log("属性新增", key, value);
    } else if (hasChanged(value, oldValue)) {
      console.log("属性值被修改", key, value);
    }
    return result;
  };
}
export const mutableHandlers = {
  get, // 当获取属性时调用此方法
  set, // 当修改属性时调用此方法
};

Vue模版编译原理知道吗，能简单说一下吗？

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：

• 生成AST树
• 优化
• codegen

首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最后一步是将优化后的AST树转换为可执行的代码。

MVVM的优缺点?

优点:

• 分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者逻辑的重⽤性: ⽐如视图（View）可以独⽴于Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多view重⽤这段视图逻辑
• 提⾼可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码
• ⾃动更新dom: 利⽤双向绑定,数据更新后视图⾃动更新,让开发者从繁琐的⼿动dom中解放

缺点:

• Les bugs sont difficiles à déboguer : en raison du mode de liaison bidirectionnelle, lorsque vous voyez une exception dans l'interface, il peut y avoir un bug dans votre code View, ou il peut y avoir un problème dans le code Model. La liaison de données permet aux bogues d'un emplacement d'être rapidement transférés vers d'autres emplacements, ce qui rend difficile la localisation de l'emplacement d'origine du problème. De plus, la déclaration de liaison de données est impérativement écrite dans le modèle de vue. Ce contenu ne peut pas être interrompu et débogué. Le modèle dans un grand module sera également très volumineux, bien qu'il soit également facile à utiliser. cohérence des données. Si elles sont conservées pendant une longue période, plus de mémoire sera consommée si la mémoire n'est pas libérée.
• Pour les grandes applications graphiques, il existe de nombreux états d'affichage, et la construction et la maintenance de ViewModel sont difficiles. être relativement élevé.

Après la modification de la valeur d'une propriété dans les données Vue, la vue sera-t-elle immédiatement restituée de manière synchrone ?

Le rendu ne sera pas effectué immédiatement et de manière synchrone. La réactivité de Vue ne signifie pas que le DOM change immédiatement après la modification des données, mais que le DOM est mis à jour selon une certaine stratégie. Vue met à jour le DOM de manière asynchrone. Tant qu'il écoute les modifications de données, Vue ouvrira une file d'attente 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 observateur 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. Ensuite, lors du prochain tick de boucle d'événement, Vue vide la file d'attente et effectue le travail réel (dédupliqué).

algorithme diff

Complexité temporelle :

L'algorithme diff complet d'un arbre est une complexité temporelle de O(n*3), optimisé par vue Convert à O(n). diff 算法是一个时间复杂度为 O(n*3） ，vue进行优化转化成 O(n) 。

理解：

• 最小量更新， key 很重要。这个可以是这个节点的唯一标识，告诉 diff 算法，在更改前后它们是同一个DOM节点

  • 扩展 v-for 为什么要有 key ，没有 key 会暴力复用，举例子的话随便说一个比如移动节点或者增加节点（修改DOM），加 key 只会移动减少操作DOM。
• 只有是同一个虚拟节点才会进行精细化比较，否则就是暴力删除旧的，插入新的。
• 只进行同层比较，不会进行跨层比较。

diff算法的优化策略：四种命中查找，四个指针

1. 旧前与新前（先比开头，后插入和删除节点的这种情况）
2. 旧后与新后（比结尾，前插入或删除的情况）
3. 旧前与新后（头与尾比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧后之后）
4. 旧后与新前（尾与头比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧前之前）

--- 问完上面这些如果都能很清楚的话，基本O了 ---

以下的这些简单的概念，你肯定也是没有问题的啦?

Vue的优点

• 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
• 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
• 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
• 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
• 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
• 虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
• 运行速度更快：相比较于 react 而言，同样是操作虚拟 dom，就性能而言， vueComprenez :

Mise à jour minimale, la clé est très importante. Cela peut être l'identifiant unique de ce nœud, indiquant à l'algorithme diff qu'il s'agit du même nœud DOM avant et après le changement

Extension v-for Pourquoi y a-t-il une clé , sans clé, une réutilisation violente se produira. Par exemple, il suffit de déplacer un nœud ou d'ajouter un nœud (modifier le DOM en ajoutant une clé). ne fera que déplacer et réduire les opérations DOM.

Seulement s'il s'agit du même nœud virtuel, une comparaison détaillée sera effectuée, sinon l'ancien sera violemment supprimé et le nouveau sera inséré.

• Seules les comparaisons seront effectuées au sein d'une même couche, et aucune comparaison entre couches ne sera effectuée.

• Stratégie d'optimisation de l'algorithme diff

   : quatre recherches réussies, quatre pointeurs
Ancien avant et nouveau avant (comparez d'abord le début, puis insérez et supprimez des nœuds)

• Ancien après et nouvel après (par rapport au fin, avant insertion ou suppression)

Ancien avant et après le nouveau (Comparé entre la tête et la queue, si cela se produit, cela implique de déplacer des nœuds, alors le nœud pointé par le nouveau front sera déplacé après l'ancien)

• Ancien Arrière et nouveau front (queue contre tête, cela se produit, impliquant des nœuds mobiles, alors le nœud pointé par le nouveau front sera déplacé avant l'ancien front)

--- Si vous pouvez être clair après avoir demandé les questions ci-dessus Si oui, c'est fondamentalement O---

• Vous n'aurez certainement aucun problème avec les concepts simples suivants ?

• Avantages de Vue

• Framework léger : se concentrer uniquement sur la couche de vue, c'est un moyen pour créer des données La taille de la collection de vues n'est que de quelques dizaines de ko ;
  Facile à apprendre : développé par des documents chinois, sans barrière linguistique, facile à comprendre et à apprendre
• Bidirectionnel ; liaison de données : conserve les fonctionnalités de angular pour simplifier les opérations sur les données ;
  Componentisation : elle conserve les avantages de react et réalise l'encapsulation et la réutilisation de html code> dans la construction Les applications d'une seule page présentent des avantages uniques ;
• Séparation des vues, des données et des structures : simplifier les modifications des données, sans avoir besoin de modifier le code logique, et il suffit d'exploiter les données pour effectuer les opérations associées ; DOM virtuel : dom

est très gourmande en performances. Le nœud d'opération natif dom n'est plus utilisé, ce qui libère grandement l'opération dom, mais l'opération spécifique est toujours dom, c'est juste une autre façon ;

s'exécute plus rapidement : par rapport à react, elle exploite également un dom virtuel, donc In en termes de performances, vue présente de grands avantages.

vue-router Qu'est-ce que la fonction de hook de routage et quel est l'ordre d'exécution ?

Le processus d'exécution du hook de routage sont : garde globale, garde de routage, garde de composant

🎜🎜Complet. processus d'analyse de la navigation :🎜🎜🎜 🎜🎜La navigation est déclenchée. 🎜🎜🎜🎜Appelez la garde beforeRouteLeave dans le composant désactivé. 🎜🎜🎜🎜Appelez le global avant chaque garde. 🎜🎜🎜🎜Appelez beforeRouteUpdate guard (2.2+) dans les composants réutilisés. 🎜🎜🎜🎜Appeler avantEntrer dans la configuration du routage. 🎜🎜🎜🎜Résoudre les composants de routage asynchrone. 🎜🎜🎜🎜Appel avantRouteEntrez dans le composant activé. 🎜🎜🎜🎜Appelez le garde global beforeResolve (2,5+). 🎜🎜🎜🎜Navigation confirmée. 🎜🎜🎜🎜Appelez le global afterEach hook. 🎜🎜🎜🎜Déclenchez la mise à jour du DOM. 🎜

调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

Vue.js的template编译

简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点），详细步骤如下：

首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

$nextTick 是什么？

Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。

说说Vue的生命周期吧

什么时候被调用？

• beforeCreate ：实例初始化之后，数据观测之前调用
• created：实例创建万之后调用。实例完成：数据观测、属性和方法的运算、 watch/event 事件回调。无 $el .
• beforeMount：在挂载之前调用，相关 render 函数首次被调用
• mounted：了被新创建的vm.$el替换，并挂载到实例上去之后调用改钩子。
• beforeUpdate：数据更新前调用，发生在虚拟DOM重新渲染和打补丁，在这之后会调用改钩子。
• updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用改钩子。
• beforeDestroy：实例销毁前调用，实例仍然可用。
• destroyed：实例销毁之后调用，调用后，Vue实例指示的所有东西都会解绑，所有事件监听器和所有子实例都会被移除

每个生命周期内部可以做什么？

• created：实例已经创建完成，因为他是最早触发的，所以可以进行一些数据、资源的请求。
• mounted：实例已经挂载完成，可以进行一些DOM操作。
• beforeUpdate：可以在这个钩子中进一步的更改状态，不会触发重渲染。
• updated：可以执行依赖于DOM的操作，但是要避免更改状态，可能会导致更新无线循环。
• destroyed：可以执行一些优化操作，清空计时器，解除绑定事件。

ajax放在哪个生命周期？：一般放在 mounted 中，保证逻辑统一性，因为生命周期是同步执行的， ajax 是异步执行的。单数服务端渲染 ssr 同一放在 created 中，因为服务端渲染不支持 mounted 方法。 什么时候使用beforeDestroy？：当前页面使用 $on ，需要解绑事件。清楚定时器。解除事件绑定， scroll mousemove 。

Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题 ？

受现代 JavaScript 的限制 ，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性，那框架本身是如何实现的呢？

我们查看对应的 Vue 源码：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 为数组  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
    target.length = Math.max(target.length, key)
    // 利用数组的splice变异方法触发响应式  
    target.splice(key, 1, val)
    return val
  }
  // key 已经存在，直接修改属性值  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 本身就不是响应式数据, 直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  // 对属性进行响应式处理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

我们阅读以上源码可知，vm.$set 的实现原理是：

• 如果目标是数组，直接使用数组的 splice 方法触发相应式；
• 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

（学习视频分享：web前端开发、编程基础视频）

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!