프런트엔드 인터뷰 질문 - vue 기사

머리말

Vue 인터뷰에 관한 질문 몇 가지를 소개합니다.자주 묻는 질문, 자주 나오는 질문, 개인적으로 경험한 질문을 모아봤습니다. 부족한 점이 있으면 지적해주세요 계속 업데이트 중입니다... (ps: 1~3 ⭐은 중요도, ⭐선택적 이해, ⭐⭐숙달, ⭐⭐⭐프론트엔드가 알아야 할 지식)

1. 양방향 데이터 바인딩의 원리 ⭐⭐⭐

답변: 게시-구독 모드와 결합된 데이터 하이재킹을 통해 Object.defineProperty()를 통해 각 속성에 대한 get 및 set 메서드를 정의하고, 데이터가 변경될 때 구독자에게 메시지를 게시하고 해당 이벤트 콜백을 트리거합니다.

2. VUE 수명주기⭐⭐⭐

개념: 생성, 데이터 초기화, 템플릿 컴파일, DOM 마운트, 렌더링-업데이트-렌더링, 제거 등 일련의 프로세스를 Vue 인스턴스의 수명주기라고 합니다.

뷰2.0

• beforeCreate : 생성 전. 이때는 컴포넌트 인스턴스가 생성된 직후이고, 데이터 관찰 및 이벤트 구성이 아직 수행되지 않아 데이터를 얻을 수 없습니다.
• 생성됨 : 생성이 완료되었습니다. vue 인스턴스는 데이터 관찰, 속성 및 메소드 계산을 완료했습니다( props, 메소드, 데이터, 계산 및 감시 등이 현재 획득되었습니다 ) .DOM에 마운트되지 않았으며 el 속성에 액세스할 수 없습니다.el 속성 ref 속성 내용은 다음과 같습니다. 빈 배열은 간단한 Ajax 요청 및 페이지 초기화에 자주 사용됩니다.
• beforeMount : 마운트 전. hang은 시작하기 전에 호출되며 해당 render 함수가 처음으로 호출됩니다(가상 DOM). 템플릿을 컴파일하고 데이터와 템플릿의 데이터로부터 html을 생성하고 el과 데이터의 초기화를 완료합니다. 이때 html은 페이지에 첨부되지 않습니다 .
• Mounted : 마운트가 완료되었습니다. 즉, 템플릿 내의 HTML을 HTML 페이지로 렌더링하는데, 이때 DOM API를 통해 DOM 노드를 얻을 수 있으며, $ref 속성에 접근할 수 있으며 VNode 정보 및 연산을 얻기 위해 자주 사용된다. 마운트된 작업은 한 번만 실행됩니다.
• beforeUpdate : 데이터가 업데이트되기 전에 호출되며 가상 DOM이 다시 렌더링되고 패치되기 전에 발생하며 추가 다시 렌더링 프로세스가 트리거되지 않습니다.
• 업데이트됨 : 업데이트된 후입니다. 데이터 변경으로 인해 가상 DOM이 다시 렌더링되고 패치된 후 호출되며,
• beforeDestroy ; 파괴 전. 인스턴스가 삭제되기 전에 호출되면 인스턴스는 여전히 완전히 사용 가능합니다. (일반적으로 이 단계에서는 구성 요소에서 타이머 및 모니터링된 DOM 이벤트를 지우는 등 일부 재설정 작업이 수행됩니다.)
• 파괴됨 : 파괴된 후. 인스턴스가 삭제된 후 호출됩니다. 호출 후 vue real 열에 표시된 모든 항목이 바인딩 해제되고 모든 이벤트 리스너가 제거됩니다.
  기타:
  activate : keep-alive 컴포넌트가 활성화될 때 호출됨
  deactivated : keep-alive 컴포넌트가 비활성화될 때 호출됨
  자세한 내용은 vue2.0 공식 웹사이트 라이프사이클 후크를 참조하세요.

뷰3.0

• onBeforeMount
• 마운트됨
• onBeforeUpdate
• 업데이트됨
• onBeforeUnmount
• 마운트 해제됨

