집 > 기사 > 웹 프론트엔드 > 꼭 알아야 할 Vue 인터뷰 질문 20개 이상(답변 분석 포함)

꼭 알아야 할 Vue 인터뷰 질문 20개 이상(답변 분석 포함)

青灯夜游앞으로: 2021-04-06 09:41:4013131검색

이 기사에는 답변 분석과 함께 공유할 20개 이상의 Vue 인터뷰 질문이 정리되어 있습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

【관련 면접 질문 추천 : vue 면접 질문(2021)】

두꺼운 렌즈와 노란색과 검은색 체크무늬 셔츠를 보니 앞에 앉은 면접관이 오는 사람은 좋지 않습니다.

평소처럼 3분간 자기소개를 하겠습니다. 이 기간 동안 나는 당혹감을 피하기 위해 면접관의 눈썹 사이를 응시했지만 면접관은 분명히 내 경험에 그다지 관심이 없었습니다. 그는 1분 30초쯤에 내 말을 가로막았습니다.

자신이 가장 잘하는 기술 스택은 무엇이라고 생각하시나요?

Vue, 저는 Youda를 매우 좋아합니다. Vue의 첫 번째 다큐멘터리가 최근 공개되었는데, 정말 보기 좋습니다.

0. MVVM에 대해 이야기해 주실 수 있나요?

MVVM은 Model-View-ViewModel의 약어입니다. 이는 MVC의 Controller가 ViewModel. Model 레이어는 데이터 모델을 나타내고, View는 UI 구성 요소를 나타내며, ViewModel은 View와 Model 레이어 사이의 연결 역할을 하며, 뷰가 변경되면 자동으로 데이터를 페이지에 렌더링합니다. , viewModel 레이어에 데이터 업데이트 알림이 전송됩니다. (학습 영상 공유: <a href="https://www.php.cn/course/list/18.html" target="_blank">vue 영상 튜토리얼<code>Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。（学习视频分享：vue视频教程）

1.简单说一下Vue2.x响应式数据原理

Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。

2.那你知道Vue3.x响应式数据原理吗？

(还好我有看，这个难不倒我)

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

（很简单啊）

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive)

1 Vue2.x에 대해 간단히 이야기해 보세요. 반응형 데이터 원칙

Vue는 데이터를 초기화할 때 Object.defineProperty를 사용하여 데이터의 모든 속성을 재정의합니다. 페이지가 해당 속성을 사용할 때 먼저 종속성 수집을 수행합니다. 현재 구성 요소 watcher)는 속성이 변경되면 업데이트 작업(게시 및 구독)을 수행하도록 관련 종속성에 알립니다.

2. Vue3.x 반응형 데이터의 원리를 아시나요?

(다행히 제가 본 것은 저에게는 문제가 되지 않습니다)

Vue3.x는 Object.defineProperty 대신 Proxy를 사용합니다. 왜냐하면 Proxy는 객체와 배열의 변화를 직접적으로 모니터링할 수 있고, 무려 13가지의 차단 방법을 가지고 있기 때문입니다. 그리고 새로운 표준으로서 브라우저 제조업체의 지속적인 성능 최적화가 적용됩니다.

Proxy는 객체의 첫 번째 레이어만 프록시합니다. 그러면 Vue3는 이 문제를 어떻게 처리합니까?

(아주 간단함)

Reflect.get의 현재 반환 값이 Object인지 확인합니다. 그렇다면 reactive 메서드를 프록시로 사용하세요. 이런 식으로 심층 관찰이 이루어집니다. .
어레이를 모니터링할 때 get/set이 여러 번 트리거될 수 있는데, 여러 번 트리거되는 것을 방지하는 방법은 무엇입니까?

키가 현재 프록시된 객체 대상 자체의 속성인지, 아니면 이전 값과 새 값이 동일한지 위의 두 조건 중 하나가 충족되어야만 트리거가 실행될 수 있습니다. 면접관이 고개를 들었습니다. 속으로 생각했어요

