프런트엔드 인터뷰 질문 요약(이론 2부) --vue

 Vue의 장점은 무엇입니까?

1) 경량 프레임워크: 데이터 구축을 위한 뷰 모음인 뷰 레이어에만 집중합니다.

2) 양방향 데이터 바인딩으로 데이터 조작이 쉬워집니다.

3) 구성 요소화: html 캡슐화 및 재사용 실현

4) 뷰, 데이터 및 구조의 분리: 논리 코드를 수정하지 않고 데이터를 조작하기만 하면 데이터 변경이 더 쉬워집니다.

5) 가상 DOM: DOM 작업은 더 많은 성능을 소비하며 기본 DOM 작업 노드를 사용하지 않습니다.

ps:vue는 SEO에 도움이 되지 않습니다.

Vue에서 시계와 계산의 차이점

1. Computed는 계산된 속성이고 watch는 데이터의 데이터 변경 사항을 모니터링하는 모니터입니다.
2. Computed는 캐싱을 지원합니다. 종속된 속성의 값이 변경되면 계산된 속성이 다시 계산됩니다. 그렇지 않으면 캐시의 속성 값이 사용됩니다. watch는 캐싱을 지원하지 않습니다. 해당 속성이 변경되면 응답 실행됩니다.
3. Computed는 비동기 작업을 지원하지 않으며 비동기 작업이 있는 경우 데이터 변경을 모니터링할 수 없으며 watch는 비동기 작업을 지원합니다.
4. Computed는 처음 로드될 때 수신 대기하고 기본적으로 처음 로드될 때 watch는 수신하지 않습니다.

    구성 요소가 생성될 때 즉시 실행할지 여부 즉시
    : true, 처음 로드될 때 수신 대기(기본값은 false) 모니터링되는 속성이 개체인 경우
    심층 모니터링이 권장되지 않음(매우 소모적인 성능)
    , 그렇지 않은 경우 깊은 객체 하위 속성 변경을 활성화하면 Watch
    가 켜지고 깊은 객체 내부의 모든 하위 속성 변경이 watch
5를 트리거하지 않습니다. 계산된 함수는 반환을 호출해야 합니다.
6. 사용 시나리오:
계산됨: 하나의 속성이 여러 속성의 영향을 받습니다(예: 장바구니 제품 결제).
감시: 하나의 데이터가 검색 데이터와 같이 여러 데이터에 영향을 미칩니다.
데이터 변경, 비동기 작업 수행 또는 고성능 소비 작업에 대한 응답으로 Watch가 최선의 선택입니다.

바인딩된 클래스의 배열 사용

• 개체 메서드 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
• 배열 방식 V-bind: class="[class1, class2]"
• 行内 v-bind:style="{color: color, fontSize: fontSize+'px'}"

개발에서 일반적으로 사용되는 지침은 무엇입니까

v-show v-if v-html v-text v-model v-on v-clock v-bind

수정자는 무엇입니까

이벤트 수정자

• .stop은 이벤트가 계속 전파되는 것을 방지합니다.
• .prevent는 레이블 기본 동작을 방지합니다.
• .capture는 이벤트 캡처 모드를 사용합니다. 즉, 요소 ​​자체에 의해 트리거된 이벤트가 여기에서 먼저 처리된 다음 처리를 위해 내부 요소로 전달됩니다.
• .self는 event.target이 현재 요소 자체인 경우에만 핸들러를 트리거합니다.
• .once 이벤트는 한 번만 실행됩니다.
• .passive는 이벤트의 기본 동작을 막고 싶지 않다고 브라우저에 알립니다.

v-모델용 수정자

• .lazy는 이 수정자를 통해 변경 이벤트에서 재동기화로 변환됩니다.
• .number는 사용자의 입력 값을 숫자 유형으로 자동 변환합니다.
• .trim 사용자가 입력한 선행 및 후행 공백을 자동으로 필터링합니다.

vue 슬롯에는 세 가지 주요 유형이 있습니다.

기본 슬롯, 명명된 슬롯 및 범위
슬롯 vue의 슬롯은 부모 구성 요소에 대한 자식 구성 요소에 제공된 자리 표시자를 참조합니다.
레이블로 표시되는 부모 구성 요소는 이 자리 표시자에 있는 모든 자리 표시자를 채울 수 있습니다. , 등, 채워진 콘텐츠는 하위 구성 요소의 태그를 대체합니다(자리 표시자 대체).

