2024年Web前端最新Vue 组件命名，CSS的标准文档流_vue3中css使用组件名作为类名(2)，阿里巴巴大厂面试参考指南

最新推荐文章于 2024-09-21 18:46:25 发布

2401_84619185

最新推荐文章于 2024-09-21 18:46:25 发布

阅读量1k

点赞数 22

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84619185/article/details/138729707

版权

程序员专栏收录该内容

102 篇文章 0 订阅

订阅专栏

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

css源码pdf

JavaScript知识点

}

// var commonTagRE = /^(div|p|span|img|a|b|i|br|ul|ol|li|h1|h2|h3|h4|h5|h6|code|pre|table|th|td|tr|form|label|input|select|option|nav|article|section|header|footer)$/i;

// var reservedTagRE = /^(slot|partial|component)$/i;

2、检查组件名称是否以字母开头，后面跟字母、数值或下划线。

if (!/¹[\w-]*$/.test(name)) {

warn(‘Invalid component name: "’ + name + '". Component names ’ + ‘can only contain alphanumeric characaters and the hyphen.’);

}

基于以上两点，可以总结出组件的命名规则为：组件名以字母开头，后面跟字母、数值或下划线，并且不与 HTML 元素或 Vue 保留标签重名。

然而我们注意到，在上面的检查中，不符合规则的组件名称是 warn 而不是 error，意味着检查并不是强制的。实际上，Vue 组件注册的名称是没有限制的。你可以用任何 JavaScript 能够表示的字符串，不管是数字、特殊符号、甚至汉字，都可以成功注册。

模板解析

虽然 Vue 组件没有命名限制，但是我们终究是要在模板中引用的，不合理的组件名可能会导致我们无法引用它。

为了弄清楚 Vue 是如何将模板中的标签对应到自定义组件的，我们以一段简单的代码说明：

new Vue({

el: ‘#app’,

})

总体来说，模板解析分为两个过程：

首先，Vue 会将 template 中的内容插到 DOM 中，以方便解析标签。由于 HTML 标签不区分大小写，所以在生成的标签名都会转换为小写。例如，当你的 template 为时，插入 DOM 后会被转换为。（注意：我们现在讨论的是 vue 1.x 下的情景）

然后，通过标签名寻找对应的自定义组件。匹配的优先顺序从高到低为：原标签名、camelCase化的标签名、PascalCase化的标签名。例如会依次匹配 my-component、myComponent、MyComponent。前端培训

camelCase 和 PascalCase 是如何实现的代码如下：

var camelizeRE = /-(\w)/g;

function camelize(str) {

return str.replace(camelizeRE, toUpper);

}

function toUpper(_, c) {

return c ? c.toUpperCase() : ‘’;

}

function pascalize(str) {

var camelCase = camelize(str);

return camelCase.charAt(0).toUpperCase() + camelCase.slice(1)

}

对于与一个 Vue 新手，经常对以下示例代码不能正常运行感到非常疑惑：（注意：我们现在讨论的是 vue 1.x 下的情景）

Vue.component(‘MyComponent’, {

hello, world

’

})

new Vue({

el: ‘#app’,

})

如果我们按照模板解析的过程推理，就很好解释了。模板插入到 DOM 后会变成。标签 mycomponent 匹配的组件依次为 mycomponent（原标签名）、mycomponent（camelCase形式）、Mycomponent（PascalCase形式），并没有匹配到注册的组件名 MyComponent，所以会报找不到组件的警告。

命名限制

通过分析组件注册和模板解析的过程，发现 Vue 组件命名限制并没有我们想象得多。大家可以尝试一下各种命名，我试过 <a_=-*%按钮></a_=-*%按钮> 都可正常运行。

但是，并不意味着完全没有限制。由于在模板需要插入到 DOM 中，所以模板中的标签名必须能够被 DOM 正确地解析。

主要有三种情况：

一是完全不合法的标签名，例如 </>；

二是与 HTML 元素重名会产生不确定的行为，例如使用 input 做组件名不会解析到自定义组件，使用 button 在 Chrome 上正常但在 IE 上不正常；

三是与 Vue 保留的 slot、partial、component 重名，因为会优先以本身的意义解析，从而产生非预期的结果。

上述命名限制存在的根本原因，在于模板解析的过程依赖了 DOM。能不能对模板解析过程改进一下，使其不依赖于 DOM 呢？实际上，这正是 Vue 2.0 的主要改进，将模板解析过程使用 Virtual DOM 实现，使得组件命名更加灵活。

Vue 2.x 组件命名机制

==============

组件注册

Vue 2.0 的组件注册过程与 Vue 1.0 基本相同，只是 HTML 标签和 Vue 保留标签范围有些不同：