Vue 인터뷰 질문(지속적으로 업데이트됨)

1. v-show와 v-if의 차이점

v-show는 요소의 표시 상태, 즉 표시 및 숨기기를 전환하고 요소의 표시 값을 수정합니다.

v-if는 또한 요소의 표시 및 숨기기를 토글하지만 작동 도메인입니다.

같은 점: 페이지 요소가 표시 및 숨기기 효과를 얻도록 할 수 있습니다.

차이점: 하나는 디스플레이를 작동하는 것이고 다른 하나는 돔을 작동하는 것입니다.

v-if 구성 요소는 실제로 렌더링 및 파괴입니다.효과 표시와 숨기기를 자주 전환하면 v-for보다 v-if의 오버헤드가 더 큽니다. v-for를 사용하는 것이 좋습니다.

2. v-for에서 키를 사용하는 이유

우선, 가장 얕은 것은 Vue의 목록 루프가 키를 추가해야 한다는 것입니다. 그렇지 않으면 시스템에서 오류를 보고할 것이며 이는 가장 명백합니다.

좀 더 심층적으로 보면 vue 레이아웃의 재사용성이 높기 때문인데요, 키를 높이면 컴포넌트의 고유성을 식별할 수 있고(id와 다소 유사) 각 컴포넌트 키의 역할을 더 잘 구분하여 효율적으로 업데이트할 수 있습니다. 가상 돔.

공식 용어는 다음과 같습니다. Vue는 "in-place 업데이트" 전략에 따라 기본적으로 v-for`에 의해 렌더링된 요소 목록을 업데이트합니다. 데이터 항목의 순서가 변경되면 Vue는 이에 따라 DOM 요소의 순서를 이동하지 않지만 원래 지정된 인덱스 위치에서 렌더링되도록 각 요소를 제자리에서 업데이트합니다.

기본 모드는 효율적이지만 목록 렌더링 출력의 결과가 하위 구성 요소 상태 또는 임시 DOM 상태(예: 양식 입력 값)에 의존하지 않는 경우에만 적합합니다.

Vue가 각 노드의 ID를 추적하여 기존 요소를 재사용하고 재정렬할 수 있도록 힌트를 제공 하려면

* diff 알고리즘에서는 tag와 key로 sameNode인지 판단

3. vue 구성 요소(부모-자식 구성 요소)의 수명 주기 설명

vue의 수명 주기에 대해서는 많이 말하지 않겠습니다. 여기서는 vue2와 vue3의 수명 주기를 비교한 것뿐입니다.

beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

부모와 자식 사이의 라이프 사이클:

렌더링 단계 로드: parent beforeCreate->parent Create->parent beforeMounte->child beforeCreate->child Create->child ceforeMounte

마운트: 자식 Mounte->부모 Mounte

고쳐 쓰다:

1. 부모업데이트와 자식업데이트 안함 : 부모전업데이트->부모업데이트

2.아이 갱신 아버지 불갱신:아이 beforupdata->아이 updata

3. 부모와 자식이 함께 업데이트: 부모 전업데이트->자식 전업데이트->자식 업데이트->부모 업데이트

파괴하다:

아버지 beforeDestroy->아이 beforeDestroy->아이 Destroy->아버지 Destroy

4. Vue 구성 요소가 통신하는 방법

부모에서 아들로 소품, 아들에서 아버지로 this.$emit

형제에게 형제event.$no event.$off event.$emit

vuex 공개 저장소

5. 컴포넌트 렌더링 및 업데이트 프로세스 설명

템플릿을 렌더링 함수 로 구문 분석

이 부분은 vue 컴파일과 관련이 있습니다. 즉, vue 구문을 js 구문으로 컴파일하고 vue-template-compiler의 컴파일러 기능을 실행하여 렌더링을 얻습니다.

트리거 응답

반응형 키 Object.defineProperty(), 템플릿의 첫 번째 렌더링에 사용된 변수를 Object.defineProperty()에 바인딩합니다. 첫 번째 렌더링은 getter를 트리거합니다.

렌더링 기능 실행

이전에 render 함수를 받았으니 이제 render 함수를 실행하고 vue 구문을 h 함수의 결과, 즉 vNode로 변환한 다음 일련의 작업을 수행해야 합니다.

그런 다음보기를 업데이트하십시오

6. vue-router의 히스토리 모드와 해시 모드의 차이점

hash : 페이지를 새로 고치지 않고 새로운 http 요청을 시작하지 않습니다.클라이언트 페이지의 위치만 인식합니다.# 이후의 문자는 서버로 전송되지 않습니다.#는 브라우저의 액세스 기록을 수정할 수 있습니다. 해시는 페이지를 새로고침 하지 않고 앵커 포인트(#)를 변경하여 페이지를 업데이트하는 것입니다.

히스토리 와 해시의 차이점: 히스토리 경로에는 # 번호가 없지만 해시에는 있습니다.히스토리가 경로를 변경할 때마다 파일 리소스를 다시 요청해야 합니다. 즉, 페이지를 새로 고치고 다시 보내야 합니다. http 요청 기록은 window.history를 통해 이동합니다.

7. v-model이 vuex 상태에 직접 바인딩될 수 있습니까? 어떻게 처리해야 합니까?

공식 웹사이트 원문: Vuex는 속성 행을 획득하고 작동하기 위해 mapGetter 및 mapActions를 제공하므로 v-model의 양방향 바인딩 형식에 직접 적응할 수 없습니다.

해결책:

입력의 양방향 바인딩을 다시 작성하십시오.
다른 하나는 별도의 계산된 속성을 제공하고 get/set 메소드를 지정하고 vuex의 mapGetters/mapActions를 각각 할당하는 것입니다.

.