下列哪个不是 Vue.js 中的内置组件？（ ）A. componentB. transitionC. templateD. transition-group

本题考查 Vue.js 中内置组件的相关知识。解题思路是需要对 Vue.js 的各个内置组件有清晰的认识，然后逐一分析每个选项是否为 Vue.js 的内置组件。

• 选项 A：component
  component 是 Vue.js 中的内置组件，它是一个动态组件，用于在不同组件之间进行切换。通过 :is 属性可以指定要渲染的组件，示例代码如下：

  <template>
    <component :is="currentComponent"></component>
  </template>
  <script>
  import ComponentA from './ComponentA.vue';
  import ComponentB from './ComponentB.vue';
  export default {
    data() {
      return {
        currentComponent: 'ComponentA'
      };
    },
    components: {
      ComponentA,
      ComponentB
    }
  };
  </script>

• 选项 B：transition
  transition 是 Vue.js 中的内置组件，用于实现单个元素或组件的过渡效果。可以通过设置过渡的 CSS 类名来定义进入和离开的动画效果，示例代码如下：

  <template>
    <transition name="fade">
      <p v-if="show">这是一个过渡效果的段落</p>
    </transition>
  </template>
  <script>
  export default {
    data() {
      return {
        show: true
      };
    }
  };
  </script>
  <style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  </style>

• 选项 C：template
  template 并不是 Vue.js 的内置组件，它只是一个用于包裹模板内容的标签，在 Vue 实例中，template 标签内的内容会被解析为模板，但它本身不是一个可复用的组件。
• 选项 D：transition-group
  transition-group 是 Vue.js 中的内置组件，用于实现列表的过渡效果。它会以一个真实元素呈现，默认为一个 <span>，可以通过 tag 属性指定渲染的元素，示例代码如下：

  <template>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </template>
  <script>
  export default {
    data() {
      return {
        items: [
          { id: 1, text: '列表项 1' },
          { id: 2, text: '列表项 2' }
        ]
      };
    }
  };
  </script>
  <style>
  .list-enter-active, .list-leave-active {
    transition: all 0.5s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
  </style>