v-모델의 원리

vue 프로젝트에서 v-model 명령은 주로 양식 입력, 텍스트 영역, 선택 및 기타 요소에 대한 양방향 데이터 바인딩을 만드는 데 사용됩니다. v-model은 본질적으로 구문 설탕이며 v-model은 다른 입력을 사용합니다. 요소를 내부적으로.속성하고 다른 이벤트를 발생시킵니다.

text 및 textarea 요소는 값 속성과 입력 이벤트를 사용합니다.

체크박스와 라디오는 체크된 속성과 변경 이벤트를 사용합니다.

선택 필드는 값을 소품으로, 변경을 이벤트로 사용합니다.

입력 양식 요소를 예로 들어 보겠습니다.

<input v-model='something'>

에 해당

<input v-bind:value="something" v-on:input= "something =Sevent.target.value">

사용자 지정 구성 요소에 있는 경우 v-model은 기본적으로 다음과 같이 value라는 prop과 input이라는 이벤트를 사용합니다.

父组件:
<ModelChild v-model="message"></ModelChild>子组件:
<div>{
   
   {value}}</div>props:value:String
},
methods:{test1(){this.$emit('input','小红')},
},

Vue의 라이프 사이클

Vue 인스턴스 생성에서 소멸까지의 과정을 라이프 사이클이라고 합니다. 생성 초기부터 데이터의 초기화, 템플릿의 컴파일, DOM의 마운팅->렌더링->업데이트->렌더링, 언로딩 등의 일련의 과정을 vue의 생명주기라고 합니다.

관련 지식 포인트:

1) vue 생명 주기는 생성 전과 후, 로드 전과 후, 업데이트 전과 후, 파괴 전과 후의 총 8단계로 구성됩니다.

2) 첫 번째 트리거는 여러 후크를 트리거합니다. beforeCreate 생성 beforeMount가 마운트됨

3) 생명주기 DOM 렌더링이 완료된 시점: 마운트됨

4) vue에서 부모-자식 구성 요소 후크의 실행 순서:

아버지 beforeCreate->아버지 create->아버지 beforeMount->아이 beforeCreate->아이 created->아이 beforeMount->아이 mounted->아버지 mounted

업데이트: 아버지 beforeUpdate->아이 beforeUpdate->아이 updated->아버지 updated

파괴: 파괴 전 부모->파괴 전 자식->소멸 전 자식->부모 파괴

vue 라이프 사이클의 역할

전체 vue 인스턴스를 제어하는 ​​과정에서 좋은 논리를 형성하십시오. (수명 주기의 여러 이벤트 후크)

vue 구성 요소 간의 통신

1)vuex

2)이벤트버스

3)소품/방출

4)$부모/$자식

5)$attrs/$리스너

양방향 바인딩 데이터의 원리

Vue의 양방향 데이터 바인딩은 게시자-구독자 모델과 결합된 데이터 하이재킹을 통해 구현됩니다. Object.defineProperty()를 통해 각 속성의 getter/setter를 하이재킹합니다. 수정은 메서드 set 메서드의 할당을 트리거하고, 획득은 get 메서드의 값을 트리거하고, 데이터가 변경되면 구독자에게 메시지를 보내고, 해당 콜백을 트리거하고 데이터 하이재킹을 통해 메시지를 게시합니다.

반응형이란 구성 요소의 데이터가 변경되면 즉시 보기 업데이트를 트리거함을 의미합니다. 그는 데이터 기반 뷰를 향한 첫 걸음입니다.

vue 응답성의 핵심 API는 Object.defineProperty()입니다. Object.defineProperty를 사용하여 get 및 set을 다시 작성하고 개체 속성의 할당 및 획득을 함수로 전환하여 간단한 양방향 바인딩을 구현할 수 있습니다.

단방향 데이터 흐름 및 양방향 데이터 바인딩 설명

단방향 데이터 흐름: 이름에서 알 수 있듯이 데이터 흐름은 단방향입니다. 데이터 흐름의 방향을 추적할 수 있으며 흐름이 단일하므로 문제를 더 빠르게 추적할 수 있습니다. 쓰기가 불편하다는 단점이 있습니다. UI를 변경하려면  action 해당  state.

