Vue에 관한 기사들(5)

내 블로그 링크, 스타를 환영합니다.
3편에서 우리는 render, template, el의 렌더링 DOM 트리의 우선순위를 시작하여 최종적으로 render 함수로 컴파일한 다음에 vnode(가상 DOM)를 얻고 diff 알고리즘을 거쳐 실제 DOM을 얻었다.
그럼 문제 왔어요?진실 DOM을 얻으면 이제 뭘 해야 되지?그리고 어떻게 해요?
한 편의 문장을 관례대로 나누다.(홈페이지, 당분간 상술한 몇 가지 문제를 비교적 잘 해결할 수 있는 글을 찾지 못했습니다. so, 우리는 문제를 가지고 출발하여 홈페이지에 직접 올라간 다음에 원본 코드를 올립니다.)
첫 번째 문제를 해결하고 실제 DOM을 얻은 다음에 무엇을 해야 합니까?
여러분은 원생의 창설 원소 노드 대상에 대해 낯설지 않을 거라고 믿습니다.const odiv = document.createElement('div') 이때 원소 노드를 새로 만들었지만 그 어떤 DOM 노드 트리의 구성 부분도 아니다. 자바스크립트 세계를 떠돌아다니는 고아일 뿐이다.이 경우 문서 조각(document fragment)이라고 하지만 DOM 속성이 이미 있습니다.다음에 우리는 새로 만든 원소 노드를 DOM 노드 트리에 삽입해야 한다parent.appendChild(odiv).
따라서 상술한 parent.appendChild(odiv)처럼 DOM 노드 트리에 삽입해야 하지 않겠는가?
홈페이지에 중요한 정보가 하나 있습니다.
beforeMount hook
네, Vue에서도 DOM 노드 트리에 삽입하고 마운트해야 합니다.
따라서 첫 번째 문제가 해결되고 실제 DOM 다음에 DOM 노드 트리에 마운트됩니다.
이제 두 번째 문제를 해결하려면 DOM 노드 트리에 어떻게 마운트해야 합니까?
두 가지 방법이 있습니다. (보통main.js 파일에서 볼 수 있습니다.)

첫 번째는el 옵션이 없습니다.
el 옵션이 존재하지 않습니다. vm.$을 사용해야 합니다.mount (), 마운트되지 않은 실례를 수동으로 마운트합니다

두 번째는el 옵션이 존재합니다.
el 옵션이 있는 경우

여기에는 두 가지 주의할 점이 있다.

세심한 학생은 상기 두 가지 방법은el옵션의 차이만 존재하는 것이 아니라 첫 번째 방법에서render: h => h(App)를 사용했고 두 번째는...App를 사용했을 것이다.

첫 번째 쓰기 방법render: h => h(App)에 관해서h은 실제적으로createElement의 별명이자 통용되는 관례이다.=>이것은 es6의 화살표 함수 쓰기이기 때문에 다른 쓰기로 바꾸면 (this와 관련이 없음):

    render: function (createElement) {
        return createElement(App)
    }

앱 구성 요소도 최종적으로render 함수로 컴파일되어 vnode가 있다.홈페이지의 그림을 한 장 붙이다.
createElement 매개 변수
또는 jsx를 사용할 때 이렇게 하면 더욱 쉽다.
jsx 구문

두 번째 문법...App은 이것도 사실 이해하기 쉽다. ...는es6 확장 연산자이기 때문에 확장 연산자에 대해 깊이 있게 공부하지 않고 구체적인 학습을 하면 완 선생님이 쓴 교과서를 참조할 수 있다.여기...App의 뜻은 App 실례 대상의 모든 열거 가능한 속성을 꺼내 전역 설정에 섞는 것이다.

여기에 render도 없고 template도 없는데 DOM 요소를 마운트한 HTML을 템플릿으로 사용한다면 독립적으로 구축된 Vue 라이브러리를 사용해야 한다는 의문이 있을지도 모른다.어떻게 번역했습니까?서두르지 말고 App 인스턴스 객체에서 열거할 수 있는 속성을 살펴보겠습니다.
App 객체의 열거 가능한 속성을 포함하는 새 객체 인쇄
결과를 얻다
그중 하나render 방법이 있어서 render가 new Vue({})의 설정에 섞였다.

또 다른 주의할 점은

즉 el 가 실례화될 때 효과가 없고 호출vm.$mount()이 수동으로 컴파일을 시작하지 않았을 때 render 함수로 컴파일되지 않아 존재하지 않는다vnode.render 함수로 컴파일하여 실제 DOM이 있으면 통과el 옵션을 삽입하거나 호출vm.$mount()을 표시하여 수동으로 마운트점을 설정하여 DOM에 마운트합니다.
두 번째 문제 해결.
다음 편에서 우리는 원본을 깊이 파고들어 이것el과 vm.$mount()이 무슨 일을 하고 있는지 봅시다.
끝나다