Vue 지식 보유량을 향상하기 위한 37가지 일반적인 Vue 인터뷰 질문!

이 기사는 37가지 일반적인 Vue 인터뷰 질문을 요약하고 공유하여 기초를 강화하고 Vue 지식 보유량을 향상시키는 데 도움이 됩니다. 그냥 외우면 끝입니다!

관련 추천: 2022 빅 프런트엔드 면접 질문 요약(모음)

1. MVVM에 대한 이해에 대해 이야기해 주세요.

단순화된 매핑 관계, 숨겨진 컨트롤러 MVC를 기반으로 MVVM은 제어 계층을 숨깁니다.

Vue는 MVVM 프레임워크가 아니라 뷰 레이어 프레임워크입니다. [관련 추천: vue.js 동영상 튜토리얼]

ViewModal은 데이터와 뷰를 연결하는 브릿지입니다.

2. Vue의 반응형 데이터에 대한 이해에 대해 이야기해 주세요.

배열과 객체 유형의 값이 변경되면 defineReactive方法，借助了defineProperty，将所有的属性添加了getter和setter를 전달하세요. 사용자는 값을 얻고 설정할 때 일부 작업을 수행할 수 있습니다.

결함: 가장 바깥쪽 속성만 모니터링할 수 있습니다. 다중 계층인 경우 전체 재귀가 필요합니다.

Get은 종속성 수집을 수행합니다(dep[watcher, watcher]). 데이터 업데이트는 세트에서 수행됩니다(업데이트 알림, 관찰자에게 알림)

3. Vue에서 배열의 변경 사항을 감지하는 방법은 무엇입니까?

Vue는 배열에 대한 속성을 정의하지 않지만 배열의 7가지 메서드를 다시 작성합니다.

• push
• shift
• pop
• splice
• unshift
• sort
• reverse

이 방법은 배열 자체를 변경하기 때문입니다.

배열의 인덱스와 길이는 모니터링할 수 없습니다.

4. Vue에서 종속성을 수집하는 방법은 무엇입니까?

Vue가 초기화되면 마운트 후 컴파일됩니다. renderFunction을 생성합니다.

값을 획득하면 Watcher를 수집하여 Dep에 배치합니다.

사용자가 값을 변경하면 관찰자에게 뷰를 업데이트하라는 알림이 전송됩니다.

5. Vue의 템플릿 컴파일 원리를 어떻게 이해하나요?

이 문제의 핵심은 템플릿을 렌더링 기능으로 변환하는 방법입니다.

1. 템플릿 모듈을 ast 문법 책으로 변환 - parserHTML
2. 정적 문법 표시(일부 노드는 변경되지 않음)
3. 코드 재생성 - codeGen, with 구문을 사용하여 문자열 래핑

6. Vue life 사이클 후크 어떻게 구현되나요?

Vue의 라이프 사이클 후크는 콜백 함수이며, 컴포넌트 인스턴스 생성 시 해당 후크 메서드가 호출됩니다. Hook은 내부적으로 처리되며 Hook 기능은 배열 형태로 유지됩니다.

7. Vue 구성요소의 수명주기는 어떻게 되나요?

• beforeCreate는 인스턴스 초기화 후, 데이터 관찰 관찰자와 이벤트 및 관찰자 이벤트 구성 전
• 생성됩니다. 이 단계에서 다음 구성이 완료됩니다.
  • 데이터 관찰
  • 속성 작업. 및 메소드
  • 감시/이벤트 시간 콜백
  • $el이 아직 생성되지 않았습니다
• beforeMount가 마운트 전에 호출되고 렌더가 아직 호출되지 않았습니다
• mounted el이 새로 생성된 vm.$el로 대체됩니다.
beforeUpdate는 데이터가 업데이트될 때 호출되며, 가상 Dom이 다시 렌더링되고 패치되기 전에 발생합니다.
• update는 데이터 변경으로 인해 가상 Dom이 다시 렌더링되고 패치된 후에 호출됩니다.
• beforeDestroy는 인스턴스가 파괴되기 전에 호출됩니다.
• 파괴된 인스턴스 호출 후에는 Vue 인스턴스의 모든 것이 바인딩 해제되고 모든 이벤트 리스너가 제거됩니다. 서버 측 렌더링 중에는 후크가 호출되지 않습니다
• keep-alive (활성화 및 비활성화)

