질문에 직면 --Vue 2019 프런트 엔드 인터뷰 시리즈

뷰 양방향 바인딩 원칙

게시자 하이재킹 데이터의 사용과 결합 방법으로 결합 MVVM - Object.defineProperty하여 각 특성을 가로 채기하는 방법 모드 가입자 () 세터는 게터는, 가입자들에게 메시지를 기록 할 때의 데이터 변경, 해당 리스너 콜백 트리거링.

점수
최신 값을 얻기 위해 변경 될 수 있고, 데이터 객체의 모든 속성을 수신 할 수있는, 데이터 수신기에게 옵저버를 달성하기 위해, (1) 및 상기 가입자에 통지
(2), 컴파일이 파서 명령어를 구현 각 요소 노드 스캐닝 및 명령을 해석, 대체 데이터 업데이트 기능과 결합 대응하는 명령 서식에 따른
가입 할 수있는 각각의 속성 변경 통지, 컴파일 및 옵저버를 연결하는 다리와 같은 와쳐를 달성하기 위해 3, 실행 명령 바인딩 뷰 갱신하는 콜백 함수에 대응하는
세 개 이상의 통합 4 MVVM 엔트리 함수

특정 단계 :

우리는 객체 속성의 하위 속성을 포함하여, 데이터가 반복적으로 트래버스 개체를 관찰 할 필요가 플러스 모든 세터와 게터
는 데이터 변경을들을 수 있도록,이, 세터을 유발되므로,이 객체에 값을 할당
명령 구문 분석 템플릿을 컴파일, 템플릿 데이터로 변수를 대체합니다, 다음 페이지 뷰를 렌더링 초기화하고 바인딩 업데이트 기능을 해당 각 명령의 노드가 데이터가 변경 될 수 있습니다 일단 가입자가 데이터를 모니터링 추가, 알림, 업데이트를받을 전망
가입자 감시자는 관찰자와 컴파일 사이의 의사 소통의 다리, 할 수있는 중요한 것은입니다 :
- 자신을 인스턴스화 할 때 내 자신을 추가하는 가입자 (DEP)를 속성
- 자체 업데이트를해야합니다 () 메소드
- 속성이 dep.notice () 통지를 변경하기 위해, 당신은 임무 수행 후, 바인딩 컴파일 갱신 () 메소드 자체를 호출하고 트리거 콜백 할 수 있습니다.
옵저버를 통해 자신의 데이터 모델 변경을 모니터링 할 수있는 항목, 통합 관찰자, 컴파일 및 세 감시자로 바인딩 MVVM 데이터, 결국 감시자 사이의 통신 브릿지가 관찰자와 컴파일을 세워 사용하여 컴파일하여 컴파일러 명령 템플릿을 해결하기 위해, 도달 데이터 변경 ->보기 업데이트 쌍방향 변경 (입력)를 조회 -> 양방향 구속력 데이터 모델을 변경.

설명 초기 페이지에서 VUE - 데이터 수정 - 페이지의 UI를 새로 고침?

뷰는 초기화 단계로 들어가면, 한 손 뷰는 속성 데이터를 이송하며,합니다 (Vue3.0 프록시에 자세히 설명되지 않은) 데이터의 도용을 달성 폼 Object.defineProperty 게터 / 세터로 변환하기 위해, 다른 한편, 뷰에 요소 노드를 분석하는 각 명령에 대한 컴파일러 지침보기를 초기화 및 업데이트에 감시자 시도를 구독 가입자를 소유 할이 시간 감시자 출발지는 초기화가 완료되는 경우에는 메시지에 추가됩니다.
데이터 변경, 관찰자는 setter 메소드를 실행하면, 즉시 내부 뷰은 diff 알고리즘에 의해 모든 가입자의 배열을 통과 Dep.notify (), 출발지를 호출하고 update 메소드를 호출하고, 적절한 업데이트 패치는 가입을 완료합니다 누가보기를 변경했습니다.

뷰 수명주기

자세한 VUE 수명주기