(이 사람은 괜찮습니다. 이전 두 사람보다 낫습니다. Vue3의 소스 코드를 어느 정도 읽었어야 했습니다.)

3 vue2.x에서 배열 변경을 모니터링하는 방법에 대해 이야기해 보겠습니다

.
사용된 함수 하이재킹은 배열 메서드를 다시 작성합니다. Vue는 데이터에서 배열의 프로토타입 체인을 다시 작성하고 자체적으로 정의된 배열 프로토타입 메서드를 가리킵니다. 이러한 방식으로 배열 API가 호출될 때 종속성 업데이트를 알릴 수 있습니다. 배열에 참조 유형이 포함된 경우 배열의 참조 유형은 모니터링을 위해 다시 반복적으로 탐색됩니다. 이를 통해 어레이 변경 사항을 모니터링할 수 있습니다.
(이 질문을 할 수 있는 면접관은 깊이에 더 주의를 기울이고 이러한 일반적인 작업을 기억해야 합니다.)

(프로토타입 체인에 대한 자세한 내용은 제 다른 칼럼을 참조하세요)

이 기사가 도움이 될 것입니다 JavaScript 프로토타입 체인을 완전히 이해하세요

4.nextTick 구현 원리가 무엇인지 아시나요?
다음 DOM 업데이트 주기 후에 지연된 콜백을 실행합니다. nextTick은 주로 매크로 작업과 마이크로 작업을 사용합니다. 실행 환경에 따라

PromiseMutationObserver
🎜setImmediate🎜🎜을 사용해 보세요. 위의 방법 중 어느 것도 작동하지 않으면 setTimeout🎜🎜🎜을 사용하여 nextTick을 여러 번 호출하면 메서드가 이 비동기 메서드를 통해 현재 대기열을 지웁니다. 🎜🎜🎜(매크로 작업, 마이크로 작업 및 이벤트 루프에 대한 내 다른 두 개의 열을 참조할 수 있습니다.) 🎜🎜(이 내용을 보고 나면 프레임워크에 묻는 것이 궁극적으로 기본 JavaScript 기술을 테스트한다는 것을 알게 될 것입니다.) 🎜🎜🎜🎜🎜 JavaScript 이벤트 브라우저의 루프🎜🎜🎜🎜🎜🎜Node.js 이벤트 루프🎜🎜

5. Vue

beforeCreate는 현재 단계에서 데이터, 메서드, 계산 및 감시 이후에 실행되는 첫 번째 후크입니다. 데이터나 메서드에 액세스할 수 없습니다. beforeCreate是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。

beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。

mounted在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

beforeUpdate发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

updated发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

beforeDestroy发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

(关于Vue的生命周期详解感兴趣的也请移步我的另一篇专栏)

从源码解读Vue生命周期，让面试官对你刮目相看

6.你的接口请求一般放在哪个生命周期中？

接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放到created中。

7.再说一下Computed和Watch

Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。
适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。

Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销哦。

8.说一下v-if和v-show的区别

当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display)，切换当前DOM的显示和隐藏。

9.组件中的data为什么是一个函数？

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

10.说一下v-model的原理

v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。
可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

11.Vue事件绑定原理说一下

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。

面试官：(这小子基础还可以，接下来我得上上难度了)

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

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

生成AST树
优化
codegen

首先解析模版，生成AST语法树