싱글톤 모드이므로 병합 작업이 없으므로 루트 인스턴스는 병합 작업이 필요하지 않습니다. 데이터가 함수인지 확인하십시오. 컴포넌트의 데이터는 두 컴포넌트의 데이터가 오염되는 것을 방지하는 기능이어야 합니다. 모두 개체인 경우 병합 시 동일한 주소를 가리킵니다. 그리고 함수인 경우 병합 시 호출하면 공백이 2개 생성됩니다. new Vue

• nextTick의 콜백은 다음 Dom 업데이트 주기가 끝난 후 실행되는 지연된 콜백입니다.
• 업데이트된 Dom을 얻는 데 사용할 수 있습니다.
• nextTick을 사용하면 사용자 정의 논리를 보장할 수 있습니다. 업데이트 후 업데이트됩니다.

11. 계산과 감시의 차이점은 무엇인가요?

• Computed와 Watch 모두 Watcher를 기반으로 구현됩니다.
• 계산된 속성은 캐시되며 종속 값은 변경되지 않습니다. 값을 가져올 때 계산된 속성 메서드는 반복적으로 실행되지 않습니다.
• watch는 값이 변경되면 콜백 함수가 호출됩니다.

12. Vue.set 메소드는 어떻게 구현되나요?

• vue는 객체와 배열 자체 모두에 dep 속성을 추가합니다.
• 존재하지 않는 속성을 객체에 추가하면 객체가 의존하는 감시자가 업데이트되도록 트리거됩니다.
• 배열 인덱스가 수정되면, 배열 자체를 배열 업데이트를 위한 splice 메소드라고 합니다

13. Vue가 가상 Dom을 사용하는 이유는 무엇입니까? 가상 Dom은 성능이 낮기 때문에 실제 Dom을 추상화한 js 객체를 사용합니다. Dom을 직접 조작하지만, js 레이어에서는 Dom 연산을 객체 연산으로 변환할 수 있어 연산 효율성이 높습니다. 마지막으로 차이점은 diff 알고리즘을 통해 업데이트되어 Dom을 업데이트합니다

가상 Dom은 실제 플랫폼 환경에 의존하지 않으며 크로스 플랫폼이 가능합니다
• 14. Vue의 diff 알고리즘의 원리는 무엇인가요?
• Vue의 diff 알고리즘은 평면 비교이며 교차 수준 비교를 고려하지 않습니다. 내부적으로는 deep recursion + double 포인터 방식을 사용하여 비교

먼저 두 노드가 같은 노드인지 비교

같은 노드의 속성을 비교하고 기존 노드를 재사용

먼저 아들 노드를 비교하고 이전 노드와 새 노드의 아들
• 최적화 비교: 일대일, 일대일, 일대일, 일대일
• 비교 검색 및 재사용
• 15. Vue는 데이터 하이재킹을 통해 데이터 변경 사항을 정확하게 감지할 수 있는데, 차이점을 감지하기 위해 왜 diff를 수행해야 합니까?
• 반응형 데이터 변경, Vue는 데이터가 언제 변경되는지 실제로 알 수 있으며 반응형 시스템은 즉시 알 수 있습니다. 하지만 각 속성에 Watcher를 추가하면 성능이 매우 저하됩니다.

너무 세분화하면 부정확한 업데이트가 발생합니다.

• 그래서 watcher + Diff 알고리즘을 사용하여 차이점을 감지합니다.
• 16. 키의 기능과 원리를 설명해 주세요

Vue의 패치 과정에서 키를 사용하여 두 가상 노드가 동일한 노드인지 확인할 수 있습니다.

키가 없으면 업데이트 중에 문제가 발생합니다

인덱스를 키로 사용하지 마세요
• 세븐틴. 컴포넌트에 대한 이해에 대해 이야기해 보세요

컴포넌트 기반 개발은 애플리케이션 개발 효율성과 테스트 가능성을 크게 향상시킬 수 있습니다.

자주 사용되는 컴포넌트화 기술: 속성, 커스텀 이벤트, 슬롯

업데이트 범위 축소, 변경된 컴포넌트 다시 렌더링
• 높은 응집력, 낮은 결합도, 단방향 데이터 흐름
• 18, 컴포넌트 렌더링 프로세스에 대해 설명해주세요
• 컴포넌트의 가상 노드 생성->컴포넌트의 실제 노드 생성->페이지에 삽입

