Vue 인터뷰 질문 소개(답변 포함)-JS 튜토리얼-php.cn

이 기사는 Vue 인터뷰 질문(답변 포함)에 대한 소개를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Vue가 점점 인기를 얻고 있습니다. 국내외를 살펴보면 Vue는 BAT 등 대기업이나 스타트업 기업 등 폭넓게 활용되고 있다. 인터뷰 중에는 Vue 관련 기술 원칙도 테스트해야 합니다. 모든 프런트엔드 엔지니어에게 Vue를 마스터하는 것은 선택 사항이 아니라 "필수 과정"에 가깝다고 말할 수 있습니다.

Vue 프로젝트에 참여하는 많은 사람들은 요소 UI 및 기타 UI 프레임워크를 직접 사용합니다. 이러한 프레임워크는 효율성 측면에서 많은 도움이 되지만 실제로는 전혀 기술을 향상시키지 않으며 확실히 승리했습니다. 면접관이 묻는 Vue 핵심 기술에 대한 답변을 할 수 없습니다.

개발자로서 항상 기술적인 프레임워크 사용법만 알고 프레임워크의 핵심 기술 구현 원리와 그 뒤에 숨은 디자인 아이디어를 전혀 이해하지 못한다면 절대 그렇지 않을 것이라고 생각합니다. 기술의 길을 멀리 떠나보세요. 저는 개발자로서 매우 깊은 경험을 갖고 있습니다. 여기서 저는 UI 프레임워크인 Ant Design vue의 저자가 Geek Time이라는 과정을 수강했습니다. Vue 개발실습 (글 하단에 구매링크가 있습니다) 저도 이 강좌를 직접 구매했는데, Vue의 기술적 원리와 응용을 익히는 데 도움이 될 것이며, 실제 프로젝트를 통해 독립적으로 학습할 수 있게 될 것입니다. Vue 프론트엔드 프로젝트를 맡아보세요. 이 능력은 Vue를 시작하는 것뿐만 아니라 취업과 면접에도 많은 도움이 될 것입니다. 저를 포함한 많은 구매자들도 유용한 정보가 가득하다고 느낍니다. 도움이 필요한 모든 사람에게 권장됩니다.

그럼 본론으로 들어가겠습니다. 오늘은 고급 Vue 면접 질문을 몇 가지 가져와보겠습니다.

1. MVVM이란 무엇인가요?
답변: MVVM은 Model-View-ViewModel의 약자입니다. Model은 데이터 작업의 비즈니스 로직을 정의하는 데이터 모델을 나타냅니다. View는 데이터 모델 렌더링을 담당하는 뷰 레이어를 나타냅니다. ViewModel은 양방향 바인딩을 전달하여 DOM을 수동으로 조작하지 않고도 View와 Model이 동기적으로 상호 작용할 수 있도록 하는 디자인 아이디어입니다.

2. vue-router의 동적 라우팅을 정의하는 방법은 무엇입니까? 전달된 동적 매개변수를 얻는 방법은 무엇입니까?
답변: 라우터 디렉터리의 index.js 파일에서 경로 속성에 /:id를 추가하세요. 라우터 객체

3의 params.id를 사용하세요. vue-router에는 어떤 종류의 탐색 후크가 있나요?
답변: 세 번째, 하나는 전역 탐색 후크입니다. router.beforeEach(to,from,next)의 기능은 점프하기 전에 판단하고 가로채는 것입니다. 두 번째 유형: 구성 요소 내 후크, 세 번째 유형: 독점 구성 요소의 독립적 라우팅

4. 사용하는 방법? 어떤 기능적 시나리오에서 이를 사용합니까?
답변: vue 프레임워크의 상태 관리. main.js에 store를 도입하고 주입합니다. 새 디렉토리 저장소가 생성되고...내보내집니다. 시나리오에는 다음이 포함됩니다. 단일 페이지 애플리케이션의 구성 요소 간 상태. 음악 재생, 로그인 상태, 장바구니에 추가

5. MVVM과 MVC의 차이점은 무엇인가요? 다른 프레임워크(jquery)와 어떻게 다른가요? 어떤 시나리오가 적용되나요?
답변: MVVM과 MVC는 모두 디자인 아이디어입니다. 가장 중요한 점은 MVC의 컨트롤러가 노드를 운영하는 대신 데이터를 통해 주로 뷰 레이어를 표시한다는 것입니다. MVC의 DOM 작업 문제는 페이지 렌더링 성능을 저하시키고 로딩 속도를 저하시켜 사용자 경험에 영향을 미칩니다. 데이터 작업이 많은 시나리오에서 주로 사용됩니다.
시나리오: 데이터 작업이 많은 시나리오, 더 편리함

