Vue 면접 질문 모음

1. Vue의 데이터가 객체가 아닌 함수인 이유는 무엇입니까?

컴포넌트는 재사용을 위해 사용되며 JS 객체는 참조 관계 이기 때문에 컴포넌트의 데이터가 객체라면 범위가 분리되지 않으며 컴포넌트 의 데이터 값이 서로 영향을 미치게 됩니다. 컴포넌트에 함수가 있으면 각 인스턴스는 반환된 객체의 독립적인 복사본을 유지할 수 있으며, 컴포넌트 인스턴스 간의 데이터 값은 서로 영향을 미치지 않습니다.

Vue 인스턴스는 재사용되지 않으므로 객체 참조에 문제가 없습니다 .

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

1. 공통점

v-if와 v-show 모두 DOM 요소를 동적으로 표시할 수 있습니다.

2. 차이점

(1) 의미:

v-if는 DOM 트리에 DOM 요소를 동적으로 추가하거나 삭제하는 것입니다.

v-show는 DOM 요소의 표시 스타일 속성을 설정하여 표시 및 숨기기를 제어합니다 .

(2) 편집 과정:

v-if 전환에는 내부 이벤트 리스너를 적절하게 삭제하고 재구축하는 부분 컴파일/언로드 프로세스가 있습니다.

하위 어셈블리;

v-show는 단순한 CSS 기반 스위치 입니다 .

(3) 편집 조건:

v-if는 게으르고 초기 조건이 거짓이면 아무것도 하지 않습니다.

