佛系回答

scoped 原理？

不就是給那啥加一個(gè)特殊標(biāo)識(shí)，然后樣式就被唯一標(biāo)記，就實(shí)現(xiàn)了樣式隔離的作用。

普通回答

scoped 原理呀

當(dāng) style 標(biāo)簽加上 scoped 屬性時(shí)，scoped 會(huì)在 DOM 結(jié)構(gòu)及 css 樣式上加上唯一性的標(biāo)記 data-v-xxx 屬性，從而達(dá)到樣式私有化，不污染全局的作用

專業(yè)回答

Scope CSS 的本質(zhì)是基于 HTML 和 CSS 屬性選擇器，即分別給 HTML 標(biāo)簽和 CSS 選擇器添加?data-v-xxx；

具體來說，它是?通過 vue-loader 實(shí)現(xiàn)?的，實(shí)現(xiàn)過程大致分 3 步：

1. 首先 vue-loader 會(huì)解析 .vue 組件，提取出?template、script、style?對應(yīng)的代碼塊；

2. 然后構(gòu)造組件實(shí)例，在組件實(shí)例的選項(xiàng)上綁定 ScopedId；

3. 最后對?style?的 CSS 代碼進(jìn)行編譯轉(zhuǎn)化，應(yīng)用 ScopedId 生成選擇器的屬性

大師回答

Vue scoped，原理，涉及到 vue-loader 的處理策略：

一、首先呢，是?VueLoaderPlugin?策略：

VueLoaderPlugin 先獲取了 webpack 原來的 rules（ 即?compiler.option.module.rule?的比如?test:/.vue$/?規(guī)則），然后創(chuàng)建了pitcher?規(guī)則，pitcher 中的?pitcher-loader?可以通過?resourceQuery?識(shí)別引入文件的?query?帶的關(guān)鍵字，進(jìn)行?loader?解析；（pitcher-loader 提供了前置運(yùn)行和熔斷運(yùn)行的機(jī)制）

然后 VueLoaderPlugin 將進(jìn)行?clonedRule（ 即對?vueRule?以外的 rule 進(jìn)行處理），具體是重寫?resource?和?resourceQuery，使得 loader 最終能匹配上文件；

舉例：對于 vue+ts 的寫法，會(huì)在 vue 的 script 標(biāo)簽中加上?lang='ts’，重寫后?fakeresourceQuery?文件路徑為 xx.vue.ts，然后結(jié)合ts-loader?的 resource 過濾方法/.tsx?$/?匹配上文件

然后才來到：vueRule?的 vue-loader 執(zhí)行階段；

這里簡單理解：VueLoaderPlugin 就是來處理 rule 的，讓 loader 能夠和文件匹配。處理順序：pitcher ? clonedRule ? vueRule

二、 ?有了上面的匹配文件，接著來到了 vue-loader 處理環(huán)節(jié)，首先 @vue/component-compiler-utils .parse 方法可以將 .vue 文件按照 template/script/style 分成代碼塊，此時(shí)會(huì)根據(jù)文件路徑和文件內(nèi)容生成 hash 值，并賦給 id ，跟在文件參數(shù)后面；

// 形如 `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&"; 復(fù)制代碼

三、對于 style 代碼塊，vue-loader 會(huì)在 css-loader 前增加stylePostLoader，stylePostLoader 正是 Vue scoped 的原理核心之一，它會(huì)給每個(gè)選擇器增加屬性[data-v-hash] ，這里的 hash 值就是上面的 id 值；

四、同時(shí)，對于 template 的 render 塊，vue-loader 的 normalizeComponent 方法，判斷如果 vue 文件中有 scoped 的 style，則其返回的 options._ScopedId 為上面的 scopedId；在 vnode 渲染生成 DOM 的時(shí)候會(huì)在 dom元素上增增加 scopedId，也就是增加 data-v-hash。

這樣，經(jīng)過上面的過程，Vue scoped 實(shí)現(xiàn)了 CSS 的模塊私有化。

王者回答

不知道。。。

不過，，，這影響我單手開法拉利嗎？