v-if 和 v-show 的认识

在Vue框架中，我们可以通过v-if/v-else-if/v-else和v-show来控制元素或组件的渲染，当v-if和v-show的指令表达式条件返回true的时候就会渲染元素或组件。

  1. <h1 v-if="awesome">Vue is awesome!</h1>

v-if指令是利用了注释节点<-- if -->对文档进行了占位，当v-if指令的值为真的时候，Vue会把相应的注释节点替换为真实的元素，反之就是把真实的元素替换为注释节点。 :::warning ⚠️ 注意
v-if在切换渲染的时候，条件区块内的事件监听器和子组件都会被销毁与重建。 ::: 屏幕录制2023-01-10 14.07.34.gif

而v-show则不同，v-show里利用CSS给给元素新增dispaly: none;来实现视觉上的隐藏，并没有真正的从文档中被移除。 :::info 因为v-if频繁的切换显示隐藏会提高性能的开销，所以，我们在开发的时候如果需要频繁的切换显示和隐藏就要使用v-show，因为v-show的性能开销会比较低。 :::

模拟实现 v-if 和 v-show

我们如何模拟实现一个v-if和v-show这样的操作呢？
首先我们需要一个Vue.js文件用于创建Vue实例，再创建一个index.js文件作为实例化入口。

首先，我们用熟悉的Vue2配方进行实例化Vue对象：

  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"></div>
  11.     <script type="module" src="./index.js"></script>
  12.   </body>
  13. </html>
  1. import VueTest from "./Vue.js";
  3. const vm = new VueTest({
  4.   el: "#app",
  5.   // 页面模版
  6.   template: `
  7.     <div>
  8.       <img v-if="isShowImg1" src="https://cdn.pixabay.com/photo/2022/11/15/04/54/automotive-7593064__340.jpg" />
  9.       <img v-show="isShowImg2" src="https://cdn.pixabay.com/photo/2022/12/15/18/15/christmas-7658297__340.jpg" />
  10.     </div>
  11.     <button @click="showImg1">显示图片1</button>
  12.     <button @click="showImg2">显示图片2</button>
  13.   `,
  14.   // 数据响应劫持
  15.   data() {
  16.     return {
  17.       isShowImg1: true,
  18.       isShowImg2: false,
  19.     };
  20.   },
  21.   // 事件处理
  22.   methods: {
  23.     showImg1() {
  24.       this.isShowImg1 = !this.isShowImg1;
  25.     },
  26.     showImg2() {
  27.       this.isShowImg2 = !this.isShowImg2;
  28.     },
  29.   },
  30. });
  31. console.log(vm);

这样我们就把一个最基本的实例化配置写好了，下面重点要放在Vue.js文件上面。

Vue文件我们利用一个立即执行函数来实现模块化，立即执行函数执行后返回一个Vue的构造函数，所以我们可以在index.js中进行实例化。

  1. var VueTest = (function () {
  2.   function Vue(options){}
  4.   return Vue;
  5. })();
  7. export default VueTest;

接着，我们要把options里面的相关属性暴露在实例化对象上：

  1. var VueTest = (function () {
  2.   function Vue(options){
  3.     this.$el = document.querySelector(options.el);
  4.     this.$data = options.data();
  5.   }
  7.   return Vue;
  8. })();
  10. export default VueTest;

image.png

我们还需要一个函数用于初始化数据：

  1. var VueTest = (function () {
  2.   function Vue(options) {
  3.     this.$el = document.querySelector(options.el);
  4.     this.$data = options.data();
  6.     this._init();
  7.   }
  9.   Vue.prototype._init = function () {
  10.     var showPool = new Map(); // 存储dom和数据的对应关系
  11.     var eventPool = new Map(); // 存储dom和事件处理的对应关系
  13.     initData();
  14.     initPool();
  15.     bindEvent();
  16.     render();
  17.   };
  19.   // 初始化数据，对 data 数据进行拦截
  20.   function initData() {}
  21.     // 初始化数据池
  22.   function initPool() {}
  23.   // 绑定事件处理
  24.   function bindEvent() {}
  25.     // 对 template 进行渲染
  26.   function render() {}
  27.   // 更改 data 数据后更新视图
  28.   function update() {}
  30.   return Vue;
  31. })();
  33. export default VueTest;