beforeCreate과created
beforeMount과mounted
beforeUpdate과updated
beforeDestory과destoryed
activated과deactivated

뷰 통신 구성 요소 사이

구성 요소 간 통신 뷰 여섯 가지 방법

소품 / $ 방출
$ $에 / 방출
vuex
$ attrs에 / $ 청취자
제공 / 주입
$ 부모 / $ 아이들 与 심판

차이 시계, 속성을 계산하는 방법 및

데이터의 변화에 따라 모니터를보고합니다. 재산권 자동으로 계산 리스너 따라 값이 동적으로 변화 복귀 메인 오브젝트가 템플릿의 복잡한 계산을 간단하게하는 것이다. 차이가 사용에서 오는 그래서, 단지 동적 값은 다음 계산 속성을 사용하여 필요하며 변경 사항은 시계로, 비즈니스 로직의 구현의 가치를 알 필요가있다.
방법은 파라미터들을 받아 들일 수있는 방법이며, 계산 방법이 아니라 캐시 될 수 계산 될 수 없다. 또한 다른 계산, 또는 다른 데이터 요소에 독립적으로 계산 될 수있다.

어떻게 데이터 재설정 VUE

Object.assign ()을 사용하여, VM. $ 데이터는 데이터의 현재의 상태에서 얻을 수있다, VM. $ Options.data 데이터는 초기화 상태 구성 요소에서 획득 될 수있다.

Object.assign(this.$data, this.$options.data())

구성 요소 작성 이름 옵션 역할은 무엇인가?

연결 유지를 사용하여 프로젝트는 구성 요소 이름 캐시 필터를 사용할 수있는 경우
재귀 적 구성 요소를 수행 할 때 DOM은 자신의 이름을 호출 할 필요가
그룹의 디버깅 툴 VUE-DevTools로는 표시 이름 VUE 조립 이름으로 결정 참조

VUE 라우터되는 후크 함수

공식 문서 : VUE 훅 기능 라우터

글로벌 전면 가드 router.beforeEach
글로벌 분석 가드 router.beforeResolve
글로벌 후면 후크 router.afterEach
전용 가드 라우팅 beforeEnter
어셈블리 가드 beforeRouteEnter, beforeRouteUpdate,beforeRouteLeave

소개 및 프런트 엔드 라우팅 VUE 라우터 구현 원리

`route`그리고 `router`차이점은 무엇입니까?

route그것은 포함하여 "라우팅 정보 오브젝트"입니다 path, params, hash, query, fullPath, matched, name등의 라우팅 정보 매개 변수입니다.
router"라우팅 인스턴스 오브젝트"는, 라우팅 도약 (있어서 push, replace) 등의 후크 기능.

뷰 반응과 이해에 대해 이야기하고 간단한 비교를

1. 원칙적으로 다른 모니터 데이터 변경

게터 / 세터 하이재킹을 통해 뷰 및 일부 기능은 신속하게 가상 DOM의 정확한 차이를 계산할 수 있습니다. 이는 렌더링 과정에 있기 때문에, 각 구성 요소에 대한 의존성을 추적, 구성 요소는 전체 트리를 다시 렌더링 할 필요가 없습니다.
반응 기본이 응용 프로그램 상태가 변경 될 때마다, 최적화되지 않은 경우, 비교의 방법에 의해 인용되는 모든 하위 구성 요소가 다시 렌더링 할 것이라고 VDOM의 불필요한 재 렌더링의 많은으로 이어질 수 있습니다.

특별한 최적화 뷰는 좋은 성능을 달성 할 수 없을 것이며, 반작용을 위해, 그것은 PureComponent / shouldComponentUpdate하여 라이프 사이클 접근 방식을 제어 할 필요가있다. 응용 프로그램, 복잡한 상호 작용, UI 변경을 많이 처리하는 경우, 가상 DOM 좋은 생각 사용합니다. 자주 요소를 업데이트하지 않는 경우, 가상 DOM은 성능이 직접 DOM을 조작하지 가능성이 반드시 적용되지 않습니다.

