더 적극적인 오픈 소스의 일부 업데이트에 추적 MVVM을 사용하기 시작 당신이 볼 수있는 것처럼 프런트 엔드 프레임 시장 프레임 워크는 내부 오픈 소스 프로그램의 많은 MVVM의 대부분을하기 전에, 장소에 VUE 프레임 워크 뒤에 점차왔다 모드는, 3.0 이후 MVVM 패턴을 사용하여 오픈 소스 몰 DSMall3.0 전화가 끝나기 전에 유사 후자의 업데이트 프레임 워크 VUE는 VUE의 프레임 워크로 대체됩니다 및 MVVM과 VUE는 어떤 차이를 만들 것입니다?
첫째, MVVM 이해 하시나요?
MVVM은 모델 - 뷰 - 뷰 모델의 약자입니다.
모델 데이터 모델을 나타내는 데이터는 정의하고 모델에서 비즈니스 로직 작업을 수정할 수 있습니다.
UI가 펼쳐으로 데이터 모델에 대한 책임 UI 구성 요소의보기를 대신하여.
조회 및 뷰 모델 모니터 모델 데이터, 사용자 상호 작용이 처리의 제어 동작을 변경하는, 동기화 객체는 간단한 이해 모델보기 연결 모델이다.
하지만보기와 모델 직접적인 링크 사이 MVVM 아키텍처에서의 ViewModel을 통해 상호 작용합니다.
모델과 뷰 모델 사이의 상호 작용이 양방향, 그래서 모델에 동기화됩니다보기 데이터를 변경, 데이터는보기에 모델 즉각적인 반응을 다릅니다.
인간의 개입없이 자동으로 조회 및 전체 모델 뷰 모델 사이 층 및 모델 - 뷰가 접속되고, 동기를 결합 방식에 의해 데이터.
개발자는 비즈니스 로직에 집중할 수 있도록, 수동 운전 DOM을 필요로하지 않는 데이터의 동기화를 통합 관리 상태 MVVM에 의해 완전히 유지 우려 국가, 복잡한 데이터 할 필요는 없다.
두, 뷰 수명주기
관찰 및 데이터 초기화 이벤트 (생성 전) beforeCreate는 아직 시작되지 않았습니다.
(생성 한 후)가 생성 작업이 관측 데이터, 속성, 방법, 초기화 완료 이벤트, $ EL 특성이 도시되어 있지 않다.
beforeMount는 (프리로드) 장착 시작 전에 호출 처음 호출 함수 렌더링 관련된다.
컴파일 템플릿, 데이터 내부의 템플릿 데이터는 HTML을 생성 : 예 구성을 다음 완료했다. HTML 페이지를 장착하지 않는이 시간 수 있다는 점을 유의하여야한다.
(선적 후) 설치. 엘은 VM 엘이 새로 만든 대체 $, 및 예 후 전화를 마운트합니다.
예를 들면 구성 다음을 완료 : 위의 컴파일 된 HTML은 엘 DOM 개체 특성 포인트를 대체합니다. HTML HTML 페이지를 렌더링하는 템플릿을 완료. 이 과정은 아약스의 상호 작용을 수행한다.
beforeUpdate 데이터 업데이트 호출하기 전에 (갱신하기 전에), 패치하기 전에 가상 재 렌더링 및 DOM에서 일어난다. 더 후크의 상태를 변경할 수, 무게 추가 렌더링 프로세스를 트리거하지 않습니다.
업데이트 (업데이트) 가상 렌더링 재 패칭으로 인해 야기 된 DOM 데이터 변경 후했다.
당신이 호출 할 때 DOM 작업을 수행 할 수에 의존 할 수 있도록, DOM 구성 요소가 업데이트되었습니다. 이 무한 루프 업데이트 될 수 있습니다 그러나, 대부분의 경우에, 당신은이 기간 동안 상태를 변경하지 않도록해야합니다. 후크는 서버 측 렌더링 중에 호출되지 않습니다.
beforeDestroy 파괴 인스턴스 전에 호출 (파괴 전). 아직 완벽하게 사용할 수의 예.
인스턴스가 파괴 한 후 호출 (나중에 파괴) 파괴했다.
호출 한 후, 모든 이벤트 리스너가 제거됩니다, 모든 자식 인스턴스가 파괴됩니다. 후크는 서버 측 렌더링 중에 호출되지 않습니다.
1. 수명주기 VUE는 무엇입니까?
A : 파괴 창조에서 뷰 인스턴스 프로세스는 수명주기입니다.
창조의 시작, 초기화 데이터, 컴파일 된 템플릿, 마운트 돔 → 렌더링, 렌더링 갱신 → 파괴와 일련의 과정에서, 뷰의 수명주기를했다.
수명주기가 2.vue 역할은 무엇인가?
답변 : 우리가 전체 프로세스 뷰 인스턴스의 제어에 좋은 논리를 형성하는 것은 여러 이벤트 후크의 수명주기, 그것은 쉽게합니다.
3.vue 전체 수명주기 단계?
A : 그것은 여덟 단계의 총으로 나눌 수 있습니다 :로드하기 전에 / 후면을 작성하기 전에 / 업데이트 후 전 / 파괴 한 후 전 / 파괴 후.
4. 몇 후크를 트리거 첫 번째 페이지로드?
A : 다음은이 beforeCreate를 트리거 생성, beforeMount는, 장착.
5.DOM 렌더링이되는 기간에 완료?
A : 렌더링에 장착 DOM이 완료되었습니다.
세, 뷰 바인딩 양방향 데이터의 원리를 구현합니다 Object.defineProperty ()
VUE 주로 바인딩 양방향 데이터 구현 : 함께 데이터의 사용을 게시자 납치와 - 방식으로 가입자 모델.
데이터가 변경 리스너 콜백을 실행할 때 세터가 Object.defineProperty하여 각 속성을 납치 (), 게터는 가입자들에게 메시지를 게시했다.
일반 뷰 자바 스크립트 객체는 인스턴스 데이터 옵션으로 전달합니다.
뷰는 게터 / 세터로 Object.defineProperty 그들과 함께, 해당 속성을 통과합니다.
사용자 게터 / 세터가 표시되지 않지만, 내부적으로 액세스하고 수정 된 속성의 변경을 통보 할 때 뷰가 종속 추적 할 수 있습니다.
데이터 바인딩 MVVM 입구 통합 옵저버 컴파일 세 감시자 구속력 VUE 양방향 데이터.
데이터 관찰자, 컴파일을 통해 명령을 구문 분석 템플릿 컴파일러에 의해 자신의 모델의 변화를 모니터링하기 위해 (VUE하는 것은 해결하는 데 사용됩니다 {{}}).
;>보기 업데이트 - 최종 용도 관찰자 컴파일 사이의 다리 역할을 워처는 데이터 변경을 달성하기 위해
상호 작용의 변화 (입력)를 조회 -> 데이터 모델을 변경 양방향 결합 효과.
JS 결합하는 간단한 쌍방향 달성
<body>
<div 상술 ID = "애플리케이션">
<형식의 INPUT = "텍스트"위에서 언급 한 id = "TXT가">
<는 P가-상기 ID 언급 = "보기"> </ ρ->
</ div>
</ 몸 >
<스크립트 유형 = "텍스트 / 자바 스크립트">
var에 OBJ = {}
Object.defineProperty (OBJ, 'TXT', {
GET : 함수 () {
반환 OBJ
},
SET : 기능 (NEWVALUE) {
document.getElementById를 ( 'TXT ') .Value = NEWVALUE
document.getElementById를 ('
document.addEventListener ( 'keyUp 등', 기능 (E) {
obj.txt = e.target.value
})
</ script>
뷰 조립체 사이에 네 개의 파라미터 전송
1. 부모 요소 조립체 전통적인 값
부모 구성 요소가 자식으로 전달 구성 요소 : 소품 법에 의해 허용 데이터 서브 어셈블리,
서브 어셈블리는 상위 구성 요소를 통과 : $ 매개 변수를 전달하는 방법을 방출
이 아닌 아버지와 아들, 값에 의한 형 구성 요소의 구성 요소 사이의 2 데이터 전송
eventBus가, 대중 교통 역에 해당 이벤트 센터를 만드는 것입니다, 당신이 할 수있는 이벤트를 전달하고 이벤트를 수신하기 위해 그것을 사용할 수 있습니다.
이 프로젝트는 더 적절한으로 작다. (많은 사람들이 특정 목적을 달성하기 위해, 수요가 약간의 기술은 단지 수단보고, 직접 VUEX 추천이 있지만 .. 왕)
V. 라우팅 뷰 실현 : 해시 모드와 역사 모드
해시 모드 :. 브라우저에서 기호 " # ", # 및 # 나중에하면 window.location.hash 읽기, 해시 문자라고;
기능 : URL에 있지만 HTTP 요청에 포함되어 있지만, 해시, 브라우저는 서버의 작동을 안내하는 데 사용 안전 쓸모없는, 해시는 페이지를 다시로드하지 않습니다.
모드의 역사 :, 새로운 HTML5 기능을 사용 이력
: pushState (), replaceState () 브라우저 기록 스택을 수정하고 상태 변화에 popState 이벤트를들을 수 있으며, 두 개의 새로운 방법을 제공합니다.
여섯째, 뷰 각도 및 상기 차이 반작용?
(버전이 지속적으로 업데이 트, 다음과 같은 차이점은 아마 꽤 괜찮되지 않습니다. 나는 각을 위해 만 VUE를 사용하는 일을하고 덜 조리 된 반응)
1. AngularJS와 가진 차이
동일한 지점 :
지원 명령 : 내장 명령 및 사용자 정의 명령, 필터 지원 : 내장 된 필터와 사용자 정의 필터는 낮은 엔드 브라우저를 지원하지 않습니다 데이터 바인딩 양방향을 지원합니다.
다른 점 :
높은 비용 AngularJS와는 증가 의존성 주입 특성으로, 학습 및 API 자체가 비교적 간단하고 직관적 Vue.js 제공하며,
성능, 데이터에 대한 의존도가 더러운 AngularJS와 시험, 더 너무 느린 감시자를 만들기 위해,
뷰 의 .js 기반 추적 관찰 비동기 큐 업데이트의 사용을 의존하는 모든 데이터는 트리거 독립적이다.
과의 차이 반작용 2.
같은 점을 :
특별한 JSX 문법과 반응, Vue.js 구성 요소 개발도 준비 존중한다.
사용하여 컴파일 할 필요가 모두 후 VUE 특수 파일 형식, 파일 내용, 일부 계약을 체결,
같은 중심 생각을 : 모든 구성 요소가 구성 요소 인스턴스 사이에 중첩 될 수 있으며,
개발자는 사용자 정의 할 수 있습니다 합리적인 후크 기능을 제공 지상의 수요에 대처하기 위해,
하지 구축 열 AJAX, 경로 및 핵심 패키지에 다른 기능을하지만, 플러그인로드,
속성의 구성 요소 개발에 대한 지원이나 mixin.
다른 점 :
가상 결과가 더러운 검사를 할 반작용 사용하여 DOM을 렌더링,
Vue.js은 매우 쉽고 빠르게 운영하는 가상 DOM 될 수있는 템플릿 등 지침, 필터를 제공합니다.
세븐, VUE 라우팅 후크 기능
탐색 점프, beforeEach, afterEach을 제어 할 수있는 홈은 일반적으로 페이지의 제목을 수정하는 데 사용됩니다.
일부 필요가 리디렉션 페이지를 조정하려면 로그인해야합니다.
beforeEach 다음에서 세 개의 매개 변수가있다 :
에 : 대상이 경로 객체 경로를 입력하는 것입니다,
에서 : 경로 현재 탐색 경로를 떠나려했다
다음 : 함수는 방법이 후크를 해결 호출해야합니다. 결과의 구현은 다음 메서드 호출 매개 변수에 따라 달라집니다. 당신은 점프 페이지를 제어 할 수 있습니다.
여덟, 어떻게 그 vuex? 어떻게 사용 하는가? 어떤 시나리오를 사용 하는가?
단지 가게에 초점을 맞춘 상태에서 읽어,
상태의 변화가 동기화 일이 돌연변이를 제출하는 방법입니다 비동기 로직이 작업에 캡슐화되어야한다.
스토어, main.js에 주사를 소개했다. 디렉토리 저장소, ... .. 수출을 만듭니다.
장면 : 단일 페이지 응용 프로그램, 구성 요소, 음악 플레이어의 상태, 로그인, 장바구니에 추가
주
Vuex 한 상태 트리, 즉, 각 응용 프로그램은 상점의 인스턴스를 포함하지만,하지 않습니다 하나의 상태 트리 및 모듈 충돌.
데이터를 직접 수정할 수 없습니다 저장된 데이터 상태.
돌연변이에
있어서 정의 된 돌연변이 주 또는 데이터 Vuex 동적 변경을 저장한다.
게터
유사한 컴퓨팅 VUE 특성은 주로 데이터의 일부를 필터링하는 데 사용된다.
액션
동작이 데이터 처리 방법은 데이터 변이 가능한 비동기하게되는 과정으로 이해 될 수 있으며, 비동기 동작은 단순히 데이터를 의미한다.
보기 층은 store.dispath하여 조치를 배포합니다.
CONST 상점은 = 새 Vuex.Store ({// 저장 예
주 : {
COUNT : 0
},
돌연변이 : {
INCREMENT (주) {
state.count ++
}
}
작업 : {
INCREMENT (컨텍스트) {
context.commit ( 'INCREMENT')
}
}
})
모듈
프로젝트 특히 복잡한, 그들은 수 각 모듈은 자신의 상태를 가질 수 있도록, 돌연변이, 액션, 게터, 구조는 매우 명확하고 쉽게 관리 할 수 있도록.
ModuleA = {const를
주 : {...},
돌연변이 : {...},
작업 : {...},
게터 : {...}
}
CONST = {ModuleB
주 : {...},
돌연변이 : ...} {
작업 : {...}
}
새로운 새로운 Vuex.Store = CONST ({저장
모듈 : {
A : ModuleA,
B : ModuleB
})
구, VUE-CLI는 사용자 지정 명령을 추가하려면?
1. 로컬 명령 생성
VAR 응용 = 새로운 새로운 뷰 ({
'#app': EL
데이터 {
}
// 생성 명령어 ()가 복수 일 수있다
지시자 {
// 명령어 이름
DIR1 {
제 (EL 삽입을) {
// 첫 번째 파라미터는 현재 사용 DOM 명령 지시이며
, 상기 CONSOLE.LOG (EL)
CONSOLE.LOG (인수)
//에서 DOM 조작
el.style.width = '200 픽셀';
el.style.height = '200 픽셀 ';
el.style.background ='# 000 ';
}
}
}
})
2. 전역 명령
Vue.directive ( 'DIR2'{
삽입 된 (EL) {
CONSOLE.LOG (EL);
}
})
3. 명령
<div ID = "애플리케이션">
<div의 V-DIR1> </ DIV>
<DIV V-DIR2> </ DIV>
</ DIV>
열, VUE는 어떻게 필터를 사용자 지정하는?
HTML 코드 :
<DIV ID = "응용 프로그램">
<INPUT 유형 = "텍스트"V-모델 = "MSG"/>
{{MSG | 활용할}}
</ DIV>
JS 코드 :
VAR VM = 새로운 새로운 뷰 ({
EL : "#app"
데이터 : {
MSG : ''
},
필터 : {
활용 : 기능 (값) {
(! 값) 반환 경우 ''
value.charAt 리턴 (0) .toUpperCase () value.slice +. (1)
}
}
})
전역으로 정의 필터
Vue.filter {(함수 (값 '대문자')
'IF (! 값) 복귀'
값 = 값 로 .toString ()
value.slice는 +. (1) value.charAt (0) .toUpperCase ()를 호출
})
필터는 첫번째 파라미터로서 식 (MSG)의 값을 수신한다.
필터는 제 MSG 매개 변수 값을 활용 수신처.
연결 유지의 XI 이해?
뷰 연결 유지 구성 요소가 정지 상태 또는 다시 렌더링을 피할 수에 포함 할 수 있으며, 내장 된 구성 요소입니다.
VUE 2.1.0 버전 이후, 두 개의 새로 추가 된 특성을 살아-유지 : 포함 (캐시 구성 요소 포함) 및 제외 (어셈블리 캐시를 배제하지, 우선 순위보다 더 큰 포함).
사용
<= 살아-유지 = 'exclude_components을'제외 'include_components'를 포함>
<구성 요소>
<! - 캐시 구성 요소 속성이 포함 및 제외 여부에 따라 달라집니다 ->
<
</ 유지 (keep-alive)>
매개 변수의
포함 - 문자열이나 캐시에만 구성 요소 이름과 일치하는 정규 표현식은
제외 - 문자열이나 정규 표현식, 이름이 일치하는 모든 구성 요소가 캐시되지 않습니다
포함 및 특성을 배제 할 수 구성 요소 조건부 캐시.
모두 별도의 문자열, 정규 표현식, 배열에 ","할 수있다.
일반 또는 배열을 사용하는 경우, V-바인딩을 사용해야합니다.
사용 예
<! - 쉼표로 구분 된 문자열, 구성 요소 만 A와 B가 캐시됩니다. ->
<= 연결 유지 "A, B"를> 포함
<구성> </ 부품>
</ 연결 유지>
<! - - 정규 표현식은 (규칙 캐시 일치 충족의 V-바인딩을 사용해야합니다)>
| < "B / / A"는이 =을 포함하는 연결 유지>
<구성 요소> </ 구성 요소>
</ 유지]를 -alive>
<! - 어레이 (V 바인드를 사용해야 캐시 포함) ->
<연결 유지 다음을 포함 = "[ 'A', 'B']">
<구성> </ 부품>
</ 연결 유지>
XII 단어 인터뷰 질문에 대답 할 수있는
유일한 현재의 구성 요소 일 1.css
을 : 문체 범위 태그 할 수 있습니다 예를 들면 : <스타일> </ 스타일> 범위
2.v-IF 그리고 V-차이보기
A : 상태, V 쇼에 따른 렌더링 V-경우 블록 또는 유료의 표시이고;
차이 3 $ 경로 및 $ 라우터
않음 : $ 노선 경로를 포함한 "오브젝트 라우팅 정보"PARAMS이며, 해시, 쿼리, fullpath에, 일치, 이름 및 기타 라우팅 정보 매개 변수입니다.
라우터와 오브젝트 $ A "라우팅 인스턴스는"라우팅 점프 방법 등 후크 함수를 포함한다.
두 개의 핵심 4.vue.js는 무엇입니까?
A : 시스템의 데이터 기반 구성 요소
일반적으로 사용되는 몇 가지 5.vue 명령
A : V-를위한 V-IF, 바인드-V, V-ON, V-쇼, V - 더 다른
6.vue 일반적으로 사용되는 수정?
A : .prevent : 이벤트 페이지를 새로 고침 할 수 없다;
.stop : 클릭 이벤트 버블 링을 중지;
.self을 : 이벤트가 아닌 그 자체 트리거 요소의 하위 요소보다 발생하면,
.capture :
A :
키 값의 8.vue의 역할?
A : Vue.js이와 업데이트 된 목록 요소 인 V-렌더링되었을 때, 그것은 전략 "현장 다중화에"사용하는 기본 설정됩니다.
데이터 항목의 순서가 변경되는 경우, 뷰 DOM 요소는 데이터 아이템들의 순서와 일치하지만, 단지 여기에서 각 요소를 재사용하는 이동되지 않을 것이며, 각 요소는 특정 인덱스로 렌더링 한 것을 보장하기 위해 나타난다.
주요 역할은 효율적인 업데이트를 가상 DOM의 핵심입니다.
9. 속성 VUE의 계산은 무엇입니까?
A는 : 템플릿 템플릿에 너무 많은 로직을 두는 것은 데이터 처리 단지의 필요성에 유지 보수가 너무 무겁고 어려울 것이며, 잠재적으로 여러 사용 사례는 속성으로 계산 걸릴하려고합니다.
장점 : ① 데이터 처리 구조 분명,
데이터, 데이터 갱신 자동 갱신 처리 결과에 ② 따라,
③이 시점 VM 인스턴스 내부 계산 된 속성,
호출시 ④ 템플릿이 직접 속성 이름을 기록 할 수 산출된다
⑤ 게터 사용 또한, 데이터를 변경하는 설정 수단을 사용하여 데이터를 획득하는 방법,
⑥ 방법에 비해 관계없이 동일한 데이터의 종속 변수, 메소드 계산하지만, 캐시로부터 계산 동일한 데이터 수집 시간에 의존한다, 다시 계산하지.
10.vue 다른 장점들 및 단일 페이지 응용 프로그램의 단점
A : 장점 : 뷰 목표 데이터 바인딩 및 API에 의해 가능한 한 단순 결합 응답 조립체의 뷰를 실현하는, 시스템의 코어는 데이터 바인딩 응답이다.
MVVM, 데이터 중심, 구성 요소, 경량, 간단하게, 효율적으로, 빠른, 모듈 친화적 인.
단점 : 브라우저, IE9 만 최소 지원의 낮은 버전을 지원하지 않으며
, 검색 엔진 최적화에 도움이되지 (SEO 지원하려는 경우, 서버 구성 요소에 의해 렌더링 할 것을 권장합니다)
처음로드 가정은 상대적으로 오래 걸립니다;
당신은 당신의 브라우저의 탐색 버튼 앞뒤로 자신을 구현해야 사용할 수 없습니다.