你知道 Vue scoped 原理吗?这波你在第几层?

简介: scoped 原理?不就是给那啥加一个特殊标识,然后样式就被唯一标记,就实现了样式隔离的作用。

image.png

⭐佛系回答



scoped 原理?

不就是给那啥加一个特殊标识,然后样式就被唯一标记,就实现了样式隔离的作用。


⭐⭐普通回答



scoped 原理呀

当 style 标签加上 scoped 属性时,scoped 会在 DOM 结构及 css 样式上加上唯一性的标记 data-v-xxx 属性,从而达到样式私有化,不污染全局的作用;


⭐⭐⭐专业回答



嗯!

Scope CSS 的本质是基于 HTML 和 CSS 属性选择器,即分别给 HTML 标签和 CSS 选择器添加 data-v-xxx;

具体来说,它是 通过 vue-loader 实现 的,实现过程大致分 3 步:

  1. 首先 vue-loader 会解析 .vue 组件,提取出 template、script、style 对应的代码块;
  2. 然后构造组件实例,在组件实例的选项上绑定 ScopedId;
  3. 最后对 style 的 CSS 代码进行编译转化,应用 ScopedId 生成选择器的属性;


⭐⭐⭐⭐大师回答



Vue scoped,原理,涉及到 vue-loader 的处理策略:

一、首先呢,是 VueLoaderPlugin 策略:

VueLoaderPlugin 先获取了 webpack 原来的 rules( 即 compiler.option.module.rule 的比如 test:/.vue$/ 规则),然后创建了pitcher 规则,pitcher 中的 pitcher-loader 可以通过 resourceQuery 识别引入文件的 query 带的关键字,进行 loader 解析;(pitcher-loader 提供了前置运行和熔断运行的机制)

然后 VueLoaderPlugin 将进行 clonedRule( 即对 vueRule 以外的 rule 进行处理),具体是重写 resourceresourceQuery,使得 loader 最终能匹配上文件;

举例:对于 vue+ts 的写法,会在 vue 的 script 标签中加上 lang='ts’,重写后 fakeresourceQuery 文件路径为 xx.vue.ts,然后结合ts-loader 的 resource 过滤方法/.tsx?$/ 匹配上文件

然后才来到:vueRule 的 vue-loader 执行阶段;


这里简单理解:VueLoaderPlugin 就是来处理 rule 的,让 loader 能够和文件匹配。处理顺序:pitcherclonedRulevueRule


二、  有了上面的匹配文件,接着来到了 vue-loader 处理环节,首先 @vue/component-compiler-utils.parse 方法可以将 .vue 文件按照 template/script/style 分成代码块,此时会根据文件路径和文件内容生成 hash 值,并赋给 id ,跟在文件参数后面;


// 形如 `id=7ba5bd90` :
// template
import {render,staticRenderFns} from "./App.vue?vue&type=template&id=7ba5bd90&scoped=true&";
// script
import script from "./App.vue?vue&type=script&lang=js&";
// style 
import style0 from "./App.vue?vue&type=style&index=0&id=7ba5bd90&scoped=true&lang=css&";


三、对于 style 代码块,vue-loader 会在 css-loader 前增加stylePostLoaderstylePostLoader 正是 Vue scoped 的原理核心之一,它会给每个选择器增加属性[data-v-hash] ,这里的 hash 值就是上面的 id 值;

四、同时,对于 template 的 render 块,vue-loader 的 normalizeComponent 方法,判断如果 vue 文件中有 scoped 的 style,则其返回的 options._ScopedId 为上面的 scopedId;在 vnode 渲染生成 DOM 的时候会在 dom元素上增增加 scopedId,也就是增加 data-v-hash。

这样,经过上面的过程,Vue scoped 实现了 CSS 的模块私有化。


⭐⭐⭐⭐⭐ 王者回答



不知道。。。

不过,,,这影响我单手开法拉利吗?

image.png

OK,以上便是本篇分享。 觉得不错点个赞吧👍👍👍,您的鼓励,我的动力,坚持输出质量好文~~ 欢迎评论留言 我是掘金安东尼,输出暴露输入,技术洞见生活。再会吧~~ 👋👋👋


相关文章
|
28天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
3天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
28天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
25 1
|
28天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
30 1
|
28天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
28天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
28天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
54 0
|
7月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
78 3
|
7月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
7月前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
194 0