자세한 내용은 vue3.0 공식 웹사이트 라이프사이클 후크를 참조하세요.

3. 구성 요소 간 값을 전송하는 방법 ⭐⭐⭐

1. Vue 상위 컴포넌트와 하위 컴포넌트 간 값 전송

• 하위 구성요소는 소품을 통해 데이터를 수신하고 $emit상위 구성요소의 사용자 정의 이벤트를 트리거합니다.

2. 형제 구성요소 간의 가치 이전

• 공용 구성 요소인 bus.js를 빌드합니다. 배달 측은 이벤트에 의해 트리거됩니다 bus.$emit. 수신기는 Mounted(){} 수명 주기에서 트리거됩니다 bus.$on.

3. VUEX를 통해 구성요소 간에 매개변수를 전달할 수 있습니다.

4. 아버지에서 손자에게 계승되는 가치 $attrs(아래) $listeners(위)

5. 조상과 후손으로부터의 가치 상속provide/inject

6. 상위 구성 요소 인스턴스의 세부 정보를 얻으려면 vue 구성 요소의 매개 변수 전달 방법을 참조하세요.this.$parent

4. v-model의 역할과 구현 원리⭐⭐

기능: v-model은 기본적으로 단순한 구문 설탕입니다. v-model 지시어를 사용하여 양식과 요소에 대한 양방향 데이터 바인딩을 만들 수 있습니다.

구현 원칙:
v-bind: 반응형 데이터 바인딩,
입력 이벤트 트리거 및 데이터 전송

5. VUEX⭐⭐에 대해 이야기해보세요

원리: Vuex는 vue.js 애플리케이션용으로 특별히 설계된 상태 관리 도구입니다.
구성하다:

• state : 변수를 저장하는 데 사용되는 vuex의 기본 데이터이며 저장된 데이터는 반응형입니다.
• mutations : 변경된 데이터를 제출하고 상태를 동기적으로 업데이트합니다.
• actions : 비동기적으로 작동할 수 있는 변형을 제출합니다.
• getters : 저장소의 계산된 속성입니다.
• module : 모듈, 각 모듈에는 4개의 속성이 있습니다.
  VUEX를 사용하는 방법에 대해서는 VUE의 값 전달 문제를 볼 수 있습니다.

6. VUEX 페이지를 새로 고칠 때 데이터 손실 문제를 해결하는 방법은 무엇입니까? ⭐⭐

이유: vuex의 데이터는 실행 중인 메모리 에 저장 되기 때문에 페이지가 새로 고쳐지면 페이지는 vue 인스턴스를 다시 로드하고 vuex의 데이터는 지워집니다.

해결책: vuex의 데이터를 브라우저 캐시에 직접 저장하십시오.

또 다른 방법은 플러그인을 사용하는 것입니다 vuex-persistedstate.
vuex-persistedstate는 Vuex 저장소의 상태를 브라우저의 localStorage 또는 sessionStorage에 유지할 수 있으므로 사용자는 다음에 페이지를 열 때 이전 애플리케이션 상태를 계속 사용할 수 있습니다.

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

계산된 값은 캐시되며 트리거 조건은 종속 값의 변경이며 Watch에는 캐시가 없으며 비동기식 모니터링 데이터 변경을 지원합니다.

계산 : 다른 속성 값에 의존하는 계산 속성으로 계산 값이 캐시됩니다. 속성 값만 변경에 따라 달라지며 계산 값은 다음에 계산 값을 얻을 때 다시 계산됩니다. 주의: 자세히 알아
보기 관찰 함수는 비동기식을 지원하며 특정 데이터의 모니터링 콜백과 유사하며 모니터링되는 데이터가 변경될 때마다 후속 작업을 위해 콜백이 실행됩니다.

