刨根問底，揭開 Vue 中 Scope CSS 實現的幕後（原理）

前言

我想大家應該都對 Vue 的 Scope CSS 耳熟能詳了，但是說起 Vue 的 Scope CSS 實現的原理，很多人應該會說不就是給 HTML、CSS 添加屬性嗎 🙃️？

確實是這樣的，不過這只是最終 Scope CSS 呈現的結果。而這個過程又是如何實現的？我想能回答上一二的同學應該不多。

那麼，回到今天本文，我將會圍繞以下 3 點，和大家一起從 Vue 的 Scope CSS 的最終呈現結果出發，深入淺出一番其實現的底層原理：

• 什麼是 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[1] 的處理，然後結合運行時的框架代碼渲染到頁面上。相應地，它們對應的 HTML 和 CSS 分別會是這樣：

HTML 部分：

<div data-v-992092a6>scoped css</div>

CSS 部分：

.box[data-v-992092a6] {
  width: 200px;
  height: 200px;
  background: #aff;
}

可以看到 Scope CSS 的本質是基於 HTML 和 CSS 選擇器的屬性，通過分別給 HTML 標籤和 CSS 選擇器添加 data-v-xxxx 屬性的方式實現。

2 vue-loader 處理組件（.vue 文件）

前面，我們也提及了在開發環境下一個組件（.vue 文件）會先由 vue-loader 來處理。那麼，針對 Scope CSS 而言，vue-loader 會做這 3 件事：

• 解析組件，提取出 template、script、style 對應的代碼塊

• 構造並導出 export 組件實例，在組件實例的選項上綁定 ScopId

• 對 style 的 CSS 代碼進行編譯轉化，應用 ScopId 生成選擇器的屬性

注意，這裏講的只是 vue-loader 對 .vue 文件的處理部分，不涉及 HMR、配合 Devtool 的邏輯，有興趣的同學可以自行了解～

然而，之所以 vue-loader 有這麼多的能力，主要是因爲 vue-loader 的底層使用了 Vue 官方提供的包（package） @vue/component-compiler-utils[2]，其提供瞭解析組件（.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、script

• compiler 編譯核心對象，它是一個 CommonJS 模塊（vue-template-compiler[3]），parse 方法內部會使用它提供的 parseComponent 方法來解析組件

• filename 當前組件的文件名，例如 App.vue

• sourceRoot 文件資源入口，用於構建 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 十問 [4]

而對於 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[5] 來完成對 style 代碼的編譯和構造選擇器的 scopeId 屬性。至於如何使用 postcss 完成這個過程，這裏就不做過多介紹，有興趣的同學自行了解哈～

3 Patch 階段應用 ScopeId 生成 HTML 的屬性

不知道同學們是否還記得在 2.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～

參考資料

[1]

vue-loader: https://github.com/vuejs/vue-loader

[2]

@vue/component-compiler-utils: https://github.com/vuejs/component-compiler-utils

[3]

vue-template-compiler: https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#readme

[4]

【webpack 進階】你真的掌握了 loader 麼？- loader 十問: https://juejin.cn/post/6844903693070909447

[5]

postcss: https://postcss.org/api/

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/sMmhl9ZZ5K3eLL7dydWw2g