부분 컴파일은 조건이 처음으로 true가 될 때만 시작됩니다(

편집 내용이 캐시되나요? 컴파일이 캐시된 후 전환 시 부분적으로 언로드됩니다.

v-show는 어떤 조건(해당 조건이 처음으로 참인지 여부)에서 컴파일된 다음 캐시됩니다.

그리고 DOM 요소는 그대로 유지됩니다.

(4) 성능 소비:

v-if는 스위칭 비용이 더 높습니다 .

v-show는 초기 렌더링 비용이 더 높습니다 .

(5) 사용 시나리오:

v-운영 조건에 대한 적합성이 변경될 가능성이 없는 경우

v-show는 빈번한 전환에 적합합니다.

3. 개발 시 jQuery 대비 Vue의 장점

vue: 기술적인 관점에서 보면 간소화된 MVVM 입니다. Vue.js는 MVVM 모델의 ViewModel 계층에 중점을 두고 있으며 양방향 데이터 바인딩을 통해 뷰와 모델 계층을 연결 하고 데이터 작업을 통해 페이지 뷰의 렌더링을 완료할 수 있습니다.

vue와 jQuery의 차이점:

①vue와 jQuery 비교 jquery는 selector()를 사용하여 DOM 객체를 선택 하고 이에 대한 할당, 값 검색, 이벤트 바인딩 등의 작업을 수행합니다. 실제로 네이티브 HTML과의 차이점은 DOM 객체를 더 편리하게 선택하고 조작할 수 있다는 점입니다. , 데이터는 인터페이스와 함께 제공됩니다.

②예를 들어, 라벨 태그("label").val()의 내용을 가져와야 하는데, 이는 여전히 DOM 요소의 값에 따라 달라집니다.

Vue는 Vue 객체를 통해 데이터와 View를 완전히 분리합니다.

③ 더 이상 데이터 연산을 위해 해당 Dom 요소를 참조할 필요가 없으며, 데이터와 뷰는 분리되어 있으며, 뷰 객체의 vm을 통해 서로 바인딩되어 있다고 할 수 있습니다 .

4. Vue 컴포넌트(컴포넌트)에 대한 이해

Vue 구성 요소는 html, js, css 로 구성된 일부 공개 구성 요소입니다 .

1. 크기가 작고 재사용이 가능합니다.

2. 코드 양을 줄인다

3. 개발 효율성 향상

5.watch는 두 값의 변화를 동시에 모니터링하고 메소드를 실행합니다.

data() {
  return {
    city: '',
    country: ''
  }
},
computed: {
  address() {
    const { city, country } = this
    return {
      city,
      country
    }
  }
},
watch: {
  address: {
    handler: function(newval , oldval) {
      console.log('address new =:' + newval );
      console.log('address old =:' + oldval );
    },
    immediate: true,
    deep: true // true表示可以监听对象中的属性变化
  }
}

즉시 : Watch가 처음 바인딩될 때 핸들러를 실행할지 여부를 나타냅니다. 값이 true이면 watch에서 선언된 즉시 핸들러 메소드가 실행된다는 의미이고, 값이 false이면 해당 핸들러 메소드가 실행됩니다. 일반적인 시계 사용법과 동일하며 실행을 위해서만 데이터가 변경되는 경우

deep : 객체의 변화를 모니터링해야 하는 경우 일반적인 watch 방식으로는 객체 내부 속성의 변화를 모니터링할 수 없으며, data 내의 데이터만이 변경 사항을 모니터링할 수 있습니다. 이때 deep 속성이 필요합니다. 심층 모니터링. deep으로 설정: true, 객체에 많은 속성이 있는 경우 각 속성 변경이 핸들러를 실행합니다.

6. 시계와 계산의 차이점

계산된 get에는 반환 값(return)이 있어야 하며 시계의 반환은 선택 사항입니다.

Computed는 캐싱을 지원합니다 . 종속 데이터가 변경된 경우에만 다시 계산하지만 watch는 캐싱을 지원하지 않습니다. 데이터가 변경되면 해당 작업을 직접 트리거합니다.

Computed는 이름을 사용자 정의할 수 있지만 watch는 데이터와 동일한 이름을 가진 속성만 모니터링할 수 있습니다.

Computed는 비동기를 지원하지 않습니다 .computed에 비동기 작업이 있는 경우 유효하지 않으며 데이터 변경을 모니터링할 수 없습니다. 반면 watch는 비동기를 지원합니다.

계산된 속성 값은 기본적으로 캐시됩니다 계산된 속성은 응답 종속성, 즉 data에서 선언되거나 props의 상위 구성 요소에 의해 전달된 데이터를 기반으로 계산된 값을 기반으로 캐시되며 watch 함수는 두 가지를 허용합니다. 매개변수 중 첫 번째는 최신 값, 두 번째는 입력 전 값입니다.

속성이 다른 속성에서 계산되는 경우 이 속성은 다대일 또는 일대일로 다른 속성에 따라 달라지며 일반적으로 계산을 사용합니다. 속성이 변경되면 해당 작업인 일대다를 수행해야 합니다. , 일반적으로 시계를 사용합니다

계산된 항목은 기본적으로 처음 로드할 때 모니터링을 시작합니다 . 처음 로드할 때 모니터링하지 않도록 기본값을 감시합니다 . 첫 번째 로드를 모니터링해야 하는 경우 즉시 속성을 추가하고 true로 설정합니다(즉시: true).

Computed는 복잡한 계산에 적합하고 Watch는 일부 소모성 기능에 적합합니다.사용 시나리오: 계산됨----속성이 여러 속성의 영향을 받는 경우 계산됨---장바구니 상품 정산을 사용합니다. watch---------하나의 데이터가 여러 데이터에 영향을 미치는 경우 watch------검색창을 사용하세요.

7. Vue 수명주기

첫 번째와 두 번째 점을 통해 데이터 관찰자가 생성되면 데이터 초기화가 완료되었음을 알 수 있으며, 메서드, 계산 속성 props 등이 초기화되면 문제가 발생합니다.

데이터 소품이 계산된 watch 메서드가 생성되는 순서는 무엇입니까?

vue의 소스 코드를 보면: props => 메소드 => 데이터 => 계산 => watch ;

Vue 면접 질문 모음

1. Vue의 데이터가 객체가 아닌 함수인 이유는 무엇입니까?

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

3. 개발 시 jQuery 대비 Vue의 장점

4. Vue 컴포넌트(컴포넌트)에 대한 이해

5.watch는 두 값의 변화를 동시에 모니터링하고 메소드를 실행합니다.

6. 시계와 계산의 차이점

7. Vue 수명주기

추천