[편집 및 공유] Vue 고빈도 면접 질문 몇 가지

이번에는 Vue에 대한 일반적인 인터뷰 질문을 공유하여 기본 지식을 정리하고 Vue 지식 보유량을 높이는 데 도움을 드릴 것입니다. 와서 살펴보세요!

제가 공유하는 내용은 몇 가지 일반적인 Vue 면접 질문이지만 이것이 전부를 대표하는 것은 아닙니다. 기사에 잘못된 부분이 있으면 지적해 주세요. 궁금한 점이 있거나 다른 인터뷰 질문이 있으면 댓글란에 메시지를 남겨서 함께 논의해 보세요.

1. vue2.0 구성 요소의 통신 방법은 무엇입니까?

• 부모-자식 구성 요소 통신: props 和 event, v- model, .sync、 ref、 $parent.sync$children, ref,

  $parent
및
• $어린이

  . (학습 영상 공유: $attr 和 $listenersvue 영상 튜토리얼provide 和 inject、eventbus、通过根实例$root访问、vuex、dispatch) brodcast

2. v-model是如何实现双向绑定的？

• vue 2.0v-modelv-bind 和 v-onv-model ，默认会为组件绑定名为 valueprop 和名为 input부모-자식이 아닌 구성 요소 통신:

  $attr
및
• $listeners

  , v-modelprovide 및 injectupdate:modelValue,

  eventbus
, 루트 인스턴스를 통한 액세스

$root

, vuex,

dispatch

및 brodcast

• 2. v-model은 양방향 바인딩을 어떻게 구현하나요?

• vue 2.0
v-model

은 양식 컨트롤이나 구성 요소에 양방향 바인딩을 만드는 데 사용됩니다. 핵심은

v-bind 및 v-on

의 구문 설탕입니다. 구성 요소에서

v-model을 사용하면 기본적으로 value

라는 구성 요소가 바인딩됩니다.

prop

및

input이라는 이벤트.

1. Vue3.0 3.x에서 정의된 구성요소에 대한
v-model
2. 은
modelValue를 전달하는 것과 동일합니다. prop

그리고 던져진

update:modelValue event

1. 3. Vuex와 단순한 전역 객체의 차이점은 무엇인가요?

Vuex와 전역 객체 사이에는 두 가지 주요 차이점이 있습니다.

Vuex의 상태 저장소는 반응형입니다. Vue 구성 요소가 저장소에서 상태를 읽을 때 저장소가 상태 그러면 해당 구성 요소가 그에 따라 효율적으로 업데이트됩니다.

스토어에서는 상태를 직접 변경할 수 없습니다. 저장소의 상태를 변경하는 유일한 방법은 명시적으로 커밋하는 것입니다. (커밋) 돌연변이. 이를 통해 각 상태의 변경 사항을 쉽게 추적할 수 있으며 일부 작업을 구현할 수 있습니다. 도구는 애플리케이션을 더 잘 이해하는 데 도움이 됩니다.

• v-if4. Vue의 컴포넌트 및 하위 컴포넌트 라이프사이클 후크의 실행 순서는 무엇입니까?

• 렌더링 프로세스:

  ⽗컴포넌트 마운팅은 모든 하위 컴포넌트가 마운트된 후에만 완료되어야 합니다. 마운트가 완료되었으므로 하위 구성요소를 마운트한 후 v-showbeforeCreate ->created -> ◗beforeMount -> 하위 생성 -> ⽗마운트 업데이트됨

  은 ⽗ 구성요소에 영향을 미치지 않습니다. ⼦beforeUpdate -> ⼦updated

v-if 切换的开销更⼤，⽽ v-show⽗구성요소 업데이트 프로세스: v-showv-if는 ⽗ 구성요소에 영향을 미칩니다. ⽗beforeUpdate -> ⼦updated -> ⽗ 업데이트됨

은 ⼦ 구성요소에 영향을 주지 않습니다. ⽗beforeUpdate -> ⽗updated

파기 프로세스: ⽗beforeDestroy -> Destroyed ◗destroyed

