vue內置組件有哪些？

1.component：用於動態組件，查看博文vue學習之組件。

<component :is="componentId"></component>

2.transition：過渡和動畫，查看官網文檔進入/離開&列表過渡。

<!-- 簡單元素 -->
<transition>
  <div v-if="ok">toggled content</div>
</transition>

3.transition-group：

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

4.keep-alive：

Props：

• include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。
• exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
• max - 數字。最多可以緩存多少組件實例。

注意：<keep-alive> 要求被切換到的組件都有自己的名字，不論是通過組件的 name 選項還是局部/全局注冊。

<!-- 失活的組件將會被緩存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

使用：注意，<keep-alive> 用在僅一個直屬的子組件被開關的情形。如果在其中有 v-for 則不會工作。

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多個條件判斷的子組件，要求只有一個子元素被渲染 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

keep-alive標簽屬性

include and exclude：組件有條件地緩存，用逗號分隔字符串、正則表達式或一個數組來表示要匹配的組件名稱。

匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。

<!-- 逗號分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正則表達式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 數組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

max：最多可以緩存多少組件實例。一旦這個數字達到了，在新實例被創建之前，已緩存組件中最久沒有被訪問的實例會被銷毀掉。

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

<keep-alive> 不會在函數式組件中正常工作，因為它們沒有緩存實例。

與緩存有關的生命周期鈎子activated和deactivated，參考博文：生命周期鈎子

注意：activated 和 deactivated 將會在 <keep-alive> 樹內的所有嵌套組件中觸發。

5.slot：查看博文slot。

<slot></slot>