javascript - Vue 替换“el”组件而不是在其中渲染？

我不知道这是否是标准功能，但 Vue 在创建实例时替换了“el”指定的元素，而不是在其中渲染。

如果我使用 id 来引用“el”，那么它可以正常工作。IE，

new Vue({el: "div#app", render: h => h("span", {}, "Hello World")})

这将呈现为：

<body><div id="app"><span>Hello World</span></div></body>

但是如果我将 JS Element 对象用作“el”，那么它会完全替换该元素。

const divElement = document.querySelector("div#app");
new Vue({el: divElement, render: h => h("span", {}, "Hello World")});

将呈现为：

<body><span>Hello World</span></body>

它应该这样做，还是我做错了什么？

标签： javascripthtmlvue.jsweb

可能你这边有些困惑。我刚刚准备了一个样本，其中：

const el = document.getElementById("app");
new Vue({ el: el, render: (h) => h(App) });

成功渲染到：

<body><div id="app">// content here</div></body>

但是您仍然需要记住，这不是您在安装 vue 之前拥有的 DOM 元素，而是它的虚拟表示。

来自 Vue 文档：

提供的元件仅用作安装点。与 Vue 1.x 不同，挂载的元素在所有情况下都将替换为 Vue 生成的 DOM。因此不建议将根实例挂载到或。