양방향 데이터 바인딩: 데이터가 연결되어 있고 데이터 변경 작업이 프레임워크 내부에 숨겨져 있습니다. 장점은 양식 상호 작용이 많은 시나리오에서 비즈니스와 관련 없는 많은 코드를 단순화한다는 것입니다. 단점은 로컬 상태의 변화를 추적할 수 없기 때문에 오류 발생 시 디버깅의 어려움이 커진다는 것입니다.

vue 컴포넌트의 데이터가 함수여야 하는 이유 

JS 자체의 특성상 데이터가 객체라면 객체 자체가 레퍼런스 타입이기 때문에 속성 중 하나를 변경하면 vue 인스턴스의 데이터에 영향을 미치게 됩니다. 데이터가 객체를 함수로 반환하면 각 인스턴스의 데이터는 독립적이며 서로 영향을 미치지 않습니다.

실제 DOM과 가상 DOM

 하나의 작업에서 DOM을 업데이트하는 10개의 작업이 있는 경우 기존 소스 API 또는 jQuery를 사용하여 DOM을 작업할 때 브라우저는 DOM 트리를 빌드하기 시작하고 프로세스를 처음부터 끝까지 실행하지만 가상 DOM은 DOM을
 즉시 작동시키지 않고 이 10개 업데이트의 diff 내용을 로컬 js 개체에 저장하고 마지막으로 이 js 개체를 DOM 트리에 한 번에 첨부하고 브라우저에 그리기 작업을 수행하도록 알리고 후속 작업을 수행하여 불필요한 계산을 많이 피하십시오.

Vue에서 키의 역할

vue에서 키 값의 역할은 두 가지 경우로 고려할 수 있습니다.

• 첫 번째 경우는 v-if에서 키를 사용하는 것입니다. Vue는 가능한 한 효율적으로 요소를 렌더링하기 때문에 기존 요소를 처음부터 렌더링하는 것보다 재사용하는 것이 일반적입니다. 따라서 v-if를 사용하여 요소 전환을 구현할 때 전환 전후에 동일한 유형의 요소가 있으면 이 요소를 재사용합니다. 동일한 입력 요소인 경우 전환 전후에 사용자 입력이 지워지지 않아 요구 사항을 충족하지 않습니다. 따라서 키를 사용하여 요소를 고유하게 식별할 수 있으며, 이 경우 키를 사용하는 요소는 재사용되지 않습니다. 이때 키의 기능은 독립적인 요소를 식별하는 것입니다.
• 두 번째 경우는 v-for 키를 사용하는 것입니다. v-for를 사용하여 렌더링된 요소 목록을 업데이트할 때 기본적으로 "내부 재사용" 전략을 사용합니다. 데이터 항목의 순서가 변경되면 Vue는 데이터 항목의 순서와 일치하도록 DOM 요소를 이동하지 않고 여기에서 각 요소를 재사용합니다. 따라서 각 목록 항목에 대한 키 값을 제공함으로써 Vue는 효율적인 재사용을 달성하기 위해 요소의 ID를 추적할 수 있습니다. 이때 키의 기능은 가상 DOM을 효율적으로 업데이트하고 렌더링하는 것입니다.

key는 Vue에서 vnode의 고유한 표시이며, 이 키를 통해 diff 작업을 더 정확하고 빠르게 수행할 수 있습니다.

• 더 정확함: 키를 사용하는 인플레이스 다중화가 아니기 때문에 sameNode 함수 a.key === b.key 비교에서 인플레이스 다중화를 피할 수 있습니다. 그래서 더 정확할 것입니다.
• 더 빠르게: 키의 고유성을 사용하여 맵 객체를 생성하여 해당 노드를 얻습니다. 순회 방법보다 빠릅니다.

v-for가 키를 추가해야 하는 이유

키가 없으면 Vue는 동적 요소를 최소화하는 알고리즘을 사용하고 가능한 한 제자리에서 동일한 유형의 요소를 수정/재사용하려고 시도합니다. key는 Vue에서 vnode의 고유한 표시이며, 이 키를 통해 diff 작업이 더 정확하고 빨라질 수 있습니다.

보다 정확함 : key로 in-place 다중화가 아니기 때문에 sameNode 함수 a.key === b.key 비교에서 in-place 다중화를 피할 수 있습니다. 그래서 더 정확할 것입니다.