created는 인스턴스가 생성된 후에 발생합니다. 현재 단계에서 데이터 관찰이 완료되었습니다. 즉, 여기에서 데이터를 변경하면 업데이트된 기능이 트리거되지 않습니다. 일부 초기 데이터 수집은 가능합니다. 현재 단계에서는 Dom과 상호 작용할 수 없습니다. 필요한 경우 vm.$nextTick을 통해 Dom에 액세스할 수 있습니다. 🎜🎜beforeMount는 마운트 전에 발생하며 그 전에 템플릿 템플릿을 가져오고 렌더링 기능으로 컴파일했습니다. 현재 단계에서는 가상 Dom이 생성되어 렌더링을 시작하려고 합니다. 이때 데이터를 변경할 수도 있으며 업데이트가 트리거되지 않습니다. 🎜🎜mounted는 마운팅이 완료된 후 발생합니다. 현재 단계에서는 실제 Dom이 마운트되고 데이터가 양방향으로 바인딩되며 Dom 노드에 액세스할 수 있으며 $refs 속성이 사용됩니다. 돔을 운영하게 됩니다. 🎜🎜beforeUpdate는 업데이트 전에 발생합니다. 즉, 반응형 데이터가 업데이트되고 가상 돔이 다시 렌더링되기 전에 트리거됩니다. 다시 렌더링을 일으키지 않고 현재 단계에서 데이터를 변경할 수 있습니다. 🎜🎜updated는 업데이트가 완료된 후 발생하며 현재 단계 구성 요소 Dom이 업데이트되었습니다. 업데이트가 무한 반복될 수 있으므로 이 기간 동안 데이터를 변경하지 않도록 주의하세요. 🎜🎜beforeDestroy는 인스턴스가 소멸되기 전에 발생합니다. 현재 단계에서 인스턴스를 완전히 사용할 수 있습니다. 타이머를 지우는 등의 후처리 마무리 작업을 수행할 수 있습니다. 🎜🎜destroyed는 인스턴스가 소멸된 후에 발생합니다. 이때는 DOM 쉘만 남습니다. 구성 요소가 디스어셈블되고, 데이터 바인딩이 제거되고, 리스너가 제거되고, 모든 하위 인스턴스가 삭제되었습니다. 🎜

🎜(Vue의 라이프사이클에 대한 자세한 설명이 궁금하시다면 제 다른 칼럼을 참고해주세요)🎜🎜소스 코드에서 Vue 라이프사이클을 해석하고 면접관에게 깊은 인상을 남겨주세요🎜🎜🎜🎜6. 인터페이스 요청은 일반적으로 어떤 라이프사이클에 위치합니까? 🎜🎜🎜🎜인터페이스 요청은 일반적으로 mounted에 배치되지만 서버 측 렌더링은 마운트를 지원하지 않으며 created에 배치해야 한다는 점에 유의해야 합니다. 🎜🎜🎜🎜7. Computed 및 Watch🎜🎜🎜🎜Compated는 기본적으로 종속 속성이 변경되면 뷰가 업데이트됩니다. 🎜계산이 상대적으로 높은 성능을 소비하는 컴퓨팅 시나리오에 적합합니다. 표현식이 너무 복잡한 경우 템플릿에 논리를 너무 많이 넣으면 템플릿을 유지 관리하기 어려워집니다. 복잡한 논리를 계산된 속성에 넣을 수 있습니다. 🎜🎜🎜Watch는 캐시할 수 없으며 특정 데이터를 모니터링하고 콜백을 실행할 수 있습니다. 객체의 속성을 심층적으로 모니터링해야 하는 경우 deep: true 옵션을 켜서 객체의 각 항목을 모니터링할 수 있습니다. 이로 인해 성능 문제가 발생하므로 문자열 형식을 사용하여 모니터링할 수 있습니다. 구성 요소에 기록되지 않은 경우 unWatch를 사용하여 수동으로 로그아웃하세요. >. 🎜🎜🎜8 v-if와 v-show의 차이점에 대해 이야기해보겠습니다🎜🎜🎜🎜조건이 충족되지 않으면 v-if는 DOM 요소인 v를 렌더링하지 않습니다. -show작업은 스타일(표시)이며, 표시를 전환하고 현재 DOM을 숨깁니다. 🎜🎜🎜🎜9. 구성요소의 데이터는 왜 함수인가요? 🎜🎜🎜🎜구성 요소를 여러 번 재사용하면 여러 인스턴스가 생성됩니다. 기본적으로 이러한 인스턴스는 모두 동일한 생성자를 사용합니다. 데이터가 객체인 경우 객체는 참조 유형이며 모든 인스턴스에 영향을 미칩니다. 따라서 데이터가 구성 요소의 서로 다른 인스턴스 간에 충돌하지 않도록 하려면 데이터가 함수여야 합니다. 🎜🎜🎜🎜10 v-model의 원리에 대해 이야기해 보겠습니다🎜🎜🎜🎜v-model은 본질적으로 값 + 입력의 구문으로 간주할 수 있는 구문 설탕입니다. 메소드 설탕. 🎜모델 속성의 prop 및 event 속성을 통해 맞춤설정할 수 있습니다. 기본 v-model은 다양한 태그에 따라 다양한 이벤트와 속성을 생성합니다. 🎜🎜🎜11 Vue 이벤트 바인딩의 원리에 대해 이야기해 보겠습니다🎜🎜🎜🎜네이티브 이벤트 바인딩은 addEventListener를 통해 실제 요소에 바인딩되고, 구성 요소 이벤트 바인딩은 Vue $on구현되었습니다. 🎜🎜<blockquote>인터뷰어: (이 사람 기본기가 꽤 괜찮네요. 다음에는 좀 더 발전해야겠습니다.)🎜🎜🎜12. Vue 템플릿 컴파일의 원리를 간단히 설명해 주실 수 있나요? 🎜🎜🎜🎜간단히 말하면 Vue의 컴파일 과정은 <code>템플릿을 render 함수로 변환하는 과정입니다. 다음 단계를 거치게 됩니다: 🎜🎜