사실 이해하기만 하면 상황이 어떻든 자식 컴포넌트가 완료되기를 기다리는 부모 컴포넌트여야 합니다. 완료된 후에만 해당 완료된 후크가 실행되므로 기억하기 쉽습니다🎜🎜🎜5. v-show와 v-if의 차이점은 무엇인가요? 🎜🎜🎜🎜🎜🎜v-if🎜는 전환 프로세스 중에 이벤트 리스너와 조건부 블록의 하위 구성 요소를 🎜파괴하고 다시 빌드🎜합니다. 초기 조건이 false인 경우 처음으로 조건이 충족될 때까지 아무 작업도 수행되지 않습니다. true인 경우 렌더링 시작 염색 모듈. 🎜🎜🎜🎜🎜v-show🎜는 초기 조건에 관계없이 단지 🎜CSS 기반 전환🎜일 뿐입니다. 모든 것이 렌더링됩니다. 🎜🎜🎜🎜그래서 🎜v-if🎜 전환 오버헤드가 더 크고, ⽽ 🎜v-show🎜 초기 렌더링 오버헤드가 더 큽니다. ⼼, 🎜는 자주 전환해야 하거나 전환하는 DOM 부분이 매우 복잡할 때 🎜v-show🎜를 사용하는 것이 더 적합합니다. 적합한. 렌더링 후 전환이 거의 없다면 🎜v-if🎜를 사용하는 것이 더 적합합니다. 🎜🎜🎜🎜6. Vue의 v-html은 어떤 문제를 일으키나요? 🎜🎜🎜웹사이트에서 임의의 HTML을 동적 렌더링하면 쉽게 XSS 공격이 발생할 수 있습니다🎜. 그러니 믿을 수 있는 범위 내에서만 가능합니다 콘텐츠에는 v-html을 사용하고 사용자가 제출한 콘텐츠에는 절대 사용해서는 안 됩니다. 🎜

7. V-for에서 키의 역할은 무엇인가요?

key 是给每个 vnode 指定的唯⼀ id 동시에 레벨 vnode diff 过程中，可以根据 key 빠른 비교를 통해 여부를 판단할 수 있습니다. 동일한 노드이며 key 的唯⼀性可以⽣成 map를 사용하면 더 빨라집니다. 해당 노드를 가져옵니다.

key을 추가로 지정한 후에는 "내부 재사용" 전략이 더 이상 사용되지 않으므로 렌더링의 정확성을 보장할 수 있습니다. .

8. v-for와 v-if를 함께 사용하는 것이 권장되지 않는 이유

• v-for 和 v-if가 같은 노드에 있을 때 v- for ⽐ v-if 更⾼，这意味着 v-ifv-ifv-for의 우선순위가 업데이트되었습니다. 이는
v-if
• 가 각각 반복됨을 의미합니다. 모든 computedv-for
루프에서 실행됩니다. 순회할 배열의 크기는 매우 크지만 표시할 실제 데이터는 매우 작은 경우 , 이로 인해 많은 성능 낭비가 발생합니다.

이 시나리오에서는 computed를 사용하여 먼저 데이터를 필터링하는 것이 좋습니다.

9. vue-router 해시 모드와 히스토리 모드의 차이점은 무엇인가요?

• 차이:

• URL 표시, 해시 모드에는 "#"이 있고 기록 모드에는 없습니다.

• ⻚⾯ 새로고침 시 해시 값에 해당하는 ⻚⾯, ⽽ 기록에 해시 모드를 정상적으로 로드할 수 있습니다. 자리가 없어 올바르게 처리되면 404가 반환됩니다. 일반적으로 모든 페이지를 홈페이지 경로로 리디렉션하도록 백엔드를 구성해야 합니다.

호환성. 해시는 낮은 버전의 브라우저와 IE

• 10을 지원할 수 있습니다. vue-router 해시 모드와 히스토리 모드는 어떻게 구현되나요?

#

해시 모드:

#

해시 값이 변경되어도 브라우저가 서버에 요청을 보내지 않으며 브라우저가 요청을 보내지 않습니다. 요청하면 페이지가 새로 고쳐지지 않습니다. 동시에 hashchange 이벤트를 청취하면 해시에서 어떤 변경이 발생했는지 알 수 있으며 이를 기반으로 페이지 콘텐츠의 일부를 업데이트하는 작업을 구현하기 위해 해시 변경 사항을 적용합니다. pushStatereplaceState

history 모드:

history 모드의 구현은 주로 HTML5 표준에서 출시된 두 개의 API인

pushState

와
• replaceState
, 이 두 API는 URL을 변경할 수 있지만 요청을 보내지는 않습니다. 이런 식으로 모니터링할 수 있습니다. 페이지 콘텐츠의 일부를 업데이트하려면 URL 변경 사항을 수신하세요.
• 11. vue2.x와 비교하여 vue3.0의 변경 사항은 무엇입니까?
• 모니터링 메커니즘 변경(Object.defineProperty —> 프록시)

Template

객체 스타일 구성 요소 선언(클래스)

⽤ts 사용

