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

骤雨重山

发布于 2023-04-27 20:23:58

2140

发布于 2023-04-27 20:23:58

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

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')

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

闭包