계산 응용 시나리오: 수치 계산이 필요하고 다른 데이터에 의존하는 경우 계산을 사용해야 합니다. 계산의 캐시 기능을 사용하면 값을 얻을 때마다 재계산을 피할 수 있기 때문입니다. 응용 시나리오 보기: 다음과 같은 경우에 실행해야 합니다.
데이터 변경 Watch는 비동기 또는 비용이 많이 드는 작업에 사용해야 합니다. watch 옵션을 사용하면 비동기 작업(API 액세스)을 수행하고 작업 수행 빈도를 제한하며 최종 결과를 얻기 전에 중간 상태를 설정할 수 있습니다. 이는 계산된 속성으로는 수행할 수 없는 작업입니다.

자세한 내용은 Vue의 계산된 속성, 메서드 및 시계 간의 차이점을 참조하세요 .

8. Axios를 어떻게 캡슐화하나요? ⭐

자신의 프로젝트의 실제 상황을 바탕으로 잘 작성된 글입니다 .Vue에서 Axios를 간단하게 캡슐화하는 모습을 보실 수 있습니다 .

9.라우트와 라우터의 차이점⭐

• Route : "path, parms, hash, name" 및 기타 라우팅 정보 매개변수를 포함하는 라우팅 정보 개체입니다.
• Router : 라우팅 점프 방식, Hook 기능 등을 포함한 라우팅 인스턴스 객체입니다.

10.v-show와 v-if의 차이점⭐⭐

• v-if : 구성요소의 파괴 및 재구성. 권한이 있는 작업에 더 적합하며 높음으로 전환됩니다. 시작 조건이 false이면 아무 작업도 수행되지 않으며 true인 경우에만 컴파일됩니다.
• v-show : CSS 전환, 숨기기 및 표시는 빈번한 전환에 더 적합합니다. 어떤 경우든 컴파일된 다음 캐시되고 DOM 요소는 보존됩니다. (v-show = false는 표시를 의미함: 없음, true는 표시를 의미함)

11.Vue의 데이터가 변경되었지만 뷰가 최신이 아닌 문제를 해결하는 방법은 무엇입니까? ⭐

이유:

• 배열 데이터 변경: 배열을 조작하기 위해 특정 방법을 사용합니다.데이터를 변경할 때 일부 방법은 Vue에서 모니터링할 수 없거나 배열의 길이가 변경됩니다.
  (push(), pop(), Shift(), unshift(), splice(), sort(), reverse())는 원래 배열을 변경하지 않고 새 배열을 반환하며 뷰는 자동으로 업데이트되지 않습니다. .
• Vue는 객체 속성의 추가 또는 제거를 감지할 수 없습니다.
• 비동기 업데이트 대기열: 처음에는 데이터를 가져와 렌더링하지만 두 번째 이후에는 페이지가 다시 렌더링될 때만 데이터가 업데이트되며 실시간으로 업데이트할 수 없습니다.

해결 방법: 배열 길이 변경은 splice를 사용하여 수정할 수 있습니다. 특정 속성의 변경 사항을 모니터링해야 하는 경우 $set를 사용합니다.

12.Vue의 데이터는 왜 객체가 아닌 함수인가요? ⭐⭐

공식 홈페이지에 이런 소개가 있는데, 자세한 내용은 컴포넌트 재사용을 보면 되는데, 이는

Vue에서 컴포넌트를 재사용할 수 있다는 뜻 이고, 데이터가 함수일 때 각 인스턴스의 데이터는 독립적이고 상호작용하지 않는다는 뜻이다. 서로 영향을 미칩니다.

자세한 설명 ==>

13. VUE에서 상위-하위 구성요소가 값을 전달하면 상위 구성요소가 비동기적으로 요청하므로 하위 구성요소가 실시간으로 업데이트될 수 없는 경우 문제를 해결하는 방법은 무엇입니까? (VUE의 데이터가 실시간으로 업데이트되지 않는 문제를 해결하는 방법은 무엇입니까?) ⭐⭐⭐