• 기타 변경 사항: ⽀정의 렌더링 서버 지원, 조각(다중) 지원 루트 노드) 및 포털( 트리쉐이킹 최적화를 기반으로 하는 DOM(렌더링 및 콘텐츠 구축) 구성 요소의 다른 부분은 더 많은 내장 기능을 제공합니다Model-View-ViewModel 缩写，也就是把 MVCController 演变成 ViewModel
• 12.

MVVM은

Model-View-ViewModel의 약자로 MVC

를 넣은 것입니다.

Controller
• 는 ViewModel으로 발전했습니다.
• Model 레이어는 데이터 모델을 나타내고, View는 UI 구성 요소를 나타내며, ViewModel은 View와 Model 레이어 사이의 브리지입니다. Data는 viewModel 레이어에 바인딩되어 뷰가 변경되면 자동으로 데이터를 페이지에 렌더링합니다. , 알림이 전송됩니다 viewModel 레이어는 데이터를 업데이트합니다 .

13. vue의 구성 요소 데이터가 직접 객체가 아닌 객체를 반환하는 함수인 이유는 무엇입니까?

데이터가 객체로 정의되면

모든 구성 요소 인스턴스가 데이터 복사본을 공유합니다. 따라서 어떤 구성 요소 인스턴스 데이터가 수정되더라도 모든 구성 요소 인스턴스에 영향을 미칩니다.

컴포넌트의 데이터는 함수로 작성되고,

데이터는 함수 반환 값의 형태로 정의되므로computed 和 data 각 컴플렉스는 구성 요소를 한 번 사용하면 새 데이터 복사본이 반환됩니다. 이는 각 구성 요소 인스턴스에 대해 Observer 遍历 data개인 데이터 공간get/set 数据拦截

2、初始化 computed 会调⽤ initComputed 函数

• 注册⼀个 watcher 实例，并在内实例化⼀个 Dep을 생성하여 각 구성 요소 인스턴스가 자체 데이터를 유지할 수 있도록 하는 것과 유사합니다. 간단히 객체 형식으로 작성하면 모든 구성 요소 인스턴스에 공통됩니다. 데이터의 한 조각을 알면 모든 것을 바꾸는 결과가 나옵니다. watcherwatcher ）

• 调⽤计算属性时会触发其 Object.definePropertyget

  14. Vue에서 계산이 구현되는 방식 🎜🎜🎜🎜프로세스는 다음과 같이 요약됩니다. 🎜🎜🎜1 구성 요소가 초기화되면 🎜computed🎜 및 🎜data🎜가 별도로 빌드됩니다. ⾃의 응답 시스템인 🎜Observer🎜는 🎜data🎜의 각 속성 설정을 순회합니다. 🎜get/set🎜 데이터 차단🎜🎜2. 초기화 🎜computed🎜는 🎜initCompulated🎜 함수 🎜🎜🎜🎜를 호출하여 🎜watcher🎜 인스턴스를 등록하고 내부에 🎜Dep🎜 메시지를 인스턴스화합니다. 정보 구독자는 후속 컬렉션 종속성(예: 렌더링 함수의 🎜watcher🎜 또는 기타 관찰된 계산 속성)으로 사용됩니다. 변경된 🎜watcher🎜 )🎜🎜🎜🎜계산된 속성을 호출하면 🎜Object.defineProperty🎜가 트리거됩니다. 🎜get🎜 접근자 기능🎜

• 자신의 메시지 구독자에게 watcher.depend()호출할 수 없습니다. watcher의 dep의 subsdep 的 subs 中添加其他属性的watcher

