9가지 일반적인 vuejs 면접 질문, 알고 계시나요?

11가지 일반적인 vuejs 면접 질문, 알고 계시나요? vue 면접 질문 칼럼

중에서 1. MVVM에 대해 어떻게 이해하고 있나요?

MVVM은 Model-View-ViewModel의 약자입니다.
Model은 데이터 모델을 나타내며, 데이터 수정 및 운용을 위한 비즈니스 로직도 Model에서 정의할 수 있습니다.
View는 데이터 모델을 표시용 UI로 변환하는 UI 구성 요소를 나타냅니다.
ViewModel은 모델 데이터의 변화를 모니터링하고, View 동작을 제어하며, 사용자 상호 작용을 처리합니다. 간단히 이해하면 View와 Model을 동기화하고 Model과 View를 연결하는 객체입니다.
MVVM 아키텍처에서는 View와 Model이 직접 연결되지 않습니다. 대신 ViewModel을 통해 상호 작용합니다. 따라서 View 데이터의 변경 사항은 Model과 Model 데이터에 동기화됩니다. 변경 사항은 뷰에도 즉시 반영됩니다.
ViewModel은 양방향 데이터 바인딩을 통해 View 레이어와 Model 레이어를 연결하고, View와 Model 간의 동기화는 사람의 개입 없이 완전히 자동으로 이루어지기 때문에 개발자는 비즈니스 로직에만 집중하면 되며 수동으로 DOM을 운영할 필요가 없습니다. 데이터 상태 동기화에 신경 쓸 필요가 없습니다. 복잡한 데이터 상태 유지 관리는 MVVM에서 완벽하게 관리됩니다.

2. Vue의 수명 주기

beforeCreate(생성 전)

데이터 관찰 및 초기화 이벤트 시작 전

생성(생성 후)

완전한 데이터 관찰, 속성 및 메서드 작동, 초기화 이벤트, el 속성 아직 표시되지 않았습니다.

beforeMount(로드 전)

마운트가 시작되기 전에 호출되며 관련 렌더 함수가 처음 호출됩니다. 인스턴스는 템플릿을 컴파일하고 데이터 및 템플릿의 데이터에서 html을 생성하는 구성을 완료했습니다. 현재 페이지에는 html이 마운트되지 않았습니다.

마운트됨(로드 후)

el이 새로 생성된 vm.$el로 교체되고 인스턴스에 마운트된 후 호출됩니다. 인스턴스는 다음 구성을 완료했습니다. el 속성이 가리키는 DOM 객체를 위의 컴파일된 html 콘텐츠로 바꿉니다. 템플릿의 html을 html 페이지로 렌더링하는 작업을 완료합니다. 이 과정에서 Ajax 상호작용이 수행됩니다.

beforeUpdate(업데이트 전)

은 데이터가 업데이트되기 전에 호출됩니다. 이는 가상 DOM이 다시 렌더링되고 패치되기 전에 발생합니다. 추가 재렌더링 프로세스를 트리거하지 않고도 이 후크에서 상태를 추가로 변경할 수 있습니다.

updated

데이터 변경으로 인해 가상 DOM을 다시 렌더링하고 패치한 후 호출됩니다. 호출되면 컴포넌트 DOM이 업데이트되므로 DOM 종속 작업을 수행할 수 있습니다. 그러나 대부분의 경우 이 기간 동안 상태를 변경하는 것은 피해야 합니다. 업데이트의 무한 루프가 발생할 수 있기 때문입니다. 이 후크는 서버측 렌더링 중에는 호출되지 않습니다.

beforeDestroy(파괴 전)

인스턴스가 파기되기 전에 호출됩니다. 인스턴스는 여전히 완전히 사용 가능합니다.

파괴됨(파괴 후)

인스턴스가 파기된 후 호출됩니다. 호출 후에는 모든 이벤트 리스너가 제거되고 모든 하위 인스턴스가 삭제됩니다. 이 후크는 서버측 렌더링 중에는 호출되지 않습니다.