먼저 상위 및 하위 구성요소 라이프사이클의 실행 순서를 이해합니다. ==>
렌더링 데이터 프로세스 로드
상위 구성요소 beforeCreate -->
상위 구성요소 생성 -->
상위 구성요소 beforeMount -->
하위 구성요소 beforeCreate -->
하위 구성요소 생성 -->
하위 구성요소 beforeMount -->
하위 구성요소 마운트됨 -->
상위 구성요소 마운트됨 -->
이유: 라이프사이클은 한 번만 실행되므로 비동기 요청이 이루어질 때까지 데이터를 얻을 수 없으므로 하위 구성요소의 마운트된 후크가 실행하면 부모컴포넌트가 아직 얻어지지 않아 데이터를 전달했지만 결과를 출력해야 하는데 이 경우 props의 기본값은 빈 문자열만 출력할 수 있으므로 출력되는 결과는 빈 문자열이다.
해결책:

1. v-if를 사용하여 구성 요소 렌더링 타이밍을 제어합니다.
   백엔드 인터페이스의 비동기 데이터를 처음에 가져오지 못한 경우 해당 구성 요소는 렌더링되지 않으며, 구성 요소를 가져오면 다시 렌더링됩니다. v-if="variable"을 사용하여 제어하고 처음에는 이 변수를 false로 설정합니다. 이 경우 하위 구성 요소는 렌더링되지 않습니다. 데이터를 얻을 때 이 변수를 true로 설정합니다. 예
   :

  data() {
    
    
    return {
    
    
      isTrue:false // 初始为false
    };
  },
  monted(){
    
    
  this.$post.a.b.c.getData(res=>{
    
    
        if(res.result){
    
    
            this.isTrue = true
         }
     })
  }

2. watch를 사용하여 데이터 변경 사항을 모니터링합니다
   . 예:

  props: {
    
    
    tableData: {
    
    
      type: Array,
      default: [],
    },
  },
  watch: {
    
    
     tableData(val){
    
    
         console.log(val)
     }
  },

3. VueX 사용

14. 부모-자식 구성요소 내보내기에 여러 매개변수를 전달하는 방법은 무엇입니까? ⭐

부분조립품:

submit(){
    
    
	this.$emit('g',1,2,3,4,5)
}

상위 구성요소

g(val1,val2,val3,val4,val5) {
    
    
	console.log(val1,val2,val3,val4,val5)
}

15.VUE 라우팅 점프 방식⭐⭐

• 라우터 링크 라벨 점프
• this.$router.push()
• this.$router.replace()
• this.$router.go(n) : (0: 현재 페이지, -1 이전 페이지, +1 다음 페이지, n은 정수를 나타냄)

16. 조건부 렌더링 v-if 및 v-우선순위 ⭐

vue2.0 문서에는 다음과 같이 나와 있습니다:

vue2 목록 렌더링 가이드

vue3.0 문서는 vue3 조건부 렌더링 에 대해 다음과 같이 말합니다.

17. VUE에서 $nextTick의 기능과 원리는 무엇입니까? ⭐⭐⭐

비동기 렌더링, DOM 획득, Promise 등

Vue는 DOM을 업데이트할 때 비동기적으로 실행되며 , 데이터를 수정한 후 뷰가 즉시 업데이트되지 않고, 대신 동일한 이벤트 루프에서 모든 데이터 변경이 완료된 후에 뷰가 균일하게 업데이트됩니다. 따라서 데이터를 수정한 후 즉시 메서드에서 DOM을 얻으면 얻은 DOM은 여전히 ​​수정되지 않은 DOM입니다.
$nextTick의 기능은 다음과 같습니다. 이 메서드의 코드는 현재 렌더링이 완료된 후 실행되며, 이는 업데이트된 DOM을 얻을 수 없는 비동기 렌더링 문제를 해결합니다.
$nextTick의 원칙: $nextTick의 핵심은 Promise를 반환하는 것입니다.

애플리케이션 시나리오:

• created()에서 DOM을 얻어서 운용하고 싶다면 $nextTick에 DOM을 운용하는 메소드를 넣어주시면 됩니다.
• data()를 수정한 후에는 data의 수정된 데이터를 페이지에서 얻을 수 없지만, $nextTick을 사용하면 data의 데이터가 수정될 때 실시간으로 페이지를 렌더링할 수 있다.

