Vue.js中template标签作为挂载节点条件渲染失效，求原因解析

咱们先来明确Vue 2实例挂载的核心规则：Vue实例的el选项指定的挂载目标，必须是已经存在于页面DOM中的普通HTML元素——Vue会把这个元素作为根容器，将模板内容渲染到它内部。

第一段代码失效的核心原因 #

你第一段代码里，把Vue实例挂载到了<template id="app-3">标签上，但<template>在Vue 2里是个特殊的「内容模板元素」：它本身不会被浏览器渲染成真实的DOM节点，只是用来存放模板片段。Vue根本找不到#app-3这个真实存在的DOM元素，自然无法完成实例挂载和内容渲染。

看一下你的第一段代码结构：

<template id="app-3">
  <div v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </div>
</template>
<script src="vue.js"></script>
<script>
var app = new Vue({
  el : '#app-3',
  data : { ok : true }
});
</script>

这里的<template>只是定义了模板内容，但它本身不会出现在DOM树里，Vue找不到挂载目标，代码自然跑不起来。

第二段代码能正常运行的原因 #

而第二段代码里，你把挂载目标换成了<transition id="app-3">标签：

<transition id="app-3">
  <template v-if="ok">
    <div>
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </div>
  </template>
</transition>
<script src="vue.js"></script>
<script>
var app = new Vue({
  el : '#app-3',
  data : { ok : true }
});
</script>

<transition>是Vue提供的内置组件，它会被浏览器解析成真实的DOM节点（默认渲染成<span>，也可配置成其他元素），所以Vue能成功找到#app-3这个挂载目标，顺利完成实例挂载和模板渲染。

修正第一段代码的建议 #

如果想用<template>定义模板，正确的做法是：

1. 页面中保留一个普通DOM容器作为挂载目标（比如<div id="app-3"></div>）；
2. 通过Vue实例的template选项引用<template>里的内容。

修改后的代码示例：

<div id="app-3"></div>

<template id="my-template">
  <div v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </div>
</template>

<script src="vue.js"></script>
<script>
var app = new Vue({
  el : '#app-3',
  template: '#my-template',
  data : { ok : true }
});
</script>

这样Vue就能找到真实的DOM容器，把<template>里的内容渲染进去了。

内容的提问来源于stack exchange，提问作者Liquid.Bear