当一个组件在视图中消失的时候会出现什么情况呢？

  1. <template>
  2.   <div class="tab">
  3.     <div class="nav">
  4.       <div
  5.         v-for="(value, key) in navData"
  6.         :key="key"
  7.         :class="['nav-item', { active: key === currentTab }]"
  8.         @click="setCurrentTab(key)">
  9.         {{ value }}
  10.       </div>
  11.     </div>
  12.     <div class="component">
  13.       <component :is="currentComponent"></component>
  14.     </div>
  15.   </div>
  16. </template>
  18. <script>
  19.   import Intro from "./components/Intro/index.vue";
  20.   import Article from "./components/Article/index.vue"
  21.   import List from "./components/List/index.vue"
  23.   export default {
  24.     components: {
  25.       Intro,
  26.       Article,
  27.       List
  28.     },
  29.     data() {
  30.       return {
  31.         currentTab: "intro",
  32.         navData: {
  33.           intro: "Intro",
  34.           article: "Article",
  35.           list: "List"
  36.         }
  37.       };
  38.     },
  39.     computed: {
  40.       currentComponent() {
  41.         switch (this.currentTab) {
  42.           case "intro":
  43.             return Intro;
  44.           case "article":
  45.             return Article;
  46.           case "list":
  47.             return List;
  48.         }
  49.       }
  50.     },
  51.     methods: {
  52.       // 切换 Tba 的值
  53.       setCurrentTab(key) {
  54.         this.currentTab = key;
  55.       }
  56.     }
  57.   };
  58. </script>
  1. export default {
  2.   name: "Intro",
  3.   mounted() {
  4.     console.log("Intro mounted!");
  5.   },
  6.   unmounted() {
  7.     console.log("Intro unmounted!");
  8.   }
  9. };

image.png
当我们从 Intero Tab 切换到 Article Tab 的的时候，能够看到 Intro 组件的mounted和unmounted都进行了触发。
这是因为<component>组件动态渲染的时候是不会进行缓存组件的实例，每次切换 Tab 的时候组件都会进行重新初始化！

之前我们说过 Vue 模版渲染的大致流程：

  • createApp创建应用实例；
  • template生成 AST 树（AST 树主要描述了template是什么样子的，这有点像虚拟节点，AST 树上有很多 Vue 本身的东西，例如 v-if、v-for、v-show、v-on…）；
  • 形成 AST 树后才能根据树的内容最后变为 JS 的逻辑，并且过滤掉浏览器不认识的结构；
  • 最后 AST 树 => vNode 虚拟节点 => vDom 虚拟元素 => rDom 真实元素；

每当视图要更新又会执行如下的流程：

  • 数据变化更新内容 => 产生 vNode => old vNode => compare 进行比较 => diff 寻找差异 => patch 打补丁 => 更新 rDom 描述 => 根据 patch => 更新真实 Dom

回到上面的案例，我们在切换 Tab 的时候，Vue 底层会进行计算，判断 vNode 有没有发生变化：

  • 没有：重新组装 vNode => 更新 DOM
  • 有：现有的 vNode => 更新 DOM
    • <keep-alive>会缓存当前组件的 vNode，不再进行重新初始化渲染

所以我们可以把<component>用<keep-alive>进行包裹：

  1. <!-- 其他内容 -->
  2. <tempalte>
  3.   <div class="component">
  4.     <keep-alive>
  5.       <component :is="currentComponent"></component>
  6.     </keep-alive>
  7.   </div>  
  8. </tempalte>

钩子函数

因为<keep-alive>会缓存组件的实例，不再进行初始化，所以当我们切换 Tab 的时候 Intro 组件的mounted和unmounted生命周期函数将不会再执行，取而代之的是<keep-alive>的钩子函数activated和deactivated：

  1. export default {
  2.   name: "Intro",
  3.   mounted() {
  4.     console.log("Intro mounted!");
  5.   },
  6.   unmounted() {
  7.     console.log("Intro unmounted!");
  8.   },
  9.   activated() {
  10.     console.log("Intro activated!");
  11.   },
  12.   deactivated() {
  13.     console.log("Intro deactivated!");
  14.   }
  15. };