공식 홈페이지에는 이렇게 나와있어요

18.VUE의 for 루프가 키를 추가하는 이유는 무엇입니까? ⭐⭐

성능 최적화를 위해 diff 알고리즘을 최적화합니다 . Vue는 가상 DOM이므로 DOM을 업데이트할 때 diff 알고리즘을 사용하여 노드를 하나씩 비교합니다. 예를 들어 li 요소가 많은 경우 li 요소를 한 번에 삽입해야 합니다. 특정 위치에 있지만 li에 키가 추가되지 않은 경우 작업 중에 모든 li 요소가 다시 렌더링되지만 키가 있으면 키에 따라 li 요소를 하나씩 비교합니다. 새로운 li 요소를 생성하고 삽입하려면 다른 요소를 수정하고 다시 렌더링할 필요가 없습니다.
키는 li 요소의 인덱스가 될 수 없습니다. 배열 앞에 새 요소를 삽입하면 아래 첨자가 0이 되고 원래 첫 번째 요소와 반복되고 전체 배열의 키가 변경되기 때문입니다. 열쇠가 없어도 상황은 똑같습니다.

19.VUE2와 VUE3의 차이점은 무엇인가요? ⭐⭐⭐

• 양방향 데이터 바인딩 원칙은 다릅니다.
  Vue2의 양방향 데이터 바인딩은 Object.definePropert()를 사용하여 데이터를 하이재킹하고 게시-구독 모드와 결합하여 구현됩니다.
  Vue3은 프록시 API를 사용하여 데이터를 프록시합니다.
• API 유형이 다릅니다.
  Vue2는 옵션 유형 api를 사용합니다.
  Vue3은 합성 API를 사용합니다.
• Vue2는 데이터 변수와 메소드를 정의하는 것과 달리
  데이터를 데이터에 넣습니다.
  Vue3에서는 새로운 setup() 메소드를 사용해야 합니다.
• 다양한 라이프 사이클
• 아버지와 아들은 서로 다른 매개변수를 전달합니다.
• 지침은 슬롯과 다릅니다.
• 조각화 지원 여부
  Vue2는 조각화를 지원하지 않습니다.
  Vue3은 조각화를 지원하며 여러 루트 노드를 가질 수 있습니다.

20.VUE3가 $set를 계속 사용하지 않는 이유는 무엇입니까? ⭐

$set의 역할 : vue2.0: 데이터를 정의하기 위해 객체와 배열을 사용합니다. 객체나 배열에 속성이나 요소를 추가해야 하고 뷰를 업데이트할 때 반응적으로 업데이트하려면 $를 사용해야 합니다. 완료 방법을 설정합니다.
Vue2는 object.definatedProperty를 사용하여 데이터 응답을 구현하며 심층 데이터의 변경 사항을 모니터링할 수 없습니다 .

Vue3에서는 프록시를 사용하여 ref 및 반응형을 통해 데이터를 프록시하여 값과 객체 유형을 반응형 객체로 변경하므로 수정 및 추가 사항을 Vue에서 캡처할 수 있으므로 페이지의 자동 새로 고침이 실현됩니다 .

공식 홈페이지 반응형 기본사항을 참고하세요

21.VUE 라우팅에서 히스토리와 해시의 차이점⭐⭐

• 
  "#" 해시 가 있거나 없는 주소 표시줄http://localhost:8080/#/
  : 기록:http://localhost:8080/

• 그들은 모두 브라우저의 두 가지 기능을 사용하여 프런트 엔드 라우팅을 구현합니다.
  History는 검색 기록 스택의 API를 사용하여
  위치 개체의 해시 값 변경 이벤트를 모니터링하여 구현되는 해싱을 구현합니다.

• 브라우저 기록 스택에 추가하기 위해 동일한 URL
  기록이 트리거됩니다. 해시는 트리거되지 않습니다.
  기록을 위해서는 백엔드의 협력이 필요합니다. 백엔드가 페이지 새로 고침에 협조하지 않으면 404가 나타납니다 . 해시는 필요하지 않습니다.