AST 트리 생성🎜

최적화🎜

codegen🎜🎜🎜먼저 템플릿을 구문 분석하고 AST 구문 트리를 생성합니다(a 전체 템플릿을 설명하는 JavaScript 개체). 🎜다양한 정규식을 사용하여 템플릿을 구문 분석하고 태그나 텍스트가 발견되면 관련 처리를 위해 해당 후크가 실행됩니다. 🎜
Vue의 데이터는 반응형이지만 실제로 템플릿의 모든 데이터가 반응형은 아닙니다. 일부 데이터는 처음 렌더링된 후 변경되지 않으며 해당 DOM도 변경되지 않습니다. 그런 다음 최적화 프로세스는 AST 트리를 깊이 탐색하고 관련 조건에 따라 트리 노드를 표시하는 것입니다. 표시된 노드(정적 노드) 비교를 건너뛸 수 있어 런타임 템플릿이 크게 최적화됩니다. 跳过对它们的比对，对运行时的模板起到很大的优化作用。

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

面试官：(精神小伙啊，有点东西，难度提升，不信难不倒你)

13.Vue2.x和Vue3.x渲染器的diff算法分别说一下

简单来说，diff算法有以下过程

同级比较，再比较子节点

先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)

比较都有子节点的情况(核心diff)

递归比较子节点

正常Diff两个树的时间复杂度是O(n^3)，但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n^3) -> O(n)，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。

Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。

Vue3.x借鉴了
ivi算法和 inferno算法

在创建VNode时就确定其类型，以及在 mount/patch 的过程中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升。(实际的实现可以结合Vue3.x源码看。)

该算法中还运用了动态规划的思想求解最长递归子序列。

(看到这你还会发现，框架内无处不蕴藏着数据结构和算法的魅力)

面试官：(可以可以，看来是个苗子，不过自我介绍属实有些无聊，下一题)

(基操，勿6)

14.再说一下虚拟Dom以及key属性的作用

由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因。

Vue2的Virtual DOM借鉴了开源库snabbdom的实现。

Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。(也就是源码中的VNode类，它定义在src/core/vdom/vnode.js中。)

VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段。

key的作用是尽可能的复用 DOM 元素。

新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。

需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识。

15.keep-alive了解吗

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

常用的两个属性include/exclude，允许组件有条件的进行缓存。

两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。

keep-alive的中还运用了LRU(Least Recently Used)算法。

（又是数据结构与算法，原来算法在前端也有这么多的应用）

16.Vue中组件生命周期调用顺序说一下

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。

