뷰의 장점
경량 프레임워크: 수십 kb 크기의 데이터 구축을 위한 뷰 모음인 뷰 레이어에만 집중합니다.
배우기 쉬움 : 중국어 개발, 중국어 문서, 언어 장벽 없음, 이해 및 배우기 쉬움;
양방향 데이터 바인딩: 각도의 특성을 유지하고 데이터 조작이 더 간단합니다.
구성 요소화 : 반응의 장점을 유지하고 html의 캡슐화 및 재사용을 실현하며 단일 페이지 응용 프로그램을 구축하는 데 고유한 이점이 있습니다.
보기, 데이터 및 구조의 분리 : 논리 코드를 수정하지 않고 데이터 변경을 쉽게 만들고 관련 작업을 완료하기 위해 데이터를 작동하기만 하면 됩니다.
가상 DOM : DOM 작업은 매우 성능 집약적이며 더 이상 기본 DOM 작업 노드를 사용하지 않아 DOM 작업을 크게 해방하지만 특정 작업은 여전히 DOM이지만 다른 방법입니다.
더 빠른 실행 속도: react와 비교하여 virtual dom도 운영하며 성능면에서 vue가 큰 장점이 있습니다.
vue 수명 주기에 대한 이해를 자세히 설명해 주시겠습니까?
생성 전/후, 로딩 전/후, 업데이트 전/후, 파기 전/후로 총 8단계로 나뉩니다.
생성 전/후: beforeCreate 단계에서 마운트 요소 el과 vue 인스턴스의 데이터 객체 데이터가 모두 정의되지 않고 초기화되지 않았습니다. 생성된 단계에서 vue 인스턴스의 데이터 객체 데이터를 사용할 수 있으며 el은 정의되지 않았으며 아직 초기화되지 않았습니다 .
로드 전/후: beforeMount 단계에서 vue 인스턴스의 $el 및 data는 초기화되지만 mount 전에는 여전히 가상 DOM 노드이며 data.message는 교체되지 않았습니다. 마운트된 단계에서 vue 인스턴스가 마운트되고 data.message가 성공적으로 렌더링됩니다.
업데이트 전/후: 데이터가 변경되면 beforeUpdate 및 업데이트된 메서드가 트리거됩니다.
파괴 전/후: 파괴 방법이 실행된 후, 데이터에 대한 변경은 주기적 함수를 트리거하지 않습니다. 이는 vue 인스턴스가 현재 이벤트 모니터링 및 dom과의 바인딩을 해제했지만 dom 구조가 여전히 존재함을 나타냅니다.
vue에서 v-if와 v-show의 차이점은 무엇입니까?
v-if와 v-show는 비슷해 보이지만 조건이 참이 아닌 경우 해당 레이블 요소가 표시되지 않지만 다음 두 옵션 사이에는 차이점이 있습니다.
1. 조건이 전환되면 v-if는 적절하게 레이블을 생성하고 소멸시키는 반면 v-show는 초기화 중에 한 번만 로드되므로 v-if의 오버헤드가 v-show보다 상대적으로 커집니다.
2. v-if는 게으른 경우 조건이 참일 때만 레이블이 렌더링됩니다. 초기 조건이 참이 아니면 v-if는 레이블을 렌더링하지 않습니다. v-show는 초기 조건이 참인지 여부에 관계없이 레이블을 렌더링하며 간단한 CSS 전환만 수행합니다.
계산과 시계의 차이점
계산된 속성 계산됨:
- 캐싱 지원, 종속 데이터가 변경될 때만 계산이 다시 계산됩니다.
- 비동기를 지원하지 않습니다 . 계산된 비동기 작업이 있는 경우 유효하지 않으며 데이터 변경을 모니터링할 수 없습니다.
- 계산된 속성 값은 기본적으로 캐시됩니다 . 계산된 속성은 응답 종속성, 즉 data 에 선언된 데이터 또는 props 에서 부모 구성 요소가 전달한 데이터를 기반으로 계산된 값을 기반으로 캐시됩니다.
- 속성이 다른 속성에 의해 계산되는 경우 이 속성은 다른 속성에 의존하며 다대일 또는 일대일이며 일반적으로 계산됩니다.
- 계산된 속성 값이 함수인 경우 기본적 으로 get 메서드가 사용되며 함수의 반환 값은 속성의 속성 값입니다. computed에서는 속성에 get 및 set 메서드가 있으며 데이터가 변경되면 set 메소드가 호출됩니다.
청취 재산 감시:
- 캐싱은 지원되지 않으며 데이터 변경은 해당 작업을 직접 트리거합니다 .
- 시계는 비동기식을 지원합니다.
- 모니터링되는 기능은 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 최신 값이고 두 번째 매개변수는 입력 전 값입니다.
- 속성이 변경되면 해당 작업을 수행해야 합니다.
- 모니터링 데이터는 데이터 에 선언된 데이터이거나 상위 구성 요소가 전달한 소품 의 데이터 여야 합니다 . 데이터가 변경되면 다른 작업이 트리거됩니다. 함수에는 두 개의 매개 변수가 있습니다.
즉시: 구성 요소를 로드하면 콜백 함수 실행이 즉시 트리거됩니다.
watch: { firstName: { handler(newName, oldName) { this.fullName = newName + ' ' + this.lastName; }, //代表在wacth里声明了firstName这个方法之后立即执行handler方法immediate: true }}코드 복사
deep: deep은 심층 관찰을 의미합니다. 리스너는 레이어별로 탐색하고 이 리스너를 개체의 모든 속성에 추가하지만 이는 매우 높은 성능 오버헤드를 유발하며 obj의 모든 속성을 수정하면 트리거가 발생합니다. 이 리스너의 핸들러
watch: {obj: {handler(newName, oldName)
{console.log('obj.a changed'); }, immediate: true, deep: true }}코드 복사최적화: 스트링 형태로 모니터링 가능
watch: { 'obj.a': { handler(newName, oldName)
{console.log('obj.a changed'); },immediate: true, // deep: true }}코드 복사이런 식으로 Vue.js는 속성 a를 만날 때까지 레이어별로 구문 분석한 다음 a에 대한 수신 기능을 설정합니다.