hashRouter의 원리 : window.onhashchange 를 통해 URL의 해시 값을 얻습니다 .
HistoryRouter의 원리 : History.pushState를 통해 페이지로 이동해도 페이지 새로 고침이 실행되지 않습니다. window.onpopstate를 사용하여 브라우저의 앞뒤 이동을 모니터링하세요. .

자세한 내용은 다양한 기록 모드에 대한 공식 웹사이트를 참조하세요 | Vue Router

22.피니아와 뷰엑스의 차이점⭐

• 지원 옵션 API 및 통합 API
• Pinia에는 돌연변이가 없으며 상태, getter 및 작업만 있습니다.
• pinia 하위 모듈에는 모듈이 필요하지 않습니다.
• 타입스크립트 지원
• 자동 코드 분할
• 피니아가 더 작아요
• pinia는 상태 데이터를 직접 수정할 수 있습니다.

참고 https://github.com/vuejs/rfcs/pull/271

23.Vue Diff 알고리즘⭐

컴포넌트가 생성되고 업데이트되면 Vue는 내부 업데이트 함수를 실행하는데, 이 함수는 render 함수를 사용하여 가상 DOM 트리를 생성하고 이전 트리와 새 트리를 비교하여 차이점을 찾아 최종적으로 실제 DOM을 업데이트합니다.

차이점을 비교하는 과정을 diff 라고 하며 Vue는 patch라는 함수를 통해 내부적으로 이 과정을 완료합니다.

비교할 때 Vue는 비교를 위해 깊이 우선순위와 동일 레이어 비교를 사용합니다 .

두 노드가 동일한지 비교할 때 Vue는 가상 노드의 키와 태그를 기반으로 판단합니다.

먼저 루트 노드를 비교하고, 동일하다면 이전 노드와 연관된 실제 DOM의 참조를 새 노드에 마운트한 다음 필요에 따라 속성을 실제 DOM으로 업데이트하고 하위 노드 배열을 비교합니다. 동일하지 않으면 새 노드를 참조로 사용하고 해당 정보는 모든 실제 DOM을 재귀적으로 생성하고 동시에 해당 가상 노드에 마운트한 다음 이전 DOM을 제거합니다.

하위 노드 배열을 비교할 때 Vue는 각 하위 노드 배열에 대해 두 개의 포인터를 사용합니다. 머리와 꼬리를 각각 가리키고 중앙으로 계속 이동하여 비교합니다. 실제 DOM을 최대한 재사용하고 실제 DOM을 최대한 적게 생성하고 파괴하는 것이 목적입니다. 동일하다고 판단되면 루트 노드와 동일한 비교 과정을 진행하고, 다르면 실제 DOM을 적절한 위치로 이동합니다.

이 재귀 순회는 전체 트리가 비교될 때까지 계속됩니다.

Vue의 최적화 전략
Vue의 diff 알고리즘에는 불필요한 diff 작업을 줄이고 diff 성능을 향상시키기 위해 일부 최적화 전략이 도입되었습니다.구체적으로는 다음과 같은 사항이 있습니다.

• 템플릿 컴파일 중 정적 노드 표시
  Vue가 템플릿을 컴파일할 때 변경할 필요가 없는 정적 노드를 표시하므로 후속 렌더링에서 이러한 노드에 대한 diff 작업을 생략할 수 있어 diff의 복잡성이 줄어들고 개선됩니다. 성능.
• 목록 순회를 위한 키 값 최적화
  Vue에서는 목록을 순회할 때 일반적으로 각 하위 요소에 대한 키 값을 지정하여 후속 diff 작업을 용이하게 하기 위해 고유하게 식별합니다. 이 과정에서 Vue는 키 값을 기록하여 이전 노드와 새 노드가 변경되었는지 비교하고, 변경 사항이 없으면 해당 노드의 상태를 유지하여 불필요한 반복 렌더링을 방지합니다.