组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父 beforeUpdate -> 父 updated
컴파일의 마지막 단계는 최적화된 AST 트리를 실행 가능한 코드로 변환하는 것입니다. 🎜
인터뷰어: (당신은 씩씩한 사람이군요. 제가 뭔가를 가지고 있어서 난이도가 더 높아질 것입니다. 믿지 못하시면 어렵지 않을 것입니다)

13. Vue2.x 및 Vue3.x 렌더러의 diff 알고리즘을 살펴보겠습니다.

🎜간단히 말하면 diff 알고리즘은 다음과 같은 프로세스를 갖습니다. 🎜

동일한 레벨을 비교한 후 하위 노드를 비교

먼저 한쪽에는 하위 노드가 있고 다른 쪽에는 없는지 확인합니다(새 하위에 하위 노드가 없으면 제거 이전 자식 노드)

자식 노드가 있는 상황 비교(핵심 diff)

자식 노드를 재귀적으로 비교

🎜간 일반 Diff의 시간 복잡도 두 개의 트리는 O(n^3)이지만 실제 상황에서는 거의 수행하지 않습니다.DOM을 여러 레벨로 이동

하므로 Vue는 O(n^3)에서 Diff를 최적화합니다. ) -> O(n), 이전 자식과 새 자식이 모두 여러 자식인 경우에만 노드에서 동일한 수준 비교를 수행하려면 핵심 Diff 알고리즘을 사용하면 됩니다. 🎜🎜Vue2의 핵심 Diff 알고리즘은 이중 끝 비교 알고리즘을 채택하는 동시에 이전 자식과 새 자식의 양쪽 끝에서 비교를 시작하고 키 값을 사용하여 재사용 가능한 항목을 찾습니다. 노드를 확인한 후 관련 작업을 수행합니다. React의 Diff 알고리즘과 비교하여 동일한 상황에서 모바일 노드 수를 줄이고 불필요한 성능 손실을 줄일 수 있으며 더 우아합니다. 🎜🎜Vue3.x는
ivi 알고리즘과 inferno 알고리즘 🎜🎜은 VNode가 생성될 때와 가 생성될 때 VNode 유형을 결정합니다. mount/ 패치 과정에서 비트 연산을 사용하여 VNode 유형을 결정합니다. 이를 기반으로 핵심 Diff 알고리즘과 결합되어 Vue2에 비해 성능이 향상됩니다. 엑스. (실제 구현은 Vue3.x 소스 코드와 함께 볼 수 있습니다.) 🎜🎜이 알고리즘도 동적 프로그래밍 아이디어를 사용하여 가장 긴 재귀 부분 수열을 해결합니다. 🎜🎜(보고 나면 프레임워크 곳곳에 데이터 구조와 알고리즘의 매력이 있다는 걸 알게 되실 겁니다)🎜

인터뷰어: (알았어, 알았어, 유망한 사람인 것 같은데, 자기소개서는 좀 지루하네요. 다음 단계 질문)

🎜(기본 동작, 6은 하지 마세요)🎜

14. 가상 돔의 역할과 주요 속성에 대해 이야기해보겠습니다

🎜브라우저에서 DOM을 조작하는 데 비용이 많이 들기 때문입니다. DOM에서 자주 작업하면 특정 성능 문제가 발생합니다. 이것이 가상 Dom의 원인입니다.
🎜🎜Vue2의 가상 DOM은 오픈 소스 라이브러리 snabbdom의 구현을 활용합니다. 🎜🎜

Virtual DOM은 기본적으로 DOM 노드를 설명하기 위해 기본 JS 객체를 사용합니다. 실제 DOM의 추상화 계층입니다.