19.컴포넌트의 업데이트 프로세스를 설명해주세요.

속성 업데이트는 patchVnode 메소드를 트리거합니다. 가상 노드는 사전 패치 후크를 호출한 다음 속성을 업데이트하고 구성 요소를 업데이트합니다.

20. 비동기식 구성 요소의 원리

먼저 비동기 자리 표시자 노드를 렌더링합니다. -> 구성 요소가 로드된 후 forceUpdate를 호출하여 강제로 업데이트합니다.

기능적 구성 요소의 특성: 상태 비저장, 수명 주기 없음, 없음. 그러면 성능이 조금 더 높아질 것입니다.

• 기능적 구성 요소는 일반적인 기능입니다.

22. 컴포넌트에 값을 전달하는 방법은 무엇인가요?

1. props 및 $emit을 통해 상위 구성 요소에 데이터를 전달합니다. 상위 구성 요소는 prop을 통해 하위 구성 요소에 데이터를 전달합니다. 하위 구성 요소는$t
t
2. rs $attrs\; 및at$sprovide/inject는 주로 크로스 레벨 데이터 전송을 달성하기 위해 플러그인에 적용하는 데 더 적합합니다.
스물넷, v-for와 v-if 중 어느 것이 더 우선순위가 높나요?
3. 우선, v-for와 v-if는 같은 태그에 사용할 수 없습니다. v-for를 먼저 처리한 다음 v-if를 처리하세요. $$

   동시에 발생하는 경우 계산된 속성을 사용하여 먼저 데이터를 처리한 다음 v-for를 수행하여 루프 수를 줄이는 것을 고려해야 합니다.

   25. V-모드는 어떻게 구현되나요?

   구성 요소에 사용되는 v-모델은 모델과 콜백입니다

   

   일반 요소에 v-모델을 사용하면 명령이 생성되고 다른 요소로 인해 생성될 수도 있습니다.

   • 값 및 입력 생성
   • 언제 변경 및 radio
   • 생성된 변경 및 확인

   

   지침이 호출됩니까?

   

   소스 코드:

   

   26. Vue의 일반 슬롯과 ​​스코프 슬롯의 차이점

   일반 슬롯

   일반 슬롯은 렌더링 후 교체 작업입니다. 상위 구성 요소가 렌더링된 후 하위 구성 요소의 콘텐츠를 바꿉니다.

   

   템플릿을 컴파일할 때 구성 요소의 하위 노드와 슬롯 태그를 처리합니다.

   

   요소를 생성할 때 _t() 메서드를 사용하여 _v()의 내용을 바꿉니다.

   

   스코프 슬롯

   스코프 슬롯은 하위 구성 요소의 속성을 가져올 수 있습니다. 하위 구성 요소의 속성을 전달하고 렌더링합니다.

   

   

   스코프 슬롯의 컴파일 결과:

   

   

   28. Vue.use는 무엇을 합니까?

   Vue.use 플러그인을 사용하는 데 사용됩니다. 플러그인에서 전역 구성 요소, 지시문, 프로토타입 메서드 등을 확장할 수 있습니다. install 메소드는 기본적으로 Vue의 구성 함수를 전달하기 위해 호출됩니다. vue 라이브러리에 의존하지 않고 플러그인에서 vue를 사용할 수 있습니다.

   

   29. 컴포넌트 이름을 작성하면 어떤 이점이 있나요?

   • name 속성을 추가하면 구성 요소 자체가 구성 요소 속성에 추가되어 구성 요소의 재귀 호출을 구현합니다.
   • 해당 구성요소를 쉽게 디버깅하고 찾을 수 있도록 구성요소의 특정 이름을 나타낼 수 있습니다.

   서른, vue의 수식어는 무엇인가요?

   • .stop
   • .prevent
   • .capture
   • .self
   • .once
   • .passive
   • .right
   • .center
   • .middle
   • .alt

   31. 커스텀을 이해하는 방법 지침?

   • ast 구문 트리를 생성할 때 명령어가 발견되면 directives 속성이 현재 요소에 추가됩니다.
   • 명령어 코드는 genDirectives를 통해 생성됩니다.
   • 패치하기 전에 명령어의 후크를 cbs로 추출하고 호출합니다. 패치 과정 중 해당 Hook
   • cbs에 해당하는 Hook을 실행할 때 해당 명령어 정의 메소드를 호출합니다

   32 Keep-alive는 주로 어디에 사용되나요? 원리는 무엇입니까?

   • Keep-alive를 사용하여 동적 구성 요소를 래핑하면 구성 요소가 다시 생성되지 않도록 구성 요소가 캐시됩니다.

   두 가지 시나리오를 사용할 수 있습니다. 하나는 동적 구성 요소이고 다른 하나는 라우터 보기입니다

   

   생성된 화이트리스트와 블랙리스트는 다음과 같습니다. 캐시해야 할 것과 캐시할 필요가 없는 것을 나타냅니다. 그리고 최대 캐시 수입니다.

   

   캐시되는 것은 키 및 값 개체와 함께 저장되는 구성 요소의 인스턴스입니다.

   로드시 포함 및 제외를 모니터링하세요.

   

   캐싱이 필요하지 않은 경우 가상 노드를 직접 반환합니다.

   캐시가 필요한 경우 컴포넌트의 ID와 태그 이름을 사용하여 키를 생성하고 현재 vnode의 인스턴스를 값으로 사용하여 객체로 저장합니다. 캐시 목록입니다

   최대 캐시 개수가 설정되어 있다면 0번째 캐시를 삭제해주세요. 최신 캐시를 추가하세요.

   true가 되도록 구성요소에 keepAlive 변수를 추가하세요. 구성요소가 초기화되면 더 이상 초기화되지 않습니다.

   33. vue-router에는 몇 개의 후크 기능이 있나요? 실행과정은 어떻게 되나요?

   세 가지 종류의 Hook 함수가 있습니다:

   • Global Guard
   • Route Guard
   • Component Guard

   

   34. vuerouter의 두 모드 차이점

   • vue-router에는 세 가지 모드가 있습니다. , 즉 hash,history,abstract
   • abstract는 브라우저를 지원하지 않는 API의 장면을 변경할 때 사용됩니다
   • hash 모드는 호환성은 좋지만 아름답지 않고 SEO에 도움이 되지 않습니다
   • history는 아름답습니다, HistoryAPI +popState, 새로 고침하면 404

   가 발생합니다. 35. Vue의 성능 최적화는 무엇입니까?

   • 데이터 수준을 너무 깊게 설정하지 말고 반응형 데이터를 합리적으로 설정하세요
   • 데이터를 사용할 때 값의 결과를 캐시하고 값을 자주 가져오지 마세요
   • 키를 합리적으로 설정하세요
   • v-show (잦은 전환의 고성능) 및 v-if 합리적인 사용
   • 구성 요소의 세분성 제어-> Vue는 구성 요소 수준 업데이트를 사용합니다
   • 기능적 구성 요소는 비용이 저렴합니다
   • 비동기 구성 요소 사용-> webpack의 하도급 전략을 활용하여
   • keep -alive를 사용하여 구성 요소 캐시하기
   • 가상 스크롤, 시간 분할 및 기타 전략
   • 패키징 최적화

   36. Vuex에 대해 어떻게 이해하고 있나요?

   Vuex는 Vue를 위해 특별히 제공되는 글로벌 상태 관리 시스템으로, 여러 구성 요소에서 데이터 공유 및 데이터 캐싱에 사용됩니다.

   문제: 지속할 수 없습니다.

   

   • mutation은 주로 상태를 수정하고 동기식으로 실행합니다.
   • action은 재사용을 용이하게 하기 위해 비즈니스 코드를 실행하며 로직은 비동기식일 수 있습니다. 상태는 직접 수정할 수 없습니다.

   37. Vue에서는 어떤 디자인 패턴이 사용되나요?

   • 단일 케이스 모드: 여러 번 새로 만들기, 단 하나의 인스턴스

   

   • 팩토리 모드: 매개변수를 전달하여 인스턴스를 생성(가상 노드 생성)할 수 있습니다.
   • 게시 및 구독 모드: eventBus
   • Observer 모드: watch and dep
   • 프록시 모드: _data 속성, 프록시, 흔들림 방지, 조절
   • 중간 모드: vuex
   • 전략 모드
   • 외관 모드

   원본 주소: https://juejin.cn/post / 7043074656047202334

   저자 : Hai Mingyue

   (학습 영상 공유 : 웹 프론트엔드)