Faster : 키의 고유성을 이용하여 맵 객체를 생성하여 해당 노드를 획득하는 방식으로 순회 방식보다 빠름

해시와 역사

1. Vue-router(프론트엔드 라우팅)는 hash mode와 history mode 2가지 모드가 있음
1) Hash는 url 뒤의 # 기호와 그 이하의 문자를 의미함 History는 #이 없어 hash mode
2 보다 좋아 보인다. ).원칙의 차이(원칙)
3).hash는 IE8에 호환 가능하고 history는 IE10에만 호환 가능
; #뒤에 url 조각 변경), URL에는 해쉬 경로가 나와도 에는 나타나지 않음 백엔드에 전혀 영향을 미치지 않으므로 해시 값을 변경해도 페이지가 다시 로드되지 않으며 기본적으로 해시를 사용하여 라우팅된 프런트엔드를 구현합니다.

2. 원칙:
1) .hash는 브라우저의 onhashchange() 이벤트 변경을 수신하여 해당 라우팅 규칙을 찾습니다.

2) 히스토리 원칙: H5의 히스토리에서 두 개의 새로운 API인 pushState() 및 replaceState()를 사용하고 이벤트 onpopstate를 사용하여 URL 변경을 모니터링합니다.

   기록 모드 URL은 백엔드와 일치해야 하므로 기록으로 변경하려면 백엔드의 협력도 필요합니다. 그렇지 않으면 오류가 보고됩니다.
그래서 해쉬모드는 페이지가 새로고침될 때마다 "#"뒤에 있는 것을 직접 변경하는 것입니다. 백엔드가 제시간에 응답하지 않으면 오류 404가 보고됩니다! . 기록의 장점은 기록을 수정할 수 있고 백엔드에 대한 요청을 즉시 시작하지 않는다는 것입니다. 그러나 프로젝트에 대한 엄격한 표준 요구 사항이 없으면 해시 모드를 직접 사용하여 개발할 수 있습니다.

(1) 해시 모드의 구현 원리
프런트 엔드 라우팅의 초기 구현은 location.hash를 기반으로 합니다. 실현 원칙은 매우 간단합니다. location.hash의 값은 URL에서 # 뒤의 내용입니다. 예를 들어 다음 웹사이트의 location.hash 값은 '#search'입니다.
https://www.word.com#search
해시 라우팅 모드의 구현은 주로 다음 특성을 기반으로 합니다.

• URL의 해시 값은 클라이언트의 상태일 뿐입니다. 즉, 서버에 요청이 있을 때 해시 부분이 전송되지 않습니다.
• 해시 값이 변경되면 브라우저의 액세스 기록에 기록이 추가됩니다. 따라서 브라우저의 뒤로 및 앞으로 버튼을 통해 해시 전환을 제어할 수 있습니다.
• a 태그를 전달하고 href 속성을 설정할 수 있습니다.사용자가 이 태그를 클릭하면 URL의 해시 값이 변경되거나 JavaScript를 사용하여 loaction.hash에 값을 할당하여 URL의 해시 값을 변경합니다.
• hashchange 이벤트를 사용하여 해시 값의 변경 사항을 모니터링하여 페이지를 점프(렌더링)할 수 있습니다.

(2) 히스토리 모드 구현 원리 HTML5는 URL 변경을 구현하기 위해 히스토리 API를 제공합니다. 그중에는 history.pushState() 및 history.repalceState()라는 두 가지 주요 API가 있습니다. 이 두 API는 브라우저를 새로 고치지 않고 브라우저의 기록을 조작할 수 있습니다. **유일한 차이점은 전자는 새로운 기록을 추가하는 것이고 후자는 아래와 같이 현재 기록을 직접 교체하는 것입니다. ** window.history.pushState(null, null, path); history.replaceState(널, 널, 경로);

• 기록 라우팅 모드의 구현은 주로 다음 특성을 기반으로 합니다.
• PushState 및 repalceState는 URL 변경을 운영하고 구현하는 두 가지 API입니다.
• 페이지를 점프(렌더링)하기 위해 popstate 이벤트를 사용하여 URL 변경을 모니터링할 수 있습니다.
• history.pushState() 또는 history.replaceState()는 popstate 이벤트를 트리거하지 않으므로 수동으로 페이지 점프(렌더링)를 트리거해야 합니다.