• 동일한 노드의 병합 최적화
  diff 알고리즘에서 이전 노드와 새 노드가 동일한 노드이고(즉, 두 노드 모두 동일한 레이블과 속성을 가짐) 자식 노드 중 어느 것도 업데이트할 필요가 없는 경우 두 노드는 업데이트되는 것으로 간주됩니다. 동일해야 하며 diff 성능을 향상시키기 위해 이 노드에서 diff 작업을 직접 건너뛸 수 있습니다.

Vue의 diff 알고리즘은 이전 노드와 새 노드 간의 차이점을 신속하게 비교하고 페이지 보기를 신속하게 업데이트하여 사용자 경험과 프로그램 성능을 향상시킬 수 있는 효율적인 프런트 엔드 반응형 구현입니다.

24. 동적 구성 요소 및 비동기 구성 요소⭐

동적 구성 요소와 비동기 구성 요소는 모두 동적 렌더링과 구성 요소의 온디맨드 로딩을 ​​달성하도록 설계되어 애플리케이션 성능과 유연성을 향상시킬 수 있습니다.
동적 구성요소 : 구성요소를 렌더링할 때 특정 조건에 따라 구성요소를 동적으로 선택합니다.

비동기식 구성 요소 : 구성 요소의 로드 및 렌더링 프로세스는 두 부분으로 나누어집니다. 즉, 구성 요소의 코드와 종속성이 먼저 로드된 다음 로드가 성공한 후 페이지에 렌더링됩니다. 이렇게 하면 초기 로드 중에 모든 구성 요소의 코드와 종속성이 동시에 로드되지 않으므로 페이지의 성능과 응답성이 향상됩니다. Vue에서는 팩토리 함수와 컴포넌트의 비동기 로딩 기능을 사용하여 비동기 컴포넌트 로딩을 구현할 수 있습니다.
공식 웹사이트
vue2 비동기 컴포넌트
vue3 비동기 컴포넌트를 참조하세요.

25. 이벤트 수정자⭐

.stop : 클릭 이벤트가 계속 전파되는 것을 방지 방지
: 이벤트를 제출하고 더 이상 페이지를 다시 로드하지 않음
Capture : 이벤트 리스너를 추가할 때 이벤트 캡처 모드를 사용
self : 현재 요소 자체가 실행될 때 핸들러 함수가 트리거됨 한 번
: 한 번만 실행됩니다
.. 수동적 : 모바일 단말기의 성능을 향상시킵니다.

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
 

자세한 내용은 공식 홈페이지 이벤트 수정자를 참조하세요.

26. 경로 간 매개변수 전송 방법⭐

• 라우터 링크를 통한 내비게이션 점프 전달

<router-link to=`/a/${
      
      id}`>routerlink传参</router-link>

• 점프할 때 매개변수를 연결하고 전달하려면 push 메서드를 사용하세요.

  this.$router.push({
    
    
          path: `/getlist/${
      
      id}`,
        })

• 라우팅 속성의 이름을 통해 일치하는 경로를 결정하고 params를 통해 매개변수를 전달합니다.

this.$router.push({
    
    
          name: 'Getlist',
          params: {
    
    
            id: id
          }
        })

• 경로를 사용하여 경로를 일치시킨 다음 쿼리를 통해 매개변수를 전달합니다.

this.$router.push({
    
    
          path: '/getlist',
          query: {
    
    
            id: id
          }
        })

참고: query 는 ajax의 get 요청과 비슷 하고 params는 post 요청과 비슷합니다 .

params는 주소 표시줄에 매개변수를 표시하지 않고, 페이지를 새로 고치고, 매개변수가 손실되고,
다른 방법은 주소 표시줄에 전달된 매개변수를 표시하고, 페이지를 새로 고치고, 매개변수가 손실되지 않습니다.

자세한 내용은 Vue-router의 세 가지 간단한 라우팅 매개변수 전달 방법을 참조하세요 .

다른

다른 프론트엔드 인터뷰 질문에 대해서는 다음을 읽어보세요.

프런트엔드 면접 질문(답변 포함)이 개선되고 있습니다...