initPool方法主要有两个作用：
1、存储dom和指令+数据的对应关系
2、存储dom和事件处理函数的对应关系
我们利用的是Map数据结构进行存储，因为Map的Key可以是任意的数据类型，这样我们在后续处理的时候就能根据对应关系去处理数据啦。
v-if 和 v-show - 图3

第一件事：数据拦截

到这里，基本的架子已经差不多了，下面我们先做第一件事，那就是对数据进行拦截：

  1. var VueTest = (function () {
  2.   function Vue(options) {
  3.     this.$el = document.querySelector(options.el);
  4.     this.$data = options.data();
  6.     this._init();
  7.   }
  9.   Vue.prototype._init = function () {
  10.     var showPool = new Map();
  11.     var eventPool = new Map();
  13.     // 把当前实例、dom和数据的对应关系传递过去
  14.     initData(this, showPool); 
  15.     initPool();
  16.     bindEvent();
  17.     render();
  18.   };
  20.   function initData(vm, showPool) {
  21.     var _data = vm.$data;
  23.     for (const key in _data) {
  24.       // 判断属性是不是 _data 的原生属性
  25.       if (Object.hasOwnProperty.call(_data, key)) {
  26.         // 对当前实例进行拦截，例如访问 vm.isShowImg1 就会被拦截
  27.         Object.defineProperty(vm, key, {
  28.           get: function () {
  29.             return _data[key];
  30.           },
  31.           set: function (newVal) {
  32.             _data[key] = newVal;
  33.             // 当更改 data 的数据后，需要调用方法去更新数据和对应关系
  34.             update(vm, key, showPool);
  35.           }
  36.         });
  37.       }
  38.     }
  39.   }
  41.   function initPool() {}
  43.   function bindEvent() {}
  45.   function render() {}
  47.   function update() {}
  49.   return Vue;
  50. })();
  52. export default VueTest;

第二件事：存储数据池

第二件事情，对数据池进行初始化（可以对应上面的思维导图去理解）：

  1. var VueTest = (function () {
  2.   function Vue(options) {
  3.     this.$el = document.querySelector(options.el);
  4.     this.$data = options.data();
  6.     this._init(options.template, options.methods);
  7.   }
  9.   // 把 template, methods 传递进来
  10.   Vue.prototype._init = function (template, methods) {
  11.     var showPool = new Map();
  12.     var eventPool = new Map();
  14.     // 创建一个 div 元素，把 template 的内容放进去
  15.     var container = document.createElement("div");
  16.     container.innerHTML = template;
  18.     initData(this, showPool);
  19.     // 把 template、methods 和数据池传递进去，绑定关系
  20.     initPool(container, methods, showPool, eventPool);
  21.     bindEvent();
  22.     render();
  23.   };
  25.   function initData(vm, showPool) {
  26.     var _data = vm.$data;
  28.     for (const key in _data) {
  29.       if (Object.hasOwnProperty.call(_data, key)) {
  30.         Object.defineProperty(vm, key, {
  31.           get: function () {
  32.             return _data[key];
  33.           },
  34.           set: function (newVal) {
  35.             _data[key] = newVal;
  36.             update(vm, key, showPool);
  37.           },
  38.         });
  39.       }
  40.     }
  41.   }
  43.   function initPool(container, methods, showPool, eventPool) {
  44.     var _allNodes = container.getElementsByTagName("*");
  45.     var dom = null;
  47.     console.log(container);
  48.     console.log(_allNodes); // 获取 container 下所有的内容
  50.     for (let i = 0; i < _allNodes.length; i++) {
  51.       dom = _allNodes[i];
  53.       // 获取所有元素上的 v-if、v-show 和 @click 属性
  54.       var vIfData = dom.getAttribute("v-if");
  55.       var vShowData = dom.getAttribute("v-show");
  56.       var vEvent = dom.getAttribute("@click");
  57.     }
  58.   }
  60.   function bindEvent() {}
  62.   function render() {}
  64.   function update() {}
  66.   return Vue;
  67. })();
  69. export default VueTest;

47、48 行代码打印结果，获取模版的元素