Vue 초기화 페이지 깜박임 문제

vue를 사용하여 개발할 때 vue가 초기화되기 전에 div가 vue의 제어하에 있지 않기 때문에 우리가 작성하는 코드는 파싱하기 전에 흐릿한 현상이 발생하기 쉽고 {{message}}와 유사한 단어가 표시됩니다 . 이 시간은 매우 짧지만 여전히 이 문제를 해결해야 합니다.

먼저: css에 다음 코드를 추가합니다: v-cloak] { display: none;}

문제가 완전히 해결되지 않으면 루트 요소에 추가하십시오.style="display: none;" :style="{display: 'block'}

Vue는 객체 속성을 어떻게 동적으로 증가시키나요?

1.this.$set(this.obj,키,값)

2.this.obj=Object.assign({},this.obj,{a:1,b:2});

라우팅 가드의 수명 주기

1. 글로벌 라우팅 가드의 수명 주기:

（1） router.beforeEach((to,from,next)=>{ })

적용 시간: 내비게이션이 트리거될 때

（2） router.beforeResolve((to,from,next)=>{ })

효과적인 타이밍: 내비게이션이 확인되기 전, 모든 구성 요소의 가드 및 비동기 라우팅 구성 요소가 해결된 후

(3)router.afterEach((to,from)=>{ })

2. 로컬 라우팅 가드의 수명 주기:

（1）beforRouteEnter(to,from,next){ }

참고: 렌더링된 구성 요소에 해당하는 경로가 인터페이스에 로드되기 전에 호출됩니다. 가드가 실행되기 전에 구성 요소 인스턴스가 생성되지 않았기 때문에 'this'를 사용하여 구성 요소 인스턴스를 가져올 수 없습니다.

（2）beforeRouteUpdate(to,from,next){ }

참고: 현재 경로가 변경될 때 호출되며 'this'를 사용하여 구성 요소 인스턴스에 액세스할 수 있습니다.

（3）beforeRouterLeave(to,from,next){ }

참고: 구성 요소에 해당하는 경로에서 멀리 이동할 때 호출되며 'this'를 사용하여 구성 요소 인스턴스에 액세스할 수 있습니다.

경로와 라우터의 차이점

route는 라우팅 정보를 얻기 위해 사용되며, router는 라우팅을 수행하기 위해 사용됩니다.

뷰 라우터

vue-router는 Vue.js의 공식 라우팅 관리자로, Vue.js의 핵심과 긴밀하게 통합되어 있어 단일 페이지 애플리케이션을 쉽게 구축할 수 있습니다. 포함된 기능은 다음과 같습니다.

• 중첩 경로
• 모듈식 구성 요소 기반 라우팅 구성
• 경로 매개변수, 쿼리, 와일드카드
• Vue.js 전환 시스템을 기반으로 전환 효과 보기
• 세분화된 내비게이션 제어
• 자동 활성화된 CSS 클래스와 링크
• 히스토리 모드 또는 해시 모드, IE9에서 자동으로 다운그레이드됨
• 사용자 정의 스크롤바 동작

vue-router 컴포넌트:

• < router-link to=""> 경로 경로
• < router-link :to="{name:''lrouting name'}"> 명명된 경로
• < router-view> 경로 표시

vue-router에는 어떤 종류의 탐색 후크가 있습니까?

1. 전역 탐색 후크

    1) 프론트 후크:

router.beforeEach((to, from, next) => {  })

    2) 후면 후크

router.afterEach((to,from) => {  })

2. 별도의 라우팅 전용 후크

{
    path: '/home',
    name: 'home',
    component: Home,
    beforeEnter(to, from, next) {
        if (window.localStorage.getItem("id")) {
            next()
        } else {
            next({ name: "login" })
        }
    }
}

3. 컴포넌트 내부의 후크

beforeRouteEnter(to, from, next) {
    // do someting
    // 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
    // do someting
    // 在当前路由改变，但是依然渲染该组件是调用
},
beforeRouteLeave(to, from ,next) {
    // do someting
    // 导航离开该组件的对应路由时被调用
}

글로벌 파싱 가드

router.beforeResolve는 router.beforeEach와 유사한 글로벌 가드를 등록합니다.