image.png
因为 Intro 组件没有进行销毁，所以不会执行unmounted函数！

属性

<keep-alive>允许我们传递 prop：
1、excludle表示排除某个组件不进行缓存；
excludle属性接收组件的名称，默认是找组件的name属性，如果组件内部没有name属性则找components注册时提供的key值！

  1. <!-- 接收字符串，多个组件名称用 , 分割 -->
  2. <keep-alive exclude="Intro,List">
  3.   <component :is="currentComponent"></component>
  4. </keep-alive>
  1. <!-- 接收数组 -->
  2. <keep-alive :exclude="['Intro', 'List']">
  3.   <component :is="currentComponent"></component>
  4. </keep-alive>
  1. <!-- 接收正则 -->
  2. <keep-alive :exclude="/n|c/">
  3.   <component :is="currentComponent"></component>
  4. </keep-alive>

2、include表示包含某个组件进行缓存；
include和excludle属性一致，都按照优先组件的name属性，如果组件内部没有name属性则找components注册时提供的key值！

  1. <!-- 接收字符串，多个组件名称用 , 分割 -->
  2. <keep-alive include="Intro,List">
  3.   <component :is="currentComponent"></component>
  4. </keep-alive>
  1. <!-- 接收数组 -->
  2. <keep-alive :include="['Intro', 'List']">
  3.   <component :is="currentComponent"></component>
  4. </keep-alive>
  1. <!-- 接收正则 -->
  2. <keep-alive :include="/n|c/">
  3.   <component :is="currentComponent"></component>
  4. </keep-alive>

:::warning ⚠️ 注意
exclude和include都推荐数组的写法！ :::

3、max表示限制可被缓存的最大组件实例数量；
如果缓存达到了 n 个组件，在创建新的组件实例之前，缓存组件时间最久的且没有被访问的组件实例会被销毁！

  1. <keep-alive :max="2">
  2.   <component :is="currentComponent"></component>
  3. </keep-alive>

模拟简易的 keep-alive

  1. Demo
  2. │  ├─ index.html
  3. │  ├─ package-lock.json
  4. │  ├─ package.json
  5. │  └─ src
  6. │     ├─ components
  7. │     │  ├─ Comp1.js
  8. │     │  ├─ Comp2.js
  9. │     │  └─ Comp3.js
  10. │     └─ mian.js

我们的 Demo 使用 Vite 进行编译启动，package.json 文件内容如下：

  1. {
  2.   "name": "Demo",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "dev": "vite"
  9.   },
  10.   "keywords": [],
  11.   "author": "",
  12.   "license": "ISC",
  13.   "devDependencies": {
  14.     "vite": "^4.3.5"
  15.   }
  16. }

首先现在 index.html 文件中搭建一个 Tab 的布局：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <!-- Tab 按钮区域 -->
  12.       <div id="buttons">
  13.         <span data-key="comp1">COMP 1</span>
  14.         <span data-key="comp2">COMP 2</span>
  15.         <span data-key="comp3">COMP 3</span>
  16.       </div>
  17.       <div id="wrapper"></div>
  18.     </div>
  19.     <script type="module" src="./src/mian.js"></script>
  20.   </body>
  21. </html>

index.html 文件逻辑都放到了 main.js 文件中：

  1. const app = {
  3. }

首先，我们需要导入 components 下面的 3 个组件：

  1. import comp1 from "./components/Comp1";
  2. import comp2 from "./components/Comp2";
  3. import comp3 from "./components/Comp3";
  5. const App = {
  6.   components: {
  7.     comp1,
  8.     comp2,
  9.     comp3
  10.   }
  11. };