获取到这些属性之后，我们就可以存储到数据池啦：

  1. var VueTest = (function () {
  2.   function Vue(options) {
  3.     this.$el = document.querySelector(options.el);
  4.     this.$data = options.data();
  6.     this._init(options.template, options.methods);
  7.   }
  9.   Vue.prototype._init = function (template, methods) {
  10.     var showPool = new Map();
  11.     var eventPool = new Map();
  13.     var container = document.createElement("div");
  14.     container.innerHTML = template;
  16.     initData(this, showPool);
  17.     initPool(container, methods, showPool, eventPool);
  18.     bindEvent();
  19.     render();
  20.   };
  22.   function initData(vm, showPool) {
  23.     var _data = vm.$data;
  25.     for (const key in _data) {
  26.       if (Object.hasOwnProperty.call(_data, key)) {
  27.         Object.defineProperty(vm, key, {
  28.           get: function () {
  29.             return _data[key];
  30.           },
  31.           set: function (newVal) {
  32.             _data[key] = newVal;
  33.             update(vm, key, showPool);
  34.           },
  35.         });
  36.       }
  37.     }
  38.   }
  40.   function initPool(container, methods, showPool, eventPool) {
  41.     var _allNodes = container.getElementsByTagName("*");
  42.     var dom = null;
  44.     for (let i = 0; i < _allNodes.length; i++) {
  45.       dom = _allNodes[i];
  47.       var vIfData = dom.getAttribute("v-if");
  48.       var vShowData = dom.getAttribute("v-show");
  49.       var vEvent = dom.getAttribute("@click");
  51.       if (vIfData) {
  52.         showPool.set(dom, {
  53.           type: "if",
  54.           prop: vIfData,
  55.         });
  56.         dom.removeAttribute("v-if");
  57.       } else if (vShowData) {
  58.         showPool.set(dom, {
  59.           type: "show",
  60.           prop: vShowData,
  61.         });
  62.         dom.removeAttribute("v-show");
  63.       }
  64.       if (vEvent) {
  65.         eventPool.set(dom, methods[vEvent]);
  66.         dom.removeAttribute("@click");
  67.       }
  68.     }
  70.     console.log(showPool);
  71.     console.log(eventPool);
  72.   }
  74.   function bindEvent() {}
  76.   function render() {}
  78.   function update() {}
  80.   return Vue;
  81. })();
  83. export default VueTest;

70、71行代码结果，数据池的对应关系

第三件事：绑定事件

到目前为止，数据拦截已经完成，dom和数据的对应关系也已经完成，接下来我们要绑定事件：

  1. var VueTest = (function () {
  2.   function Vue(options) {
  3.     this.$el = document.querySelector(options.el);
  4.     this.$data = options.data();
  6.     this._init(options.template, options.methods);
  7.   }
  9.   Vue.prototype._init = function (template, methods) {
  10.     var showPool = new Map();
  11.     var eventPool = new Map();
  13.     var container = document.createElement("div");
  14.     container.innerHTML = template;
  16.     initData(this, showPool);
  17.     initPool(container, methods, showPool, eventPool);
  18.     // 传递当前实例、事件池
  19.     bindEvent(this, eventPool);
  20.     render();
  21.   };
  23.   function initData(vm, showPool) {
  24.     var _data = vm.$data;
  26.     for (const key in _data) {
  27.       if (Object.hasOwnProperty.call(_data, key)) {
  28.         Object.defineProperty(vm, key, {
  29.           get: function () {
  30.             return _data[key];
  31.           },
  32.           set: function (newVal) {
  33.             _data[key] = newVal;
  34.             update(vm, key, showPool);
  35.           },
  36.         });
  37.       }
  38.     }
  39.   }
  41.   function initPool(container, methods, showPool, eventPool) {
  42.     var _allNodes = container.getElementsByTagName("*");
  43.     var dom = null;
  45.     for (let i = 0; i < _allNodes.length; i++) {
  46.       dom = _allNodes[i];
  48.       var vIfData = dom.getAttribute("v-if");
  49.       var vShowData = dom.getAttribute("v-show");
  50.       var vEvent = dom.getAttribute("@click");
  52.       if (vIfData) {
  53.         showPool.set(dom, {
  54.           type: "if",
  55.           prop: vIfData,
  56.         });
  57.         dom.removeAttribute("v-if");
  58.       } else if (vShowData) {
  59.         showPool.set(dom, {
  60.           type: "show",
  61.           prop: vShowData,
  62.         });
  63.         dom.removeAttribute("v-show");
  64.       }
  65.       if (vEvent) {
  66.         eventPool.set(dom, methods[vEvent]);
  67.         dom.removeAttribute("@click");
  68.       }
  69.     }
  70.   }
  72.   function bindEvent(vm, eventPool) {
  73.     for (var [dom, handler] of eventPool) {
  74.       // 把方法挂载到实例上
  75.       vm[handler.name] = handler;
  76.       // 给 dom 添加事件处理
  77.       // 利用 bind 把 this 指向当前实例对象
  78.       dom.addEventListener("click", vm[handler.name].bind(vm), false);
  79.     }
  80.   }
  82.   function render() {}
  84.   function update() {}
  86.   return Vue;
  87. })();
  89. export default VueTest;