Vite 포장의 장점

1) 빠른 콜드 스타트

2) 패키지 컴파일 속도

3) 핫 모듈 업데이트

VUEX에 대해 이야기하기

• state : vuex의 기본 데이터인 state를 넣는 곳으로 변수를 저장하는데 사용
• Mutation: 업데이트된 데이터를 제출하는 방식, 동기식
• getter: 기본 데이터 상태에서 파생된 데이터로 상태의 계산된 속성과 동일합니다.
• action: 이 기능은 Mutation과 거의 동일하지만 action은 상태를 직접 변경하는 대신 mutation을 제출한다는 차이점이 있습니다. 작업에는 모든 비동기 작업이 포함될 수 있습니다.
• 모듈: 모듈식 VUEX, 각 모듈은 자체 상태 변경 액션 게터를 가질 수 있습니다.

Vue2와 Vue3의 차이점

1. 응답 시스템의 리팩토링, 프록시를 사용하여 Object.defineProperty 속성 대체, 장점:

    - 프록시는 개체의 `추가/삭제` 속성을 직접 모니터링할 수 있습니다.

    - 프록시는 어레이의 변경 사항을 직접 모니터링합니다.

    - Proxy 모니터링의 대상은 객체 자체이며, Object.defineProperty와 같이 성능이 어느 정도 개선된 각 속성을 순회할 필요가 없습니다.

2. `Composition API`(Composition API) 추가, 더 나은 로직 재사용 및 코드 구성:

    - 설정 구성

    - 참조 및 반응

    - watch与watchEffect

    -제공 및 주입

3. 가상 DOM 재구성, diff 알고리즘

4. 라이프 사이클 이름 변경

    - beforeDestroy가 beforeUnmount로 이름이 변경되었습니다.

    -destroy는 unmounted로 이름이 변경되었습니다.

// Vue3.0은 또한 다음과 같이 Vue2.x의 후크에 해당하는 Composition API 형태의 수명 주기 후크를 제공합니다.

vue3:onBeforeMounted=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount

beforeCreate ===> 설정()

생성 ===> 설정()

beforeMount ===> onBeforeMount

마운트 ===> 마운트됨

업데이트 전 ===> 업데이트 전

업데이트됨 ===> 업데이트됨

beforeUnmount===> onBeforeUnmount

마운트 해제됨 ===> 마운트 해제됨

4. 새로운 내장 구성 요소:

    - 파편

    - 텔레포트

    - 서스펜스

5. 제거된 부품:

    - v-on.keyCode 수정자를 제거했으며 더 이상 config.keyCodes를 지원하지 않습니다.

    - v-on.native 수정자를 제거하고,

    - 필터 제거

    - 더 이상 믹스인을 사용하지 않는 '더 이상 사용되지 않음'이며 구성 기능 자체가 더 나은 믹스인 대체품입니다.

6. 데이터 및 방법의 정의

vue2 : 데이터() { 반환 {}; }, 방법:{ }

vue3 : 설정에서 데이터와 메소드를 정의하고 통합

반품{}

시계와 시계 효과

계산된 속성과 이벤트 메서드의 차이점은 무엇입니까

또는 계산된 속성 과 동일한 기능을 정의할 수 있습니다  method . 최종 결과는 두 가지 방법이 동일합니다.

차이점:

• computed: 계산된 속성은 종속성을 기반으로 캐시되며 관련 종속성이 변경될 때만 재평가됩니다.

• methodmethod : 호출은 다시 렌더링이 발생할 때마다  항상 이 함수를 실행합니다.

다중 페이지 데이터 모듈 디커플링 관리(vuex)

Vue의 핵심은 무엇입니까

데이터 중심의 구성 요소 시스템.

Vue에서 $nextTick()의 기능과 원리

Vue는 Dom을 업데이트할 때 비동기적으로 실행되며, 데이터를 수정한 후 뷰가 즉시 업데이트되지는 않지만 루프의 모든 변경이 동시에 완료되면 뷰가 균일하게 업데이트됩니다. 따라서 데이터를 수정한 후 메서드에서 즉시 DOM을 가져오고 우리가 얻는 것은 여전히 ​​수정되지 않은 DOM입니다.