(소스 코드의 VNode 클래스이며 src/core/vdom/vnode.js에 정의되어 있습니다.) 🎜🎜실제 DOM에 대한 VirtualDOM 매핑은 생성, 비교, 패치 및 기타 단계를 거쳐야 합니다. VNode의 🎜🎜키의 역할은 DOM 요소를 최대한 재사용하는 것입니다. 🎜🎜old와 new 자식의 노드 순서만 다른 경우에는 요소의 위치를 이동하여 업데이트 목적을 달성하는 것이 가장 좋은 작업입니다. 🎜🎜이전 하위 노드에서 재사용 가능한 노드를 찾을 수 있도록 이전 하위 노드와 새 하위 노드 간의 매핑 관계를 저장해야 합니다. 키는 하위 노드의 고유 식별자입니다. 🎜

15. keep-alive에 대해 알고 계시나요?

🎜keep-alive는 구성 요소가 전환될 때 구성 요소 캐싱을 실현할 수 있습니다. , 현재 구성 요소가 제거되지 않습니다.
🎜🎜일반적으로 사용되는 두 가지 속성 include/exclude를 사용하면 구성 요소를 조건부로 캐시할 수 있습니다. 🎜🎜현재 구성 요소가 활성 상태인지 확인하는 데 사용되는 두 가지 수명 주기 활성화/비활성화. 🎜🎜keep-alive는 LRU(Least Recent Used) 알고리즘도 사용합니다. 🎜🎜 (다시 데이터 구조와 알고리즘입니다. 알고리즘에도 프런트엔드에 많은 응용 프로그램이 있다는 것이 밝혀졌습니다.) 🎜

16 Vue의 구성 요소 수명 주기 호출 순서에 대해 이야기해 보겠습니다.

🎜컴포넌트 호출 순서는 첫 번째 부모, 다음 아들이고, 렌더링 완료 순서는 첫 번째 아들, 다음 부모입니다.
🎜🎜컴포넌트 파괴 작업은 첫 번째 부모, 그 다음 아들이며, 파괴 완료 순서는 첫 번째 아들, 다음 부모입니다. 🎜🎜렌더링 프로세스 로드 중🎜🎜

부모 beforeCreate->부모 생성->부모 beforeMount->child beforeCreate->child Created->child beforeMount- >child Mounted->parent Mounted

🎜🎜하위 구성 요소 업데이트 프로세스🎜🎜상위 beforeUpdate->child beforeUpdate->하위 업데이트->상위 업데이트🎜🎜상위 구성요소 업데이트 프로세스🎜🎜상위 beforeUpdate -> 상위 업데이트🎜

파괴 프로세스

parent beforeDestroy->child beforeDestroy->child destroy->parent destroy父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

17.Vue2.x组件通信有哪些方式？

父子组件通信

父->子props，子->父 $on、$emit

获取父子组件实例 $parent、$children

Ref 获取实例的方式调用组件的属性或者方法

Provide、inject 官方不推荐使用，但是写组件库时很常用
兄弟组件通信
Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue

Vuex
跨级组件通信
Vuex

$attrs、$listeners

Provide、inject

18.SSR了解吗？

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。

SSR有着更好的SEO、并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求。

19.你都做过哪些Vue的性能优化？

编码阶段

尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
v-if和v-for不能连用
如果需要使用v-for给每项元素绑定事件时使用事件代理
SPA 页面采用keep-alive缓存组件
在更多的情况下，使用v-if替代v-show
key保证唯一
使用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载

SEO优化

预渲染
服务端渲染SSR

打包优化

压缩代码
Tree Shaking/Scope Hoisting
使用cdn加载第三方模块
多线程打包happypack
splitChunks抽离公共文件
sourceMap优化

用户体验

骨架屏
PWA

还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

(优化是个大工程，会涉及很多方面，这里申请另开一个专栏)

20.hash路由和history路由实现原理说一下

location.hash的值实际就是URL中#后面的东西。

history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()

17. ?