image.png
可以看到实例对象上有了showImg1和showImg2这两个方法啦。

第四件事：渲染 dom

最重要的事情来了，那就是渲染dom，我们要判断dom对应的指令是v-if还是v-show来决定如何隐藏dom。

  1. var VueTest = (function () {
  2.   function Vue(options) {
  3.     this.$el = document.querySelector(options.el);
  4.     this.$data = options.data();
  6.     this._init(options.template, options.methods);
  7.   }
  9.   Vue.prototype._init = function (template, methods) {
  10.     var showPool = new Map();
  11.     var eventPool = new Map();
  13.     var container = document.createElement("div");
  14.     container.innerHTML = template;
  16.     initData(this, showPool);
  17.     initPool(container, methods, showPool, eventPool);
  18.     bindEvent(this, eventPool);
  19.     // 把当前实例、数据池、dom 内容传递过去
  20.     render(this, showPool, container);
  21.   };
  23.   function initData(vm, showPool) {
  24.     var _data = vm.$data;
  26.     for (const key in _data) {
  27.       if (Object.hasOwnProperty.call(_data, key)) {
  28.         Object.defineProperty(vm, key, {
  29.           get: function () {
  30.             return _data[key];
  31.           },
  32.           set: function (newVal) {
  33.             _data[key] = newVal;
  34.             update(vm, key, showPool);
  35.           },
  36.         });
  37.       }
  38.     }
  39.   }
  41.   function initPool(container, methods, showPool, eventPool) {
  42.     var _allNodes = container.getElementsByTagName("*");
  43.     var dom = null;
  45.     for (let i = 0; i < _allNodes.length; i++) {
  46.       dom = _allNodes[i];
  48.       var vIfData = dom.getAttribute("v-if");
  49.       var vShowData = dom.getAttribute("v-show");
  50.       var vEvent = dom.getAttribute("@click");
  52.       if (vIfData) {
  53.         showPool.set(dom, {
  54.           type: "if",
  55.           prop: vIfData,
  56.         });
  57.         dom.removeAttribute("v-if");
  58.       } else if (vShowData) {
  59.         showPool.set(dom, {
  60.           type: "show",
  61.           prop: vShowData,
  62.         });
  63.         dom.removeAttribute("v-show");
  64.       }
  65.       if (vEvent) {
  66.         eventPool.set(dom, methods[vEvent]);
  67.         dom.removeAttribute("@click");
  68.       }
  69.     }
  70.   }
  72.   function bindEvent(vm, eventPool) {
  73.     console.log(eventPool);
  74.     for (var [dom, handler] of eventPool) {
  75.       vm[handler.name] = handler;
  76.       dom.addEventListener("click", vm[handler.name].bind(vm), false);
  77.     }
  78.   }
  80.   function render(vm, showPool, container) {
  81.     var _data = vm.$data;
  82.     var _el = vm.$el;
  84.     // 迭代 showPool 对象
  85.     for (const [dom, info] of showPool) {
  86.       // 判断dom和数据的对应关系
  87.       switch (info.type) {
  88.         // 如果是 if 指令
  89.         case "if":
  90.           // 创建一个注释节点
  91.           info.comment = document.createComment(["v-if"]);
  92.           // 如果数据为假，也就是 isShowImg1，那么就把 dom 替换为注释节点
  93.           !_data[info.prop] && dom.parentNode.replaceChild(info.comment, dom);
  94.           break;
  95.         case "show":
  96.           // 如果数据为假，也就是 isShowImg2，那么就把 dom 的样式设置为隐藏
  97.           !_data[info.prop] && (dom.style.display = "none");
  98.           break;
  99.       }
  100.     }
  102.     // 最后把 container 渲染到 el 节点上
  103.     _el.appendChild(container);
  104.   }
  106.   function update() {}
  108.   return Vue;
  109. })();
  111. export default VueTest;

