关于vue.js:刨根问底揭开-Vue-中-Scope-CSS-实现的幕后原理

11次阅读

共计 8168 个字符，预计需要花费 21 分钟才能阅读完成。

前言

我想大家都对 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 的解决，而后联合运行时的框架代码渲染到页面上。相应地，它们对应的 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，其提供了解析组件（.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），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 十问

而对于 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 3、Vite）、前端工程化、跨端等技术学习和分享，欢送关注我的 微信公众号：Code center。

正文完
源码
发表至： 源码
2021-03-20
 0
关于源码:不破不立分享源码优质的消防安全知识竞答活动小程序
关于源码:SpringBoot源码-bean的加载上
关于源码:Koa源码解析手写
关于源码:OneFlow源码一览GDB编译调试