首页 > 教程

Vue底层判断标签的性能优化方法

slbcun
2025-04-07
1493 ℃

在vue中，如果写div、span等正常的html标签，vue会解析成传统的html标签，但当写不是这些标签的时候，vue会认为他是一个组件，例如：<Custom></Custom>。是如何做到这种判断的呢，首先自己来实现一个这样的判断

const tags = "div,span,img,a".split(",");
function checkTag(tag) {
  return tags.some((item) => item === tag);
}
console.log(checkTag("Custom")); // false
console.log(checkTag("div")); // true
console.log(checkTag("a")); // true

这里的实现方案有很多，可以用for、some、forEach等，但是都是离不开循环，思考这样的一个问题，传入一个a，a在字符串最后一个位置，所以会循环4次来判断是否包含a，如果页面上的标签极多，甚至会有上万次的循环

再来查看Vue实现这个的方式，大致源码如下

const tags = "div,span,img,a";
function makeMap(str) {
  var map = Object.create(null);
  var list = str.split(",");
  for (var i = 0; i < list.length; i++) {
    map[list[i]] = true;
  }
  return function (val) {
    return map[val];
  };
}
const isHtmlTag = makeMap(tags);
isHtmlTag("div");
isHtmlTag("Custom");
isHtmlTag("a");

这里可以看出，实现出一个柯里化函数，并且也是一个闭包状态。此时，在第一次调用时，会循环一次，后续不论在去判断什么标签，都不会再去循环，因为第一次的循环结果利用闭包已经存在了内存里，这就是闭包能带来的性能优化