image.png
这样页面第一次加载就会触发render函数，该函数内负责对dom的隐藏/显示进行控制。

第五件事：更新视图

最后一件事就是在调用methods的方法后，去更新视图，更改isShowImg1或isShowImg2的时候就会触发initData里面的拦截器，拦截器在set处理函数中又调用了update函数。

  1. new VueTest({
  2.   // 其他的配置选项
  3.   methods: {
  4.     showImg1() {
  5.       this.isShowImg1 = !this.isShowImg1;
  6.     },
  7.     showImg2() {
  8.       this.isShowImg2 = !this.isShowImg2;
  9.     }
  10.   }
  11. })
  1. var VueTest = (function () {
  2.   // ...
  3.   function initData(vm, showPool) {
  4.     var _data = vm.$data;
  6.     for (const key in _data) {
  7.       if (Object.hasOwnProperty.call(_data, key)) {
  8.         Object.defineProperty(vm, key, {
  9.           get: function () {
  10.             return _data[key];
  11.           },
  12.           set: function (newVal) {
  13.             _data[key] = newVal;
  14.             // 更新视图
  15.             update(vm, key, showPool);
  16.           },
  17.         });
  18.       }
  19.     }
  20.   }
  21.   // ...
  23.   function update(vm, key, showPool) {}
  25.   return Vue;
  26. })();
  28. export default VueTest;

update方法和render方法基本类似：

  1. var VueTest = (function () {
  2.   function Vue(options) {
  3.     this.$el = document.querySelector(options.el);
  4.     this.$data = options.data();
  6.     this._init(options.template, options.methods);
  7.   }
  9.   Vue.prototype._init = function (template, methods) {
  10.     var showPool = new Map();
  11.     var eventPool = new Map();
  13.     var container = document.createElement("div");
  14.     container.innerHTML = template;
  16.     initData(this, showPool);
  17.     initPool(container, methods, showPool, eventPool);
  18.     bindEvent(this, eventPool);
  19.     render(this, showPool, container);
  20.   };
  22.   function initData(vm, showPool) {
  23.     var _data = vm.$data;
  25.     for (const key in _data) {
  26.       if (Object.hasOwnProperty.call(_data, key)) {
  27.         Object.defineProperty(vm, key, {
  28.           get: function () {
  29.             return _data[key];
  30.           },
  31.           set: function (newVal) {
  32.             _data[key] = newVal;
  33.             update(vm, key, showPool);
  34.           },
  35.         });
  36.       }
  37.     }
  38.   }
  40.   function initPool(container, methods, showPool, eventPool) {
  41.     var _allNodes = container.getElementsByTagName("*");
  42.     var dom = null;
  44.     for (let i = 0; i < _allNodes.length; i++) {
  45.       dom = _allNodes[i];
  47.       var vIfData = dom.getAttribute("v-if");
  48.       var vShowData = dom.getAttribute("v-show");
  49.       var vEvent = dom.getAttribute("@click");
  51.       if (vIfData) {
  52.         showPool.set(dom, {
  53.           type: "if",
  54.           prop: vIfData,
  55.         });
  56.         dom.removeAttribute("v-if");
  57.       } else if (vShowData) {
  58.         showPool.set(dom, {
  59.           type: "show",
  60.           prop: vShowData,
  61.         });
  62.         dom.removeAttribute("v-show");
  63.       }
  64.       if (vEvent) {
  65.         eventPool.set(dom, methods[vEvent]);
  66.         dom.removeAttribute("@click");
  67.       }
  68.     }
  69.   }
  71.   function bindEvent(vm, eventPool) {
  72.     console.log(eventPool);
  73.     for (var [dom, handler] of eventPool) {
  74.       vm[handler.name] = handler;
  75.       dom.addEventListener("click", vm[handler.name].bind(vm), false);
  76.     }
  77.   }
  79.   function render(vm, showPool, container) {
  80.     var _data = vm.$data;
  81.     var _el = vm.$el;
  83.     for (const [dom, info] of showPool) {
  84.       switch (info.type) {
  85.         case "if":
  86.           info.comment = document.createComment(["v-if"]);
  87.           !_data[info.prop] && dom.parentNode.replaceChild(info.comment, dom);
  88.           break;
  89.         case "show":
  90.           !_data[info.prop] && (dom.style.display = "none");
  91.           break;
  92.       }
  93.     }
  95.     _el.appendChild(container);
  96.   }
  98.   function update(vm, key, showPool) {
  99.     var _data = vm.$data;
  100.     // 遍历 showPool 对象
  101.     for (const [dom, info] of showPool) {
  102.       // 如果 dom 的数据和被拦截到的 key 相等
  103.       if (info.prop === key) {
  104.         switch (info.type) {
  105.           case "show":
  106.             // 如果为假那么就设置样式为隐藏，否则就移除样式
  107.             !_data[key] ? (dom.style.display = "none") : dom.removeAttribute("style");
  108.             break;
  109.           case "if":
  110.             // 如果为假就用注释节点替换dom，否则就用dom替换注释节点
  111.             !_data[key]
  112.               ? dom.parentNode.replaceChild(info.comment, dom)
  113.               : info.comment.parentNode.replaceChild(dom, info.comment);
  114.             break;
  115.         }
  116.       }
  117.     }
  118.   }
  120.   return Vue;
  121. })();
  123. export default VueTest;