6. Vue 회사의 양방향 데이터 바인딩 원칙은 무엇인가요?
답변: vue.js는 게시자-구독자 모델과 결합된 데이터 하이재킹을 사용합니다. Object.defineProperty()를 사용하여 각 속성의 setter 및 getter를 하이재킹하고 데이터가 변경되면 구독자에게 메시지를 게시합니다. 또는 해당 수신 콜백을 트리거합니다.

7. Vue 컴포넌트를 캡슐화하는 과정에 대해 이야기해 주세요.
답변: 우선 구성 요소는 페이지를 상대적으로 독립적인 여러 모듈로 추상화하여 기존 프로젝트 개발의 문제인 낮은 효율성, 어려운 유지 관리 문제를 해결할 수 있습니다. , 재사용성 등.

그런 다음 Vue.extend 메소드를 사용하여 컴포넌트를 생성한 다음 Vue.comComponent 메소드를 사용하여 컴포넌트를 등록합니다. 하위 구성 요소에는 소품에 정의할 수 있는 데이터가 필요합니다. 하위 구성 요소는 데이터를 수정한 후 해당 데이터를 상위 구성 요소에 전달하려고 합니다. 실행 방법을 사용할 수 있습니다

8 Vue.js의 템플릿 컴파일에 대한 이해에 대해 이야기해 보겠습니다
답변: 간단히 말해서 AST로 변환됩니다. 첫 번째 트리, 그리고 얻은 렌더링 함수는 VNODE(Vue 회사의 가상 DOM 노드)를 반환합니다.
세부 단계:

먼저 템플릿을 통해 AST 구문 트리(추상 구문 트리)로 컴파일합니다. 컴파일러 소스 코드의 추상 구문 구조를 트리로 표현한 것입니다. 컴파일은 컴파일러를 생성하는 데 사용되는 createCompiler의 반환 값입니다. 옵션 병합을 담당합니다.

그러면 렌더링 함수를 얻기 위해 AST가 생성됩니다(AST 구문 트리를 렌더링 함수 문자열로 변환하는 과정). 렌더링의 반환 값은 VNode이고 VNode는 가상입니다. (태그 이름, 하위 노드, 텍스트 등)

을 포함하는 Vue의 DOM 노드

9. 의 기능은 무엇이며 어떻게 사용하나요?
답변: 동적 구성 요소를 래핑할 때 비활성 구성 요소 인스턴스가 캐시되며 주로 구성 요소 상태를 유지하거나 다시 렌더링을 방지하는 데 사용됩니다.
사용법: 간단한 페이지를 사용할 때
캐시:
캐싱 없음:

10 vue와 반응의 차이점
답변: 같은 점입니다. : 둘 다 컴포넌트를 장려합니다. 둘 다 'props' 개념과 자체 구성 도구를 가지고 있습니다. Reat와 Vue는 프레임워크의 뼈대만 갖고 있으며 라우팅, 상태 관리 등 기타 기능은 프레임워크에서 분리된 컴포넌트입니다.

차이점: React: 단방향 데이터 흐름, 구문 - JSX, React에서는 상태를 업데이트하려면 setState() 메서드를 사용해야 합니다. Vue: 데이터의 양방향 바인딩, 구문 - HTML, 상태 객체가 필요하지 않으며 데이터는 데이터 속성에 의해 Vue 객체에서 관리됩니다. 소규모 애플리케이션에는 적합하지만 대규모 애플리케이션에는 적합하지 않습니다.

11. v-show 명령어와 v-if 명령어의 유사점과 차이점은 무엇인가요?
v-show 명령어는 displayCSS 속성을 수정하여 요소를 표시하거나 숨깁니다.
v-if 명령어는 DOM을 직접 파괴하고 재구축하여 요소를 표시하고 숨깁니다.

12. $route와 $router의 차이점
답변: $route는 경로, 매개변수, 해시, 쿼리, fullPath, 일치, 이름 및 기타 라우팅 정보 매개변수를 포함하는 "라우팅 정보 개체"입니다. 그리고 $router는 라우팅 점프 메소드, 후크 기능 등을 포함하는 "라우팅 인스턴스" 객체입니다.

13 vue에서 키 값의 역할
답변: Vue.js가 v-for를 사용하여 업데이트할 때 렌더링된 요소 목록의 경우 기본적으로 "내부 재사용" 전략이 사용됩니다. 데이터 항목의 순서가 변경되면 Vue는 데이터 항목의 순서와 일치하도록 DOM 요소를 이동하지 않고 단순히 각 요소를 재사용하고 특정 인덱스에 렌더링된 각 요소를 표시하는지 확인합니다. key의 주요 기능은 가상 DOM을 효율적으로 업데이트하는 것입니다.

이 기사는 여기서 끝났습니다. 더 많은 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 JavaScript Tutorial Video 칼럼을 참조하세요!