왜 부정확 한 모니터 데이터 변경 반응? 불변의 데이터에 대한 강조 반응 동안 뷰의 차이와, 변수 데이터를 사용하여 디자인 뷰 반응하기 때문이다.

2. 상이한 데이터 스트림
cmd를-인하 로고

뷰 기본 지원 구성 요소와 DOM 사이의 바인딩 V 모델 양방향으로 바인딩 양방향. 그러나, 친자 조립체 사이의 데이터 흐름 소품 단방향 버전 2.x는
주장 된 반응하는 단방향 데이터 흐름, 그는의 onChange / setState를 () 모드라고.

그러나, 국가 규제 체계는 우리가 일반적으로 우리가이 차이를 느끼는 등, 많은 시간을 Vuex하고 돌아 오는 방식으로 데이터 흐름을 사용하기 때문이다.

다른 템플릿 3. 렌더링

표면에서 다른 템플릿 구문

반응 템플릿은 JSX에 의해 렌더링
뷰는 HTML 문법의 확장에 의해 렌더링

템플릿의 깊이, 다른 원칙, 이것은 그들 사이의 근본적인 차이는 :

어셈블리 코드 JS 반응 네이티브 JS는 보간 조건, JS 구문에 의해 달성되는 루프로를 통해 공통 템플릿 문법을 달성
뷰는 지시와 같은 V-경우 필요성이 구현 될 조건문에 의해 구현되는 별도의 구성 요소와 JS 템플릿 코드를 분리한다

对这一点，我个人比较喜欢 React 的做法，因为他更加纯粹更加原生，而 Vue 的做法显得有些独特，会把 HTML 弄得很乱。举个例子，说明 React 的好处：react 中 render 函数是支持闭包特性的，所以我们 import 的组件在 render 中可以直接调用。但是在 Vue 中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们 import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

Vue 的 nextTick 的原理是什么？

1. 为什么需要 nextTick
Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

2. 理解原理前的准备
首先需要知道事件循环中宏任务和微任务这两个概念(这其实也是面试常考点)。请阅大佬文章--彻底搞懂浏览器 Event-loop
常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering
常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;

3. nextTick을 이해
하고 nextTick 원리는 VUE의 DOM 업데이트 및 nextTick 콜백 함수가 비동기 대기열 제어를 실행 한 방법입니다. 소스 코드의이 부분을 읽으면 호환성 문제 우아한 저하가 여기에 있기 때문에 당신은 많이 isNative () 판단을 할 찾을 수 있습니다. 뷰 볼 개발팀의 생각, 관리 및 성능의 의도.
당신이 경우 이전 사이클 원리의 사건의 더 나은 이해, 그것은 당신이이 기사를 읽어 보시기 바랍니다, 문서 갱스터을 읽어 보시기 바랍니다 - 원칙 Vue.nextTick의 실현의 포괄적 인 분석을

몇 가지 속성을 가지고 Vuex,

다섯 종류가 있습니다 State, Getter, Mutation, Action,Module

VUE는-CLI 우리를 위해 무슨 짓을했다?

우선 당신은 무엇 VUE-CLI 알고해야합니까? 그것은 Vue.js에 전체 시스템 급속한 발전을 기반으로하지만 또한 많은 NPM 패키지의 모음으로 이해 될 수있다. 둘째, VUE-CLI 완성 기능은 무엇?

.vue 파일 ->의 .js이 파일
ES6 문법 -> ES5 문법
말대꾸, 적은, 스타일러스 -> CSS
정적 자원 JPG, PNG, 글꼴 처리 및 기타
뜨거운 갱신
환경 변수의 정의 dev에 생산 모드 사이를 구별하는
...

개발자는 추가하거나 기본 설정을 수정해야하는 경우, 동일한 수준의 package.json에서 새 파일 vue.config.js을 작성해야

마지막으로, 선물 보내 당신을 위해 VUE (248) 지식 포인트 (면접 질문) 에스코트