1. Vue 수명주기는 무엇인가요?

답변: Vue 인스턴스 생성부터 소멸까지의 과정이 생명주기입니다. 생성 시작부터 데이터 초기화, 템플릿 컴파일, Dom 마운트→렌더링, 업데이트→렌더링, 소멸까지의 일련의 과정을 Vue의 생명주기라고 합니다.

2. Vue 라이프사이클의 역할은 무엇인가요?

답변: 수명 주기에는 여러 이벤트 후크가 있어 전체 Vue 인스턴스의 프로세스를 제어할 때 좋은 논리를 더 쉽게 형성할 수 있습니다.

3. Vue 수명주기에는 몇 단계가 있나요?

답변: 생성 전/후, 로드 전/후, 업데이트 전/후, 파괴 전/후 등 총 8단계로 나눌 수 있습니다.

4. 페이지가 처음 로드될 때 어떤 후크가 실행되나요?

답변: 다음 beforeCreate, Created, beforeMount, Mount를 트리거합니다.

5. DOM 렌더링은 어떤 주기로 완료되나요?

답변: DOM 렌더링은 마운트된 상태에서 완료됩니다.

3. 양방향 데이터 바인딩을 구현하는 Vue의 원리: Object.defineProperty()

Vue는 주로 게시자-구독자 모델과 결합된 데이터 하이재킹을 사용하고 Object.defineProperty()를 통한 하이재킹을 사용하여 양방향 데이터 바인딩을 구현합니다( ) 각 속성의 setter 및 getter는 데이터가 변경될 때 구독자에게 메시지를 게시하여 해당 수신 콜백을 트리거합니다. 일반 Javascript 객체를 데이터 옵션으로 Vue 인스턴스에 전달하면 Vue는 해당 속성을 반복하고 Object.defineProperty를 사용하여 해당 속성을 getter/setter로 변환합니다. getter/setter는 사용자에게 표시되지 않지만 내부적으로 Vue가 종속성을 추적하고 속성에 액세스하고 수정될 때 변경 사항을 알릴 수 있습니다.

Vue의 양방향 데이터 바인딩은 MVVM을 데이터 바인딩의 입구로 사용하여 Observer, Compile 및 Watcher를 통합합니다. Observer를 사용하여 자체 모델의 데이터 변경을 모니터링하고 Compile을 사용하여 템플릿 지침을 구문 분석하고 컴파일합니다. vue Parse {{}})에서 마지막으로 watcher를 사용하여 관찰자와 컴파일 간의 통신 브리지를 구축하여 데이터 변경 -> 보기 업데이트 보기 대화형 변경(입력) -> 데이터 모델 변경의 양방향 바인딩 효과를 달성합니다.

    <p>
        <input>
        </p><p></p>
    

<script>
    var obj = {}
    Object.defineProperty(obj, &#39;txt&#39;, {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById(&#39;txt&#39;).value = newValue
            document.getElementById(&#39;show&#39;).innerHTML = newValue
        }
    })
    document.addEventListener(&#39;keyup&#39;, function (e) {
        obj.txt = e.target.value
    })
</script>

4. Vue 구성 요소 간 매개변수 전송

1. 상위 구성 요소와 하위 구성 요소 간의 값 전송
상위 구성 요소가 하위 구성 요소에 전달: 하위 구성 요소가 props 메소드를 통해 데이터를 수신합니다.
하위 구성 요소가 상위 구성 요소에 전달됩니다. $emit 메소드가 매개 변수를 전달합니다.
2. 비상위 구성요소와 하위 구성요소 간의 데이터 전송은 이벤트 전송 및 수신에 사용할 수 있는 전송 스테이션과 동일한 이벤트 센터를 생성하는 ​
eventBus 값을 전달합니다. 프로젝트가 상대적으로 작다면 이것이 더 적합합니다. (많은 사람들이 VUEX를 직접 사용하는 것을 권장하지만 필요에 따라 다릅니다. 기술은 수단일 뿐이며 목표 달성은 왕입니다.)

