Vue 组件命名，CSS的标准文档流_vue3中css使用组件名作为类名

最新推荐文章于 2024-05-16 15:32:30 发布

2401_84413092

最新推荐文章于 2024-05-16 15:32:30 发布

阅读量966

点赞数 23

文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/2401_84413092/article/details/138236100

版权

文章探讨了Vue1.x中组件命名的困惑，指出Vue2.0通过VirtualDOM改进了解析过程，使得不合法标签名和HTML元素重名的问题得以解决。同时，还提到了数据结构和算法在前端开发中的重要性，包括排序算法和常见数据结构的应用实例。

摘要由CSDN通过智能技术生成

}

对于与一个 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 保留标签范围有些不同：

// 区分大小写

var isHTMLTag = makeMap(

‘html,body,base,head,link,meta,style,title,’ +

‘address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,’ +

‘div,dd,dl,dt,figcaption,figure,hr,img,li,main,ol,p,pre,ul,’ +

‘a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,’ +

‘s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,’ +

‘embed,object,param,source,canvas,script,noscript,del,ins,’ +

‘caption,col,colgroup,table,thead,tbody,td,th,tr,’ +

‘button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,’ +

‘output,progress,select,textarea,’ +

‘details,dialog,menu,menuitem,summary,’ +

‘content,element,shadow,template’

);

// 不区分大小写

var isSVG = makeMap(

‘svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font,’ +

‘font-face,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,’ +

‘polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view’,

true

);

var isReservedTag = function (tag) {

return isHTMLTag(tag) || isSVG(tag)

};

// 区分大小写

var isBuiltInTag = makeMap(‘slot,component’, true);

虽然 HTML 元素重名警告的标签数大大增加了，但重要的是重名区分大小写，所以我们可以愉快地使用 Input、Select、Option 等而不用担心重名。这个功劳属于 Vue 2.0 引入的 Virtual DOM。

（关于 vue 2.0 中的新特性，请看：[Vue 2.0 发布了！](

)、[Announcing Vue.js 2.0](

)）

模板解析

前面提到，Vue 2.0 相对于 1.0 的最大改进就是引入了 Virtual DOM，使模板的解析不依赖于 DOM。

使用 Virtual DOM 解析模板时，不必像 DOM 方式那样将模板中的标签名转成小写，而是原汁原味地保留原始标签名。然后，使用原始的标签名进行匹配组件。例如，不会转为为小写形式，直接以 MyComponent 为基础开始匹配。当然，匹配的规则与 1.0 是一样的，即依次匹配：原标签名、camelCase化的标签名、PascalCase化的标签名。

之前在 1.0 不能正常运行的示例代码，在 2.0 中可以正常运行了：

Vue.component(‘MyComponent’, {

hello, world

’

})