然后我们需要获取页面中三个按钮元素，并绑定点击事件：

  1. import comp1 from "./components/Comp1";
  2. import comp2 from "./components/Comp2";
  3. import comp3 from "./components/Comp3";
  5. const oBtns = document.getElementById("buttons");
  6. const oWrapper = document.getElementById("wrapper");
  8. const App = {
  9.   components: {
  10.     comp1,
  11.     comp2,
  12.     comp3
  13.   },
  14.   bindEvent() {
  15.     oBtns.addEventListener("click", this.handleBtnClick.bind(this), false);
  16.   },
  17.   handleBtnClick(e) {
  18.     const tar = e.target;
  19.     const tagName = tar.tagName.toLowerCase();
  20.   }
  21. };

拿到 btn 按钮后，我们要把组件的内容转换为一个简易的 vNode 对象：

  1. import comp1 from "./components/Comp1";
  2. import comp2 from "./components/Comp2";
  3. import comp3 from "./components/Comp3";
  5. const oBtns = document.getElementById("buttons");
  6. const oWrapper = document.getElementById("wrapper");
  8. const App = {
  9.   components: {
  10.     comp1,
  11.     comp2,
  12.     comp3
  13.   },
  14.   bindEvent() {
  15.     oBtns.addEventListener("click", this.handleBtnClick.bind(this), false);
  16.   },
  17.   handleBtnClick(e) {
  18.     const tar = e.target;
  19.     const tagName = tar.tagName.toLowerCase();
  21.     if (tagName === "span") {
  22.       const key = tar.dataset.key;
  23.       const vNode = this.setVNode(this.components[key]); // 传递组件对象
  24.       const rNode = this.setRNode(vNode); // 传递 vNode 对象
  26.       oWrapper.innerHTML = "";
  27.       oWrapper.appendChild(rNode); // 渲染 rNode
  28.     }
  29.   },
  30.   setVNode(comp) {
  31.     const { template, name } = comp;
  32.     const regTag = template.match(/\<(.+?)\>/)[1]; // 获取标签的名称
  33.     const regContent = template.match(/\>(.+?)\</)[1]; // 获取元素的内容
  35.     // 例如 {tag:'h1', children:'This is COMP-1', mark:'Comp1'}
  36.     return {
  37.       tag: regTag,
  38.       children: regContent,
  39.       mark: name
  40.     };
  41.   },
  42.   setRNode(vNode) {
  43.     const { tag, children, mark } = vNode;
  45.     // 根据 tag 创建对应的 DOM 元素
  46.     const node = document.createElement(tag);
  47.     node.innerText = children;
  49.     // 然后创建后的 DOM
  50.     return node;
  51.   }
  52. };

最后我们还需要执行一下我们整个 App 对象：

  1. import comp1 from "./components/Comp1";
  2. import comp2 from "./components/Comp2";
  3. import comp3 from "./components/Comp3";
  5. const oBtns = document.getElementById("buttons");
  6. const oWrapper = document.getElementById("wrapper");
  8. const App = {
  9.   components: {
  10.     comp1,
  11.     comp2,
  12.     comp3
  13.   },
  14.   init() {
  15.     this.bindEvent();
  16.   },
  17.   bindEvent() {
  18.     oBtns.addEventListener("click", this.handleBtnClick.bind(this), false);
  19.   },
  20.   handleBtnClick(e) {
  21.     const tar = e.target;
  22.     const tagName = tar.tagName.toLowerCase();
  24.     if (tagName === "span") {
  25.       const key = tar.dataset.key;
  26.       const vNode = this.setVNode(this.components[key]); // 传递组件对象
  27.       const rNode = this.setRNode(vNode); // 传递 vNode 对象
  29.       oWrapper.innerHTML = "";
  30.       oWrapper.appendChild(rNode); // 渲染 rNode
  31.     }
  32.   },
  33.   setVNode(comp) {
  34.     const { template, name } = comp;
  35.     const regTag = template.match(/\<(.+?)\>/)[1]; // 获取标签的名称
  36.     const regContent = template.match(/\>(.+?)\</)[1]; // 获取元素的内容
  38.     // 例如 {tag:'h1', children:'This is COMP-1', mark:'Comp1'}
  39.     return {
  40.       tag: regTag,
  41.       children: regContent,
  42.       mark: name
  43.     };
  44.   },
  45.   setRNode(vNode) {
  46.     const { tag, children, mark } = vNode;
  48.     // 根据 tag 创建对应的 DOM 元素
  49.     const node = document.createElement(tag);
  50.     node.innerText = children;
  52.     // 然后创建后的 DOM
  53.     return node;
  54.   }
  55. };
  57. App.init();

