이 기사는 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의 템플릿 컴파일 원리를 어떻게 이해하나요?
이 문제의 핵심은 템플릿을 렌더링 기능으로 변환하는 방법입니다.
- 템플릿 모듈을 ast 문법 책으로 변환 - parserHTML
- 정적 문법 표시(일부 노드는 변경되지 않음)
- 코드 재생성 - 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를 호출하여 강제로 업데이트합니다.
기능적 구성 요소의 특성: 상태 비저장, 수명 주기 없음, 없음. 그러면 성능이 조금 더 높아질 것입니다.
일반 컴포넌트는 Vue를 상속받은 클래스입니다.- 기능적 구성 요소는 일반적인 기능입니다.
22. 컴포넌트에 값을 전달하는 방법은 무엇인가요?
- props 및 t t
- rs sprovide/inject는 주로 크로스 레벨 데이터 전송을 달성하기 위해 플러그인에 적용하는 데 더 적합합니다. 스물넷, v-for와 v-if 중 어느 것이 더 우선순위가 높나요?
- 우선, v-for와 v-if는 같은 태그에 사용할 수 없습니다. v-for를 먼저 처리한 다음 v-if를 처리하세요.

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
