Vue 인스턴스의 수명 주기 이해

Vue 인스턴스의 수명 주기 이해

Vue.js의 공식 매뉴얼을 살펴보고 Vue 인스턴스의 라이프 사이클의 다양한 단계와 단계에 대한 이 다이어그램을 발견했습니다.Vue의 기본 기능은 이해하지만 다이어그램에 언급된 여러 단계의 의미를 이해할 수 없습니다.예를 들어 "템플릿을 렌더 함수로 컴파일" 또는 "Virtual DOM 렌더 및 패치"가 있습니다.나는 그들이 무엇을 의미하는지 모르겠다.

문서에는 지금 당장 모든 것을 완전히 이해할 필요는 없다고 되어 있습니다만, Vue(또는 프런트 엔드) 전문가가 이러한 단계를 간단한 언어로 간략하게 설명해 주셨으면 합니다.

조금 부담스러울 수도 있어요.그것들은 다음과 같습니다.

렌더링 함수

Vue가 Vue 인스턴스를 컴파일할 때render functionHTML을 순수하게 자바스크립트로 표현한 것입니다.이것들은 다음과 같습니다.

new Vue({
  template: `<div>{{msg}}</div>`,
  data:{
    msg: 'Hello Vue
  }
}).$mount('#app')

실제로 다음과 같이 변하게 됩니다.

new Vue({
  render: function(createElement) {
    return createElement('div', this.msg)
  },
  data: {
    msg: 'Hello Vue'
  }
}).$mount('#app')

여기 JSFiddle이 있습니다.https://jsfiddle.net/bvvbmpLo/

이 작업은 Vue가 대신 수행하므로 대부분의 경우 렌더링 기능을 작성하지 않아도 됩니다.단, Vue는 순수 JavaScript로 템플릿을 표현하기 위해 몇 가지 백그라운드에서 작업을 수행하고 있음을 이해하는 것이 중요합니다.

가상 DOM 리렌더 및 패치

굳이 알 필요는 없지만 Vue는 가상 DOM을 사용합니다.변경을 추적하고 DOM의 어떤 부분을 업데이트해야 하는지 판단하기 쉽기 때문입니다.

실제로는 Vue가 DOM을 나타내는 트리를 구축합니다.vTree), then when you change state it uses something called adiffing이전 알고리즘을 비교한 알고리즘vTree조류에 따라vTree현재 상태로, 는 해당 상태를 보기에 반영하기 위해 페이지 중 어느 부분을 변경해야 하는지 파악하려고 합니다.새로운 상태를 나타내기 위해 페이지의 작은 부분을 변경하는 것을 호출합니다.patching.

이는 가상 DOM에 대한 매우 높은 수준의 개요입니다. 이를 효율적으로 작동시키는 것은 매우 복잡하기 때문에 Vue와 같은 프레임워크가 처음부터 존재하는 것입니다.자세한 내용은 Github의 Matt-Esch/virtual-dom을 참조하십시오.Github에서는 이 개념을 자세히 설명합니다.

언급URL : https://stackoverflow.com/questions/47484700/understanding-the-lifecycle-of-vue-instance