상위-하위 컴포넌트 통신
Parent->Childprops, Child->Parent$on, $emit<p></p>부모-자식 구성 요소 인스턴스 가져오기<code>$parent, $children
Ref 구성 요소의 속성 또는 메서드를 호출하여 인스턴스 가져오기
제공 , 주입 공식적으로는 권장되지 않지만 컴포넌트 라이브러리를 작성할 때 매우 일반적으로 사용됩니다🎜
자매 컴포넌트 통신🎜이벤트 버스는 컴포넌트 간 통신을 실현합니다Vue .prototype.$bus = 새로운 Vue 🎜🎜Vuex🎜
교차 레벨 컴포넌트 통신🎜Vuex🎜🎜$ attrs, $listeners🎜 🎜제공, 주입🎜

🎜18. SSR을 이해하시나요? 🎜

🎜SSR은 서버 측 렌더링을 의미합니다.

는 Vue가 클라이언트 측에서 태그를 HTML로 렌더링하고 서버 측에서 완료한 다음 HTML을 클라이언트에 직접 반환한다는 것을 의미합니다. 코드>. <br>🎜🎜SSR은 SEO가 더 좋고 첫 화면 로딩 속도가 더 빠르다는 장점이 있습니다. 그러나 여기에는 몇 가지 단점도 있습니다. 예를 들어, 서버 측 렌더링은 <code>beforeCreate

및 created라는 두 가지 후크만 지원합니다. 일부 외부 확장 라이브러리가 필요합니다. 특수 처리를 위해서는 서버 측 렌더링 애플리케이션도 Node.js 실행 환경에 있어야 합니다. 서버에 대한 로드 요구도 더 높습니다. 🎜

🎜19. Vue에 대해 어떤 성능 최적화를 수행했나요? 🎜

🎜🎜🎜인코딩 단계🎜🎜
🎜

데이터의 데이터를 최소화합니다. 데이터의 데이터는 getter 및 setter를 추가하고 해당 감시자는 수집됩니다.
v-if와 v-for는 함께 사용할 수 없습니다.
v-for를 사용하여 이벤트를 각 요소에 바인딩해야 하는 경우 이벤트 프록시를 사용하세요.
SPA 페이지는 keep -alive 캐시 구성 요소를 사용합니다.
더 많은 경우 v-show 대신 v-if를 사용합니다.
키가 고유성을 보장합니다
사용 지연 로딩 및 비동기 구성 요소 라우팅
손떨림 방지, 조절
요청 시 타사 모듈 가져오기
긴 목록을 표시 영역으로 스크롤하여 로드 동적으로
지연 사진 로드 중

🎜🎜🎜SEO 최적화🎜🎜🎜

사전 렌더링
서버 측 렌더링 SSR

🎜🎜🎜패키징 최적화🎜 🎜🎜

코드 압축
Tree Shaking/Scope Hoisting
cdn을 사용하여 타사 모듈 로드
멀티 스레드 패키징 happypack
splitChunks 공개 파일 추출
sourceMap 최적화

🎜🎜🎜사용자 경험🎜🎜🎜

스켈레톤 화면
PWA

🎜캐시(클라이언트 캐시, 서버 캐시) 최적화를 사용하고 서버에서 gzip 압축을 활성화하는 등의 작업도 가능합니다. 🎜🎜(최적화는 큰 프로젝트이며 여러 측면이 관련됩니다. 여기에서 다른 칼럼을 열어주세요.)🎜

🎜20 해시 라우팅 및 히스토리 라우팅의 구현 원칙에 대해 이야기하겠습니다🎜

🎜 location .hash 값은 실제로 URL에서 # 뒤에 오는 값입니다.
🎜🎜history는 실제로 HTML5에서 제공하는 API를 사용하여 구현되며 주로 history.pushState() 및 history.replaceState()를 포함합니다. 🎜🎜면접관님은 옆에 있던 차가운 커피를 들고 한 모금 마셨습니다. 🎜🎜(이 사람에게 더 질문하면 안되나요?)🎜🎜프로그래밍 관련 지식을 더 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 꼭 알아야 할 Vue 인터뷰 질문 20개 이상(답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Vue에서 구성 요소를 생성하는 여러 가지 방법에 대한 간략한 분석다음 기사：Vue에서 구성 요소를 생성하는 여러 가지 방법에 대한 간략한 분석