到这里我们的模拟就已经完成了，下面去看看效果。
屏幕录制2023-01-10 16.37.19.gif

添加声明周期函数

我们还可以添加一些生命周期函数，在相应的阶段进行执行。

  1. import VueTest from "./Vue.js";
  3. const vm2 = new VueTest({
  4.   el: "#app",
  5.   template: `
  6.     <div>
  7.       <img v-if="isShowImg1" src="https://cdn.pixabay.com/photo/2022/11/15/04/54/automotive-7593064__340.jpg" />
  8.       <img v-show="isShowImg2" src="https://cdn.pixabay.com/photo/2022/12/15/18/15/christmas-7658297__340.jpg" />
  9.     </div>
  10.     <button @click="showImg1">显示图片1</button>
  11.     <button @click="showImg2">显示图片2</button>
  12.   `,
  13.   data() {
  14.     return {
  15.       isShowImg1: false,
  16.       isShowImg2: false,
  17.     };
  18.   },
  19.   beforeCreate() {
  20.     console.log("beforeCreate", this);
  21.   },
  22.   created() {
  23.     console.log("created", this);
  24.   },
  25.   beforeMount() {
  26.     console.log("beforeMount", this);
  27.   },
  28.   mounted() {
  29.     console.log("mounted", this);
  30.     this.isShowImg1 = false;
  31.   },
  32.   methods: {
  33.     showImg1() {
  34.       this.isShowImg1 = !this.isShowImg1;
  35.     },
  36.     showImg2() {
  37.       this.isShowImg2 = !this.isShowImg2;
  38.     },
  39.   },
  40. });
  42. console.log(vm2);
  1. var VueTest = (function () {
  2.   function Vue(options) {
  3.     // 保存所有的生命周期函数，并且改变 this 指向为 当前实例
  4.     var recycles = {
  5.       beforeCreate: options.beforeCreate.bind(this),
  6.       created: options.created.bind(this),
  7.       beforeMount: options.beforeMount.bind(this),
  8.       mounted: options.mounted.bind(this),
  9.     };
  11.     // 初始化数据之前调用
  12.     recycles.beforeCreate();
  14.     this.$el = document.querySelector(options.el);
  15.     this.$data = options.data();
  17.     // 传递 recycles
  18.     this._init(options.template, options.methods, recycles);
  19.   }
  21.   Vue.prototype._init = function (template, methods, recycles) {
  22.     // 初始化数据之后调用
  23.     recycles.created();
  25.     var showPool = new Map();
  26.     var eventPool = new Map();
  28.     var container = document.createElement("div");
  29.     container.innerHTML = template;
  31.     initData(this, showPool);
  32.     initPool(container, methods, showPool, eventPool);
  33.     bindEvent(this, eventPool);
  34.     // 传递 recycles
  35.     render(this, showPool, container, recycles);
  36.   };
  38.   function initData(vm, showPool) {
  39.     var _data = vm.$data;
  41.     for (const key in _data) {
  42.       if (Object.hasOwnProperty.call(_data, key)) {
  43.         Object.defineProperty(vm, key, {
  44.           get: function () {
  45.             return _data[key];
  46.           },
  47.           set: function (newVal) {
  48.             _data[key] = newVal;
  49.             update(vm, key, showPool);
  50.           },
  51.         });
  52.       }
  53.     }
  54.   }
  56.   function initPool(container, methods, showPool, eventPool) {
  57.     var _allNodes = container.getElementsByTagName("*");
  58.     var dom = null;
  60.     for (let i = 0; i < _allNodes.length; i++) {
  61.       dom = _allNodes[i];
  63.       var vIfData = dom.getAttribute("v-if");
  64.       var vShowData = dom.getAttribute("v-show");
  65.       var vEvent = dom.getAttribute("@click");
  67.       if (vIfData) {
  68.         showPool.set(dom, {
  69.           type: "if",
  70.           prop: vIfData,
  71.         });
  72.         dom.removeAttribute("v-if");
  73.       } else if (vShowData) {
  74.         showPool.set(dom, {
  75.           type: "show",
  76.           prop: vShowData,
  77.         });
  78.         dom.removeAttribute("v-show");
  79.       }
  80.       if (vEvent) {
  81.         eventPool.set(dom, methods[vEvent]);
  82.         dom.removeAttribute("@click");
  83.       }
  84.     }
  85.   }
  87.   function bindEvent(vm, eventPool) {
  88.     for (var [dom, handler] of eventPool) {
  89.       vm[handler.name] = handler;
  90.       dom.addEventListener("click", vm[handler.name].bind(vm), false);
  91.     }
  92.   }
  94.   function render(vm, showPool, container, recycles) {
  95.     var _data = vm.$data;
  96.     var _el = vm.$el;
  98.     for (const [dom, info] of showPool) {
  99.       switch (info.type) {
  100.         case "if":
  101.           info.comment = document.createComment(["v-if"]);
  102.           !_data[info.prop] && dom.parentNode.replaceChild(info.comment, dom);
  103.           break;
  104.         case "show":
  105.           !_data[info.prop] && (dom.style.display = "none");
  106.           break;
  107.       }
  108.     }
  110.     // 挂载之前调用
  111.     recycles.beforeMount();
  113.     _el.appendChild(container);
  115.     // 挂载之后调用
  116.     recycles.mounted();
  117.   }
  119.   function update(vm, key, showPool) {
  120.     var _data = vm.$data;
  122.     for (const [dom, info] of showPool) {
  123.       if (info.prop === key) {
  124.         switch (info.type) {
  125.           case "show":
  126.             !_data[key] ? (dom.style.display = "none") : dom.removeAttribute("style");
  127.             break;
  128.           case "if":
  129.             !_data[key]
  130.               ? dom.parentNode.replaceChild(info.comment, dom)
  131.               : info.comment.parentNode.replaceChild(dom, info.comment);
  132.             break;
  133.         }
  134.       }
  135.     }
  136.   }
  138.   return Vue;
  139. })();
  141. export default VueTest;

image.png
这些生命周期方法的this都指向当前实例！！！

最后，源码地址献上：
https://github.com/xiechen1201/JSPlusPlus/blob/main/%E8%85%BE%E8%AE%AF%E8%AF%BE%E5%A0%82/Vue%20%E6%9C%AC%E5%B0%8A02/05-If%26Show/main.js