$nextTick은 다음 DOM 업데이트 주기가 끝난 후 지연된 콜백입니다. DOM 업데이트 후 자동 실행

내부 기능.

$nextTick의 기능: 이 메서드의 코드는 렌더링이 완료된 후 실행되어 비동기 렌더링으로 최신 DOM을 얻을 수 없는 문제를 해결합니다.

응용 시나리오: 후크 함수 created()에서 DOM을 획득하고 조작하려면 $nextTick에 DOM 조작 방법을 넣습니다.

MVC 설명

MVC의 정식 명칭은 Model View Controller로 Model(모델)-View(View)-Controller(컨트롤러)의 약자로 비즈니스 로직을 하나의 컴포넌트로 모아 인터페이스와 사용자 인터랙션을 개선 및 커스터마이징하여 비즈니스 로직을 다시 작성할 필요가 없습니다. MVC는 논리적 GUI 구조에서 전통적인 입력, 처리 및 출력 기능을 매핑하도록 고유하게 개발되었습니다.

거의 모든 앱은 사용자에게 데이터를 표시하고 인터페이스에서 사용자 작업을 처리하는 한 가지 작업만 수행합니다.
MVC의 아이디어: 한 문장 설명은 Controller가 View로 Model의 데이터를 표시하는 역할을 담당한다는 것입니다. 즉, Controller에서 Model의 데이터를 View에 할당하는 것입니다.

MVVM

MVVM：모델、뷰、뷰모델。

무의식적으로 MVC와 비교하면 MVVM에 ViewModel이 하나 더 있고 Controller가 적다는 것을 알 수 있습니다.

먼저 추가 ViewModel(비디오 메모리가 아닌 VM)에 대해 이야기해 보겠습니다.
모델과 마찬가지로 VM의 의미도 데이터에 있습니다.
모델은 데이터를 가져오고 저장하는 역할을 하지만 데이터를 가져오고 저장하는 것 외에도 매우 중요한 작업인 구문 분석이 있습니다.
 

MVVM 패턴

MVVM의 핵심 아이디어는 모델의 변경에 주의를 기울이고 MVVM 프레임워크가 자체 메커니즘을 사용하여 DOM을 자동으로 업데이트하도록 하는 것입니다. 이는 소위 데이터 뷰 분리이며 데이터는 영향을 미치지 않습니다. 보기. (view{page}-model{data}-modelview{브릿지 뷰와 데이터 간 변환 처리})

1) MVVM은 데이터와 페이지의 양방향 바인딩을 실현합니다.

2) MVVM은 페이지 비즈니스 로직과 렌더링 간의 분리, 데이터와 뷰 분리를 실현하고 구성 요소에서 개발할 수 있습니다.

3) VUE는 MVVM의 아이디어를 어떻게 구현합니까: Mustache 구문은 데이터와 뷰의 바인딩을 실현합니다.

MVC 설명

 MVC의 정식 명칭은 Model View Controller로 Model(모델)-View(View)-Controller(컨트롤러)의 약자로 비즈니스 로직을 하나의 컴포넌트로 모아 인터페이스와 사용자 인터랙션을 개선 및 커스터마이징하여 비즈니스 로직을 다시 작성할 필요가 없습니다. MVC는 논리적 GUI 구조에서 전통적인 입력, 처리 및 출력 기능을 매핑하도록 고유하게 개발되었습니다.

거의 모든 앱은 사용자에게 데이터를 표시하고 인터페이스에서 사용자 작업을 처리하는 한 가지 작업만 수행합니다.
MVC의 아이디어: 한 문장 설명은 Controller가 View로 Model의 데이터를 표시하는 역할을 담당한다는 것입니다. 즉, Controller에서 Model의 데이터를 View에 할당하는 것입니다.

MVVM

MVVM이란
MVVM: Model, View, ViewModel입니다.

무의식적으로 MVC와 비교하면 MVVM에 ViewModel이 하나 더 있고 Controller가 적다는 것을 알 수 있습니다.

먼저 추가 ViewModel(비디오 메모리가 아닌 VM)에 대해 이야기해 보겠습니다.
모델과 마찬가지로 VM의 의미도 데이터에 있습니다.
모델은 데이터를 가져오고 저장하는 역할을 하지만 데이터를 가져오고 저장하는 것 외에도 매우 중요한 작업인 구문 분석이 있습니다.