前言
我想你們都對 Vue 的 Scope CSS 耳熟能詳了，可是提及 Vue 的 Scope CSS 實現的原理，不少人應該會說不就是給 HTML、CSS 添加屬性嗎 🙃️？javascript
確實是這樣的，不過這只是最終 Scope CSS 呈現的結果。而這個過程又是如何實現的？我想能回答上一二的同窗應該很少。css
那麼，回到今天本文，我將會圍繞如下 3 點，和你們一塊兒從 Vue 的 Scope CSS 的最終呈現結果出發，深刻淺出一番其實現的底層原理：html
- 什麼是 Scope CSS
- vue-loader 處理組件（.vue 文件）
- Patch 階段應用 ScopeId 生成 HTML 的屬性
1 什麼是 Scope CSS
Scope CSS 即做用域 CSS，組件化所密不可分的一部分。Scope CSS 使得咱們能夠在各組件中定義的 CSS 不產生污染。例如，咱們在 Vue 中定義一個組件：前端
<!-- App.vue -->
<template>
<div class="box">scoped css</div>
</template>
<script>
export default {};
</script>
<style scoped>
.box {
width: 200px;
height: 200px;
background: #aff;
}
</style>
一般狀況下，在開發環境咱們的組件會先通過 vue-loader 的處理，而後結合運行時的框架代碼渲染到頁面上。相應地，它們對應的 HTML 和 CSS 分別會是這樣：vue
HTML 部分：java
<div data-v-992092a6>scoped css</div>
CSS 部分：node
.box[data-v-992092a6] {
width: 200px;
height: 200px;
background: #aff;
}
能夠看到 Scope CSS 的本質是基於 HTML 和 CSS 選擇器的屬性，經過分別給 HTML 標籤和 CSS 選擇器添加 data-v-xxxx 屬性的方式實現。webpack
2 vue-loader 處理組件（.vue 文件）
前面，咱們也說起了在開發環境下一個組件（.vue 文件）會先由 vue-loader 來處理。那麼，針對 Scope CSS 而言，vue-loader 會作這 3 件事：git
- 解析組件，提取出
template、script、style對應的代碼塊 - 構造並導出
export組件實例，在組件實例的選項上綁定 ScopId - 對
style的 CSS 代碼進行編譯轉化，應用 ScopId 生成選擇器的屬性
注意，這裏講的只是 vue-loader 對 .vue 文件的處理部分，不涉及 HMR、配合 Devtool 的邏輯，有興趣的同窗能夠自行了解～github
然而，之因此 vue-loader 有這麼多的能力，主要是由於 vue-loader 的底層使用了 Vue 官方提供的包（package） @vue/component-compiler-utils，其提供瞭解析組件（.vue 文件）、編譯模版 template、編譯 style等 3 種能力。
那麼，下面咱們就先來看一下 vue-loader 是如何使用 @vue/component-compiler-utils 來解析組件提取 template、script、style 的。
2.1 提取 template、script、style
vue-loader 提取 template、script、style 的過程主要是使用了 @vue/component-compiler-utils 包的 parse 方法，這個過程對應的代碼（僞代碼）會是這樣：
// vue-loader/lib/index.js
const { parse } = require("@vue/component-compiler-utils");
module.exports = function (source) {
const loaderContext = this;
const { sourceMap, rootContext, resourcePath } = loaderContext;
const sourceRoot = path.dirname(path.relative(context, resourcePath));
const descriptor = parse({
source,
compiler: require("vue-template-compiler"),
filename,
sourceRoot,
needMap: sourceMap,
});
};
咱們來逐點分析一下這段代碼，首先，會獲取當前上下文 loaderContext，它會包含 webpack 打包過程核心對象 compiler、compilation 等。
其次，再構建文件資源入口 sourceRoot，通常狀況下它指的是 src 文件目錄，它主要用於構建 source-map 使用。
最後，則會使用 @vue/component-compiler-utils 提供的 parse 方法來解析 source（組件代碼）。這裏，咱們先來看一下 parse 方法的幾個參數：
soruce源代碼塊，這裏是組件對應的代碼，即包含了template、style、scriptcompiler編譯核心對象，它是一個 CommonJS 模塊（vue-template-compiler），parse方法內部會使用它提供的parseComponent方法來解析組件filename當前組件的文件名，例如App.vuesourceRoot文件資源入口，用於構建source-map使用needMap是否須要source-map，parse方法內部會根據needMap的值（true或false，默認爲true）來判斷是否生成script、style對應的source-map
而 parse 方法的執行則會返回一個對象給 desciptor，它會包含 template、style、script 分別對應的代碼塊。
那麼，能夠看到的是 vue-loader 解析組件的過程，幾乎外包給了 Vue 提供的工具包（package）。而且，我想這個時候確定會有同窗問：這些和 Vue 的 Scope CSS 有幾毛錢關係 🙃️？
有很大的關係！由於 Vue 的 Scope CSS 可不是無米之炊，它實現的前提是組件被解析了，而後再分別處理 template 和 style 部分的代碼！
那麼，顯然到這裏咱們已經完成了對組件的解析。接着，則須要構造和導出組件實例～
2.2 構造和導出組件實例
vue-loader 在解析完組件後，會分別處理並生成 template、script、style 的導入 import 語句，再調用 normalizer 方法正常化（normalizer）組件，最後將它們拼接成代碼字符串：
let templateImport = `var render, staticRenderFns`;
if (descriptor.template) {
// 構造 template 的 import 語句
}
let scriptImport = `var script = {}`;
if (descriptor.script) {
// 構造 script 的 import 語句
}
let stylesCode = ``;
if (descriptor.styles.length) {
// 構造 style 的 import 語句
}
let code =
`
${templateImport}
${scriptImport}
${stylesCode}
import normalizer from ${stringifyRequest(`!${componentNormalizerPath}`)}
var component = normalizer(
script,
render,
staticRenderFns,
${hasFunctional ? `true` : `false`},
${/injectStyles/.test(stylesCode) ? `injectStyles` : `null`},
${hasScoped ? JSON.stringify(id) : `null`},
${isServer ? JSON.stringify(hash(request)) : `null`}
${isShadow ? `,true` : ``}
)
`.trim() + `\n`;
其中，templateImport、scriptImport、stylesCode 等構造好的 template、script、style 部分的導入 import 語句看起來會是這樣：
import {
render,
staticRenderFns,
} from "./App.vue?vue&type=template&id=7ba5bd90&scoped=true&";
import script from "./App.vue?vue&type=script&lang=js&";
// 兼容命名方式的導出
export * from "./App.vue?vue&type=script&lang=js&";
import style0 from "./App.vue?vue&type=style&index=0&id=7ba5bd90&scoped=true&lang=css&";
不知道同窗們注意 ⚠️ 到沒，template 和 style 的導入 import 語句都有這麼一個共同的部分 id=7ba5bd90&scoped=true，這表示此時組件的 template 和 style 是須要 Scope CSS 的，而且 scopeId 爲 7ba5bd90。
固然，這僅僅是告知後續的 template 和 style 編譯時須要注意生成 Scope CSS，也就是 Scope CSS 的第一步！那麼，接着則會調用 normalizer 方法來對該組件進行正常化（Normalizer）處理：
import normalizer from "!../node_modules/vue-loader/lib/runtime/componentNormalizer.js"; var component = normalizer( script, render, staticRenderFns, false, null, "7ba5bd90", null ); export default component.exports;
注意，
normalizer是重命名了原方法normalizeComponent，如下統稱normalizeComponent~
我想同窗們應該都注意到了，此時 scopeId 會做爲參數傳給 normalizeComponent 方法，而傳給 normalizeComponent 的目的則是爲了在組件實例的 options 上綁定 scopeId。那麼，咱們來看一下 normalizeComponent 方法（僞代碼）：
function normalizeComponent (
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier, /* server only */
shadowMode /* vue-cli only */
) {
...
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + scopeId
}
...
}
能夠看到，這裏的 options._scopeId 會等於 data-v-7ba5bd90，而它的做用主要是用於在 patch 的時候，爲當前組件的 HTML 標籤添加名爲 data-v-7ba5bd90 的屬性。所以，這也是 template 爲何會造成帶有 scopeId 的真正所在！
2.3 編譯樣式 Style，應用 ScopId 生成選擇器的屬性
在構造完 Style 對應的導入語句後，因爲此時 import 語句中的 query 包含 vue，則會被 vue-loader 內部的 Pitching Loader 處理。而 Pitching Loader 則會重寫 import 語句，拼接上內聯（inline）的 Loader，這看起來會是這樣：
export * from ' "-!../node_modules/vue-style-loader/index.js??ref--6-oneOf-1-0 !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1 !../node_modules/vue-loader/lib/loaders/stylePostLoader.js !../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2 !../node_modules/cache-loader/dist/cjs.js??ref--0-0 !../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&id=7ba5bd90&scoped=true&lang=css&" '
而後，webpack 會解析出模塊所須要的 Loader，顯然這裏會解析出 6 個 Loader：
[
{ loader: "vue-style-loader", options: "?ref--6-oneOf-1-0" },
{ loader: "css-loader", options: "?ref--6-oneOf-1-1" },
{ loader: "stylePostLoader", options: undefined },
{ loader: "postcss-loader", options: "?ref--6-oneOf-1-2" },
{ loader: "cache-loader", options: "?ref--0-0" },
{ loader: "vue-loader", options: "?vue-loader-options" }
]
那麼，此時 webpack 則會執行這 6 個 Loader（固然還有解析模塊自己）。而且，這裏會忽略 webpack.config.js 中符合規則的 Normal Loader（vue-style-loader 還會忽略前置 Loader）。
不瞭解內聯 Loader 的同窗，能夠看一下這篇文章【webpack進階】你真的掌握了loader麼？- loader十問
而對於 Scope CSS 而言，最核心的就是 stylePostLoader。下面，咱們來看一下 stylePostLoader 的定義：
const { compileStyle } = require("@vue/component-compiler-utils");
module.exports = function (source, inMap) {
const query = qs.parse(this.resourceQuery.slice(1));
const { code, map, errors } = compileStyle({
source,
filename: this.resourcePath,
id: `data-v-${query.id}`,
map: inMap,
scoped: !!query.scoped,
trim: true,
});
if (errors.length) {
this.callback(errors[0]);
} else {
this.callback(null, code, map);
}
};
從 stylePostLoader 的定義中，咱們知道它是使用了 @vue/component-compiler-utils 提供的 compileStyle 方法來完成對組件 style 的編譯。而且，此時會傳入參數 id 爲 data-v-${query.id}，即 data-v-7ba5bd90，而這也是 style 中聲明的選擇器的屬性爲 scopeId 的關鍵點！
而在 compileStyle 函數內部，則是使用的咱們所熟知 postcss 來完成對 style 代碼的編譯和構造選擇器的 scopeId 屬性。至於如何使用 postcss 完成這個過程，這裏就不作過多介紹，有興趣的同窗自行了解哈～
3 Patch 階段應用 ScopeId 生成 HTML 的屬性
不知道同窗們是否還記得在 3.2 構造並導出組件實例的時候，咱們講了在組件實例的 options 上綁定 _scopeId 是實現 template 的 Scope 的關鍵點！可是，當時咱們並無介紹這個 _scopeId 究竟是如何應用到 template 上的元素的 😲？
若是，你想在 vue-loader 或者 @vue/component-compiler-utils 的代碼中找到這個答案，我能夠和你說找一萬年都找不到！ 由於，真正應用 _scopeId 的過程是發生在 Vue 運行時的框架代碼中（沒想到吧 😵）。
瞭解過 Vue 模版編譯過程的同窗，我想應該都知道 template 會被編譯成 render 函數，而後會根據 render 函數建立對應的 VNode，最後再由 VNode 渲染成真實的 DOM 在頁面上：
而 VNode 到真實 DOM 這個過程是由 patch 方法完成的。假設，此時咱們是第一次渲染 DOM，這在 patch 方法中會命中 isUndef(oldVnode) 爲 true 的邏輯：
function patch (oldVnode, vnode, hydrating, removeOnly) {
if (isUndef(oldVnode)) {
// empty mount (likely as component), create new root element
isInitialPatch = true
createElm(vnode, insertedVnodeQueue)
}
}
由於第一次渲染 DOM，因此壓根不存在什麼
oldVnode😶
能夠看到，此時會執行 createElm 方法。而在 createElm 方法中則會建立 VNode 對應的真實 DOM，而且它還作了一件很重要的事，調用 setScope 方法應用 _scopeId 在 DOM 上生成 data-v-xxx 的屬性！對應的代碼（僞代碼）：
// packages/src/core/vdom/patch.js
function createElm(
vnode,
insertedVnodeQueue,
parentElm,
refElm,
nested,
ownerArray,
index
) {
...
setScope(vnode);
...
}
在 setScope 方法中則會使用組件實例的 options._scopeId 做爲屬性來添加到 DOM 上，從而生成了 template 中的 HTML 標籤上名爲 data-v-xxx 的屬性。而且，這個過程會由 Vue 封裝好的工具函數 nodeOps.setStyleScope 完成，它的本質是調用 DOM 對象的 setAttribute 方法：
// src/platforms/web/runtime/node-ops.js
export function setStyleScope (node: Element, scopeId: string) {
node.setAttribute(scopeId, '')
}
結語
若是，有在網上查找過關於 vue-loader 和 Scope CSS 的文章的同窗會發現，不少文章都是說在 @vue/component-compiler-utils 包的 compilerTemplate 方法中應用 scopeId 生成了 template 中 HTML 標籤的屬性。可是，經過閱讀本文，咱們會發現這二者壓根沒有任何關係（SSR 的狀況除外）！
而且，我想同窗們也注意到了一點，本文中說起的 Vue 運行時框架的代碼是 Vue 2.x 版本的（不是 Vue3）。因此，有興趣的同窗能夠藉助本文提供的路線推敲一下 Vue3 中 Scope CSS 的過程，相信你會收穫滿滿 😎。最後，若是本文中存在表達不當或錯誤的地方，歡迎各位同窗提 Issue～
點贊 👍
經過閱讀本篇文章，若是有收穫的話，能夠點個贊，這將會成爲我持續分享的動力，感謝～
我是五柳，喜歡創新、搗鼓源碼，專一於源碼（Vue 三、Vite）、前端工程化、跨端等技術學習和分享，歡迎關注個人微信公衆號：Code center。