Vue.js 컴포넌트의 VM입니다.$el constant 또는 재할당 가능합니까?

Vue.js 컴포넌트의 VM입니다.$el constant 또는 재할당 가능합니까?

Vue.js 구성 요소 인스턴스에는 구성 요소의 루트 DOM 요소에 액세스할 수 있는 속성이 있습니다.컴포넌트의 라이프 사이클 동안 이 속성의 값이 변화하거나 컴포넌트를 장착한 후 값이 일정합니까?즉, 컴포넌트의 루트 DOM 요소가 생성되면 어떤 상황에서 Vue로 대체할 수 있습니까?

DOM 요소의 내용은 물론 변경될 수 있습니다.

아래 컴포넌트의 라이프 사이클 다이어그램에 따르면 데이터가 변경되면 "Virtual DOM 렌더 및 패치"가 있습니다.나는 그 문서를 읽고 Vue의 출처에서 답을 찾으려고 노력했지만, 지금까지 어떤 결정적 대답도 찾지 못했다.

내가 소스코드와 가장 가깝게 지냈던 건src/core/instance/lifecycle.js:

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  const vm: Component = this
  const prevEl = vm.$el
  const prevVnode = vm._vnode
  const restoreActiveInstance = setActiveInstance(vm)
  vm._vnode = vnode
  // Vue.prototype.__patch__ is injected in entry points
  // based on the rendering backend used.
  if (!prevVnode) {
    // initial render
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
  } else {
    // updates
    vm.$el = vm.__patch__(prevVnode, vnode)
  }
  restoreActiveInstance()
  // update __vue__ reference
  if (prevEl) {
    prevEl.__vue__ = null
  }
  if (vm.$el) {
    vm.$el.__vue__ = vm
  }
  // etc.
}

이는 을 시사한다.vm.$el모든 컴포넌트 렌더에 재할당할 수 있지만, 어떻게 해야 하는지 해독하지 못했습니다.__patch__()아직까지는 확실히, 그리고 언제가 될지를 판단하기 위해_update()정확하게 호출됩니다.

왜 신경써요?

루트 DOM 요소에서 직접 수행해야 하는 설정 작업이 있습니다(예: jQuery 플러그인 설정).이 작업을 수행할 수 있는 것은mounted후크(예스 if)vm.$el일정) 또는 이 명령어를 사용하는 경우에도 수행해야 합니다.updated변경 시에 후크하다vm.$el검출되었습니까?

컴포넌트 내용을 완전히 제어할 수 있다면 다음과 같이 가정할 수 있습니다.vm.$el변하지 않아요.(예를 들어) 믹스인 또는 디렉티브를 작성하는 경우, 디렉티브를 사용하여 최상위 요소를 변경할 수 있는 컴포넌트를 만들 수 없습니다.

예를 들어, 최상위 요소 유형을 변경할 수 있는 구성요소를 정의합니다.

Vue.component('comp',{
  props:{type:String},
  template:`
    <component :is="type">
       I am a {{type}}
    </component>
  `
})

이것은 그것을 증명하는 바이올린입니다.https://jsfiddle.net/tazfLqbh/1/

동작은 문서에 정식으로 정의되어 있지 않기 때문에 향후 버전에 따라 변경될 수 있으므로 변경할 수 있다고 가정하는 것이 좋습니다.

바이올린 분석

바이올린에 포함된 동적 구성 요소가 새 Vue 구성 요소의 유형을 전환할 때 해당 구성 요소의 생성을 트리거하는지 여부는 여전히 의문으로 남아 있습니다.개발 콘솔에서 다음을 수행합니다.

// "Inspect" the span
> a = $0.__vue__
VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
// Toggle the type to div and "inspect" the div
> b = $0.__vue__
VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
> a === b
true

따라서 루트 요소 유형 전환 시 새 Vue 구성 요소 인스턴스가 생성되지 않습니다.

예상대로 이 바이올린은 동적 구성 요소 유형이 새 Vue 구성 요소 인스턴스 생성을 트리거한다는 것을 나타냅니다.이 경우 다음과 같이 표시됩니다.mounted거 요.다음과 같이 합니다.

<div id="app">
  <button @click="toggle">
    Toggle div or span element
  </button>
  <component :is="span?'comp-span':'comp-div'"></component>
</div>

Vue.component('comp-span',{
  template:`
    <span>
       I am a span
    </span>
  `
})

Vue.component('comp-div',{
  template:`
    <div>
       I am a div
    </div>
  `
})

언급URL : https://stackoverflow.com/questions/54824327/is-vue-js-components-vm-el-constant-or-can-it-be-reassigned