5. Vue의 라우팅 구현: 해시 모드 및 히스토리 모드

해시 모드:

브라우저에서는 "#" 기호, # 및 # 뒤의 문자를 해시라고 하며, 이는 window.location.hash로 읽혀집니다.
특징: 해시는 URL에 있지만 HTTP 요청에는 포함되지 않습니다. 지침으로 사용됨 브라우저 작업은 서버 측 보안에 쓸모가 없으며 해싱은 페이지를 다시 로드하지 않습니다.
해시 모드에서는 http://www.xxx.com과 같이 해시 기호 앞의 내용만 요청에 포함됩니다. 따라서 백엔드의 경우 경로가 완전히 커버되지 않더라도 포함되지 않습니다. 404 오류가 반환되었습니다.

history 모드:

history는 HTML5의 새로운 기능을 채택하고 브라우저 기록 스택을 수정하는 pushState(), replacementState() 및 상태 변경을 모니터링하는 popState 이벤트라는 두 가지 새로운 메서드를 제공합니다.
기록 모드에서 프런트 엔드의 URL은 실제로 백엔드에 대한 요청을 시작하는 URL(예: http://www.xxx.com/items/id)과 일치해야 합니다. 백엔드에 /items/id에 대한 라우팅 처리가 부족한 경우 404 오류가 반환됩니다. Vue-Router 공식 웹사이트에서는 다음과 같이 설명합니다. "그러나 이 모드에서 잘 플레이하려면 백그라운드 구성 지원도 필요합니다... 따라서 모든 상황을 다루는 서버 측에 후보 리소스를 추가해야 합니다. URL이 정적 리소스와 일치하지 않습니다. 앱이 의존하는 페이지인 동일한 index.html 페이지가 반환되어야 합니다. "

6. vue 라우팅

의 후크 기능은 상태를 읽고 넣는 데만 사용됩니다. 상태를 변경하는 방법은 비동기식이므로 작업에 캡슐화해야 합니다.
main.js에 store를 도입하고 주입합니다. 새 디렉터리 저장소가 생성되고...내보내집니다.
시나리오에는 다음이 포함됩니다. 단일 페이지 애플리케이션에서 구성 요소 간 상태, 음악 재생, 로그인 상태 및 장바구니에 추가

state

Vuex는 단일 상태 트리를 사용합니다. 즉, 각 애플리케이션에는 하나의 스토어만 포함됩니다. 인스턴스이지만 단일 상태 트리입니다. 모듈성과 충돌이 없습니다. 저장된 데이터 상태는 직접 수정할 수 없습니다.

mutations

mutations는 Vuex 스토어의 상태나 데이터를 동적으로 수정하는 메서드를 정의합니다.

getters

vue와 유사한 계산된 속성으로 주로 일부 데이터를 필터링하는 데 사용됩니다.

action

actions는 mutation에서 데이터를 처리하는 방식을 비동기적으로 처리할 수 있는 방식으로 바꾸는 것으로 이해될 수 있습니다. 간단히 말하면, 데이터의 비동기 작업입니다. 뷰 레이어는 store.dispath를 통해 작업을 배포합니다.

modules

프로젝트가 특히 복잡한 경우 각 모듈에는 고유한 상태, 변형, 동작 및 게터가 있을 수 있으므로 구조가 매우 명확하고 관리하기 쉽습니다.

//store实例
const store = new Vuex.Store({ 
    state: {
        count: 0
    },
    mutations: {                
        increment (state) {
            state.count++
        }
    },
    actions: { 
        increment (context) {
            context.commit('increment')
        }
    }
})

7. vue-cli에 사용자 정의 지침을 추가하는 방법은 무엇입니까?

1. 로컬 지침 만들기

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2. 전역 지침

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3. Vue에서 필터를 사용자 정의하는 방법은 무엇입니까?

html 코드:

<p>
    </p><p></p>
    <p></p>

JS 코드:

<p>
     <input>
     {{msg| capitalize }}
</p>

전역적으로 정의된 필터

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

9. 한 문장으로 답변할 수 있는 인터뷰 질문

1.css는 현재 구성 요소에서만 작동합니다.

답변: 스타일 태그에서 예를 들어

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

답변: v-if는 조건에 따라 렌더링되고, v-show는 디스플레이 블록 또는 없음 ;

3. 경로와 라우터의 차이점

답변:

Router는 라우팅 점프 방법, 후크 기능 등을 포함하는 "라우팅 인스턴스" 개체입니다.

4. vue.js의 두 코어는 무엇인가요?

답변: 데이터 기반 구성 요소 시스템

5. vue

답변에서 일반적으로 사용되는 몇 가지 지침: v-for, v-if, v-bind, v-on, v-show, v-else

6 . Vue에서 일반적으로 사용되는 수정자는 무엇입니까?

답변: .prevent: 제출 이벤트는 더 이상 페이지를 다시 로드하지 않습니다. .stop: 클릭 이벤트가 버블링되는 것을 방지합니다. .self: 이벤트가 하위 요소가 아닌 요소 자체에서 발생할 때 트리거됩니다. 캡처: 이벤트 수신, 이벤트가 발생하면 호출됩니다.

7.v-on 여러 메서드를 바인딩할 수 있나요?

답변: 네

8. Vue에서 핵심 가치의 역할은 무엇인가요?

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

9. vue의 계산 속성은 무엇인가요?

답변: 템플릿에 논리를 너무 많이 넣으면 템플릿이 과중해지고 유지 관리가 어려워집니다. 복잡한 데이터 처리가 필요하고 여러 번 사용될 수 있는 경우 계산된 속성을 사용해 보세요. 이점: ① 데이터 처리 구조를 명확하게 합니다. ② 데이터에 따라 데이터 업데이트 및 처리 결과가 자동으로 업데이트됩니다. ③ 계산된 속성 내부는 vm 인스턴스를 가리킵니다. ④ 템플릿이 호출되면 계산된 내용을 작성하면 됩니다. ⑤ 일반적으로 사용되는 getter 메서드는 데이터를 얻기 위해 set 메서드를 사용하여 데이터를 변경할 수도 있습니다. ⑥ 메서드와 비교하면 종속 데이터 변경에 관계없이 메서드가 다시 계산되지만 종속 데이터는 변경되지 않습니다. , 계산된 값은 캐시에서 가져오며 다시 계산되지 않습니다.

10.Vue와 같은 단일 페이지 애플리케이션과 그 장점과 단점

답변: 장점: Vue의 목표는 가능한 가장 간단한 API를 통해 반응형 데이터 바인딩 및 결합된 뷰 구성 요소를 달성하는 것입니다. 핵심은 반응형 데이터 바인딩 시스템입니다. . MVVM은 데이터 기반, 구성 요소화, 경량, 간결, 효율적, 빠르며 모듈 친화적입니다.
단점: 낮은 버전의 브라우저는 지원하지 않으며, 가장 낮은 버전은 IE9만 지원합니다. SEO 최적화에 도움이 되지 않습니다(SEO를 지원하려면 서버를 통해 구성 요소를 렌더링하는 것이 좋습니다). 처음에는 홈페이지를 방문하지 마세요. 브라우저의 탐색 버튼을 사용하여 스스로 앞뒤로 이동할 수 있습니다.

11. vue-router의 동적 라우팅을 정의하는 방법은 무엇입니까? 전달된 값을 얻는 방법은 무엇입니까?

답변: 라우터 디렉터리의 index.js 파일에서 경로 속성에 /:id를 추가하고 params.id를 사용합니다. 라우터 개체의 가져오기.

위 내용은 9가지 일반적인 vuejs 면접 질문, 알고 계시나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!