• 调⽤ watcher 的 evaluatewatcher 的 get ⽅法）让⾃身成为其他watcher 的消息订阅器的订阅者，⾸先将 watcher 赋给 Dep.targetgetterdata 、 props 或其他 computedcall⽤evaluatewatcher에 다른 속성을 추가하세요. > /code> 메소드(호출 get 访问器函数从⽽将该计算属性的 watcher 添加到求值函数中属性的watcher 的消息订阅器 dep 그럼 Dep.target 赋为 null 평가 함수를 실행한 후 평가 함수 내부의 속성에 접근할 때(예: Tathagata

  ), 다음과 같은 경우에도
가 실행됩니다. 작업이 완료되어 드디어 닫히고

평가 함수 결과를 반환합니다.

setdep 的 notifywathcer 的 subs3. 특정 속성이 변경되면 watcher 的 update 차단 기능을 트리거한 다음 자체 메시지 구독자를 호출합니다.

방법 전체 모든 구독자

배열은 현재 dep에 하나씩 저장됩니다. 광장에 전화하세요 응답 업데이트를 완료하는 방법입니다.

15. Vue의 반응 원리

이 질문을 받았는데 설명이 명확하지 않은 경우 Vue 공식 문서에서 직접 그림을 그려서 볼 수 있습니다. 설명이 더 좋을 것 같습니다.

• Object.defineProperty 对数据进⾏劫持，并结合观察者模式实现。
• Vue 利⽤Object.defineProperty 创建⼀个 observegetter和 setter 。
• Vue 中每个组件实例都会对应⼀个 watchergetter 收集为依赖。之后当依赖项的 setterVue의 반응성은 watcher ，从⽽使它关联的组件重新渲染。

16. Object.defineProperty有哪些缺点？

• Object.defineProperty 只能劫持对象的属性，⽽ Proxy데이터를 하이재킹하고 이를 관찰자 모드Object.defineProperty와 결합하여 달성됩니다.

Vue는 ⽤
• 를 사용하여 관찰을 생성합니다. 모든 속성을 가로채서

  및 setter로 변환합니다. Object.definePropertyObserve ， 由于Object.definePropertyVue의 각 구성 요소 인스턴스는 구성 요소 렌더링 중에 표시되는 watcher 인스턴스에 해당합니다. 그 과정에서 사용된 데이터 속성은 Object.defineProperty를 통해 종속성으로 수집됩니다. 그런 다음 종속성의 setter가 실행되면 , watcher에 알림이 전송되어 관련 구성 요소가 다시 렌더링됩니다. data中的数组或对象新增属性时，需要使⽤ vm.$set

16. Object.defineProperty의 단점은 무엇인가요?

• Proxy은 definePropertyobjects의 속성만 하이재킹할 수 있습니다. ⽽
는 직접적인
• 프록시 객체

  이기 때문입니다. Proxy ，但 getter 和 setter 속성만 하이재킹할 수 있으며, 객체의 각 속성을 순회해야 합니다. 그리고 프록시는 객체를 직접 프록시할 수 있습니다.

• Proxy 兼容性差 ⽬前并没有⼀个完整⽀持 Proxy 새 속성을 수동으로 추가해야 함 관찰,

  이 개체의 속성을 가로채기 때문에, 따라서 속성을 추가할 때 개체를 다시 순회하여 새 속성을 추가해야 합니다. 속성을 추가한 다음
를 사용하여 하이재킹하세요. 이러한 이유로 사용하는 것은 Vue는

재능을 제공합니다 새로 추가된 속성도 반응하는지 확인하세요.

⽀13가지 유형의 차단Observer 작업을 지원합니다. __proto__ 없는 것. pushunshift ， splice새로운 표준 성능 보너스 프록시 새로운 표준으로 JS 엔진은 장기적으로 계속해서 최적화될 것입니다.

, 하지만

및 setter는 기본적으로 더 이상 대상이 아닙니다. 성적 최적화.

현재 완벽한 지원이 없습니다. 🎜 차단 방법을 사용하는 Polyfill 솔루션🎜🎜🎜🎜🎜17. Vue2.0에서 배열 변경을 감지하는 방법은 무엇입니까? 🎜🎜🎜Vue의 🎜는 배열을 별도로 처리하고 배열 메서드를 컴파일한 후 🎜프로토타입 체인🎜의 메커니즘으로 인해 배열 속성의 🎜속성에 해당하는 더 이상 방법을 찾지 않겠습니다. 컴파일 방법에는 인덱스를 늘리는 몇 가지 방법이 포함됩니다(🎜, 🎜 ) 수동 관찰을 수행합니다. 🎜🎜🎜18. nextTick의 기능은 무엇인가요? 🎜🎜🎜이 질문에 명확하게 대답하기 위한 전제 조건은 EventLoop 프로세스를 이해하는 것입니다. 🎜

• 다음 DOM 업데이트 주기가 끝난 후 지연된 콜백을 실행하고, 데이터 수정 후 nextTick을 사용하여 즉시 가져옵니다. 업데이트된 DOM.
• nextTick 마이크로 태스크 구현을 위해 먼저 지원 여부를 확인하겠습니다. Promise. 지원되지 않는 경우, 매크로 태스크 구현을 먼저 확인합니다. 지원되는지 테스트하세요 setImmediate (IE 및 Etage 상위 버전에서 지원됨) 지원되지 않는 경우 지원되는지 확인하세요. MessageChannel이 지원되지 않으면 결국 setTimeout 0으로 다운그레이드됩니다.
• 기본적으로 마이크로 작업은 한 번의 틱으로 완료될 수 있으므로 먼저 마이크로 작업 모드에서 실행됩니다. 구현이 완료되었으며 다시 그리기 및 애니메이션을 사용하는 일부 장면에서 더 나은 성능을 발휘합니다.
• 그러나 마이크로 태스크의 우선순위가 높기 때문에 경우에 따라 이벤트 버블링 프로세스 중에 트리거될 수 있습니다. 일부 문제가 발생하므로 일부 장소에서는 매크로 작업(예: v-on)을 강제로 사용하게 됩니다. v-on ）。

注意：之所以将 nextTicknextTicknextTcik

Note

: 의 콜백 함수를 배열에 한 번만 넣는 이유 에서 콜백 함수를 직접 실행하는 대신 실행하는 것은 동일한 틱 내에서 여러 호출이 실행될 수 있도록 하기 위한 것입니다. 이번에

를 실행하면 여러 비동기 작업이 시작되지 않고 대신 이러한 비동기 작업이 하나의 동일한 작업으로 압축됩니다. 단계 작업은 다음 틱 내에 실행됩니다.

19. Vue의 템플릿 컴파일 원리

Vue 템플릿의 컴파일 프로세스는 3단계로 나뉩니다.

단계 ⼀: 구문 분석

템플릿 문자열을 AST로 구문 분석하고 AST 요소 노드로 3가지 유형이 있습니다. 전체적으로 1은 일반 요소이고 2는 표현식 3은 일반 텍스트입니다.

2단계: 구문 트리 최적화

Vue 템플릿의 모든 데이터가 반응하는 것은 아닙니다. 첫 번째 렌더링 이후에는 절대 변경되지 않는 많은 데이터가 있습니다. 데이터의 이 부분에 의해 생성된 DOM은 변경되지 않으며 패치 프로세스 중에 비교를 건너뛸 수 있습니다.

이 단계에서 생성된 AST 트리는 각 하위 트리가 정적 노드인지 여부를 감지하기 위해 심층적으로 탐색됩니다. 생성된 DOM은 변경할 필요가 없으므로 런타임 시 템플릿 업데이트가 크게 최적화됩니다.

1. 코드 생성

const code = generate(ast, options)

generate 메소드를 사용하여 ast를 렌더링 함수로 변환하세요.

Proxy

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

Vue3.x가 Object.defineProperty를 대체하도록

변경되었습니다. Proxy는 직접 모니터링할 수 있기 때문에 객체와 배열에 변화가 있고, 가로채기 방법도 무려 13가지나 된다. 그리고 새로운 표준으로서 브라우저 제조업체의 지속적인 성능 최적화가 적용됩니다. 변화.

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

Reflect.get의 현재 반환 값이 Object인지 확인합니다. 그렇다면 반응형 메서드를 프록시로 사용하세요. 이런 식으로 깊은 관찰이 이루어집니다.

어레이를 모니터링할 때 get/set가 여러 번 트리거될 수 있는데, 다중 트리거를 방지하는 방법은 무엇입니까?

키가 현재 프록시 객체의 대상 속성인지 확인할 수 있으며, 이전 값과 새 값이 같은지 여부도 확인할 수 있습니다. 위의 두 가지 조건 중 하나가 충족되어야만 트리거 실행이 가능합니다.

21. Vue에 대해 어떤 성능 최적화를 수행했나요? ⽤v - 각 요소에 이벤트를 바인딩할 때 이벤트 프록시를 사용합니다

SPA ⻚⾯는 연결 유지 캐싱 구성 요소를 채택합니다
• 더 많은 경우에는 v-show
• key 대신 v-if를 사용하여 고유성을 보장합니다
라우팅 지연 사용 로딩, 비동기 구성 요소
• 손떨림 방지, 조절
• 요청 시 타사 모듈 가져오기
• ⻓목록을 표시 영역으로 스크롤하고 동적으로 로드
• 이미지 지연 로딩
• SEO 최적화
• 렌더링

서버 측 렌더링 SSR

패키징 최적화
• 압축 코드

Tree Shaking/Scope Hoisting으로 ⽤cdn이 세 번째⽅모듈을 로드

멀티 스레드 패키징 happypack
• splitChunk 에서 추출한 것입니다. 공개 텍스트
• sourceMap 최적화
• 사용자 경험
• 스켈레톤 화면

PWA

캐시(클라이언트 캐시, 서버 캐시) 최적화, 서버에서 gzip 압축 활성화 등을 사용할 수도 있습니다.

• (학습 영상 공유:
웹 프론트엔드 개발
• ,
기본 프로그래밍 영상

)

위 내용은 [편집 및 공유] Vue 고빈도 면접 질문 몇 가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!