屏幕录制2023-05-11 15.39.37.gif
到这里我们就简单了实现了一个 Tab 的切换，下面我要给<div id="wrapper"></div>加上<keep-alive>进行包裹，进行缓存。

  1. <body>
  2.   <div id="app">
  3.     <div id="buttons">
  4.       <span data-key="comp1">COMP 1</span>
  5.       <span data-key="comp2">COMP 2</span>
  6.       <span data-key="comp3">COMP 3</span>
  7.     </div>
  8.     <keep-alive>
  9.       <div id="wrapper"></div>
  10.     </keep-alive>
  11.   </div>
  12.   <script type="module" src="./src/mian.js"></script>
  13. </body>
  1. import comp1 from "./components/Comp1";
  2. import comp2 from "./components/Comp2";
  3. import comp3 from "./components/Comp3";
  5. const oBtns = document.getElementById("buttons");
  6. const oWrapper = document.getElementById("wrapper");
  8. const App = {
  9.   components: {
  10.     comp1,
  11.     comp2,
  12.     comp3
  13.   },
  14.   compCache: {}, // 新增一个缓存对象
  15.   init() {
  16.     this.bindEvent();
  17.   },
  18.   bindEvent() {
  19.     oBtns.addEventListener("click", this.handleBtnClick.bind(this), false);
  20.   },
  21.   handleBtnClick(e) {
  22.     const tar = e.target;
  23.     const tagName = tar.tagName.toLowerCase();
  25.     /* if (tagName === "span") {
  26.       const key = tar.dataset.key;
  27.       const vNode = this.setVNode(this.components[key]); // 传递组件对象
  28.       const rNode = this.setRNode(vNode); // 传递 vNode 对象
  30.       oWrapper.innerHTML = "";
  31.       oWrapper.appendChild(rNode); // 渲染 rNode
  32.     } */
  34.     // 这里 vNode 将不再直接调用 setVNode 返回，而是要进行判断
  35.     if (tagName === "span") {
  36.       const key = tar.dataset.key;
  37.       let vNode = null;
  39.       // 如果缓存对象中存在 key
  40.       if (this.compCache[key]) {
  41.         vNode = this.compCache[key];
  42.       }else {
  43.         // 否则直接去调用 setVNode 生成 vNode
  44.         vNode = this.setVNode(this.components[key]);
  46.         // 如果 oWrapper 的父节点是 <keep-alive> 那就把当前组件的 vNode 存到 compCache 中去
  47.         if (this.checkKeppAlive(oWrapper)) {
  48.           this.compCache[key] = vNode;
  49.         }
  50.       }
  51.     }
  53.     // 将 vNode 转换为 rNode ，最后进行渲染
  54.     const rNode = this.setRNode(vNode);
  55.     oWrapper.innerHTML = "";
  56.     oWrapper.appendChild(rNode);
  58.   },
  59.   setVNode(comp) {
  60.     const { template, name } = comp;
  61.     const regTag = template.match(/\<(.+?)\>/)[1]; // 获取标签的名称
  62.     const regContent = template.match(/\>(.+?)\</)[1]; // 获取元素的内容
  64.     // 例如 {tag:'h1', children:'This is COMP-1', mark:'Comp1'}
  65.     return {
  66.       tag: regTag,
  67.       children: regContent,
  68.       mark: name
  69.     };
  70.   },
  71.   setRNode(vNode) {
  72.     const { tag, children, mark } = vNode;
  74.     // 根据 tag 创建对应的 DOM 元素
  75.     const node = document.createElement(tag);
  76.     node.innerText = children;
  78.     // 然后创建后的 DOM
  79.     return node;
  80.   },
  81.   checkKeppAlive(wrapper) {
  82.     const outerWrapper = wrapper.parentNode.tagName.toLowerCase();
  83.     return outerWrapper === "keep-alive";
  84.   }
  85. };
  87. App.init();

