Javascript 是Vue.js组件'；s vm.$el常量或是否可以重新分配？

Vue.js组件实例具有访问组件根DOM元素的权限。此属性的值在组件的生命周期内是否发生过变化，或者在安装组件后是否保持不变？换句话说，一旦创建了组件的根DOM元素，在某些情况下它可以被Vue替换吗

我知道DOM元素的内容当然可以更改

根据下面组件的生命周期图，当数据更改时，会出现“虚拟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

可以在每个组件渲染上重新分配，但我还没有解释到目前为止

\uuuuu patch\uuuuu（）

是如何工作的，以及何时准确调用

\uupdate（）

为什么要麻烦？ 我要直接在根DOM元素上执行一些设置任务（例如，设置jQuery插件）。仅在

mounted

hook（如果

vm.$el

为常量，则为是）中执行此操作是否足够，或者在检测到

vm.$el

的更改时，我必须在

updated

hook中执行此操作

---

如果您完全控制组件内容，那么您可能会认为，

vm.$el

不会改变。如果您正在制作（例如）一个mixin或指令，那么您就不能制作一个组件，其中顶层元素可以通过使用该指令进行更改，这是完全可能的

例如，这定义了一个可以更改其顶层元素类型的组件：

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

所以在根元素类型的切换上不会创建新的Vue组件实例

正如预期的那样，这表明动态组件类型不会触发新Vue组件实例的创建。在这种情况下，

挂载的

钩子就足够了。大概是这样的：

<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>
  `
})

切换div或span元素
Vue.组件（'comp-span'{
模板：`
我是一个跨度
`
})
Vue.组件（'comp-div'{
模板：`
我是一名跳水运动员
`
})

感谢您的见解。我会用我得到的其他信息编辑你的答案。没问题。很高兴提供帮助。这也意味着许多关于如何将jQuery插件添加到Vue组件的教程都是错误的。那些我只读过的书说要挂上

挂载的
舞台。事实上，如果官方在文档中选择了错误的示例，那么。。。他们基本上是对的，因为很少有开发人员在组件的顶层做这样的事情。顺便说一句，有用的额外信息。我假设是这样的，但没有想过测试它。有趣的讨论。我只想指出，虽然VueComponent没有改变（在fiddle分析中），但它的
$el
属性确实改变了（这是Bernie所要求的），但也应该知道
$el
是DOM元素，所以“我知道DOM元素的内容当然可以改变”已经回答了这个问题。
<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>
  `
})