屏幕录制2023-05-11 15.49.04.gif

我们还可以添加两个钩子函数，当组件激活的时候执行：

  1. import comp1 from "./components/Comp1";
  2. import comp2 from "./components/Comp2";
  3. import comp3 from "./components/Comp3";
  5. const oBtns = document.getElementById("buttons");
  6. const oWrapper = document.getElementById("wrapper");
  8. const App = {
  9.   components: {
  10.     comp1,
  11.     comp2,
  12.     comp3
  13.   },
  14.   mounted(callback) {
  15.     callback && callback();
  16.   },
  17.   activated(callback) {
  18.     callback && callback();
  19.   },
  20.   compCache: {}, // 新增一个缓存对象
  21.   init() {
  22.     this.bindEvent();
  23.   },
  24.   bindEvent() {
  25.     oBtns.addEventListener("click", this.handleBtnClick.bind(this), false);
  26.   },
  27.   handleBtnClick(e) {
  28.     const tar = e.target;
  29.     const tagName = tar.tagName.toLowerCase();
  31.     /* if (tagName === "span") {
  32.       const key = tar.dataset.key;
  33.       const vNode = this.setVNode(this.components[key]); // 传递组件对象
  34.       const rNode = this.setRNode(vNode); // 传递 vNode 对象
  36.       oWrapper.innerHTML = "";
  37.       oWrapper.appendChild(rNode); // 渲染 rNode
  38.     } */
  40.     // 这里 vNode 将不再直接调用 setVNode 返回，而是要进行判断
  41.     if (tagName === "span") {
  42.       const key = tar.dataset.key;
  43.       let vNode = null;
  45.       // 如果缓存对象中存在 key
  46.       if (this.compCache[key]) {
  47.         vNode = this.compCache[key];
  48.       }else {
  49.         // 否则直接去调用 setVNode 生成 vNode
  50.         vNode = this.setVNode(this.components[key]);
  52.         // 如果 oWrapper 的父节点是 <keep-alive> 那就把当前组件的 vNode 存到 compCache 中去
  53.         if (this.checkKeppAlive(oWrapper)) {
  54.           this.compCache[key] = vNode;
  55.         }
  56.       }
  57.     }
  59.     // 将 vNode 转换为 rNode ，最后进行渲染
  60.     const rNode = this.setRNode(vNode);
  61.     oWrapper.innerHTML = "";
  62.     oWrapper.appendChild(rNode);
  64.     if (this.checkKeppAlive(oWrapper)) {
  65.       this.activated(() => {
  66.         console.log(key, "activated");
  67.       });
  68.     } else {
  69.       this.mounted(() => {
  70.         console.log(key, "mounted");
  71.       });
  72.     }
  73.   },
  74.   setVNode(comp) {
  75.     const { template, name } = comp;
  76.     const regTag = template.match(/\<(.+?)\>/)[1]; // 获取标签的名称
  77.     const regContent = template.match(/\>(.+?)\</)[1]; // 获取元素的内容
  79.     // 例如 {tag:'h1', children:'This is COMP-1', mark:'Comp1'}
  80.     return {
  81.       tag: regTag,
  82.       children: regContent,
  83.       mark: name
  84.     };
  85.   },
  86.   setRNode(vNode) {
  87.     const { tag, children, mark } = vNode;
  89.     // 根据 tag 创建对应的 DOM 元素
  90.     const node = document.createElement(tag);
  91.     node.innerText = children;
  93.     // 然后创建后的 DOM
  94.     return node;
  95.   },
  96.   checkKeppAlive(wrapper) {
  97.     const outerWrapper = wrapper.parentNode.tagName.toLowerCase();
  98.     return outerWrapper === "keep-alive";
  99.   }
  100. };
  102. App.init();

屏幕录制2023-05-11 15.53.03.gif

源码地址：
JSPlusPlus/腾讯课堂/Vue本尊07/01 at main · xiechen1201/JSPlusPlus