Vue 项目中的 data-v-xxx 是怎么生成的

最近在研究微前端的样式隔离方案,看到了这样一个评论:

来自:微前端方案 qiankun 的样式隔离能不用就别用吧,比较坑 - 掘金

大意是说 Vue scoped 的 data-v-xxx 是根据文件相对路径计算的,如果微前端的两个 Vue 子项目采用相同的路径结构,那么算出来的 data-v-xxx 是一样的,可能会导致样式冲突。

听起来有点离谱,但事实是这样的么? 直接看源码:

  • webpack + vue-loader 对 vue2 的处理
js 复制代码
  // vue-loader/src/index.ts
  
  const shortFilePath = path
    .relative(rootContext || process.cwd(), filename)
    .replace(/^(..[/\])+/, '').replace(/\/g, '/')
  
  const id = hash(
    isProduction
      ? shortFilePath + '\n' + source.replace(/\r\n/g, '\n')
      : shortFilePath
  )

github.com/vuejs/vue-l...

  • vite + @vitejs/plugin-vue 对 vue3 的处理
js 复制代码
// vite-plugin-vue/src/util/descriptorCache.ts
  
import path from "node:path";
import { createHash } from "node:crypto";
import slash from "slash";

function getHash(text) {
  return createHash("sha256").update(text).digest("hex").substring(0, 8);
}

// 获取文件相对路径
const normalizedPath = slash(path.normalize(path.relative(root, filename)));
// 计算 ID
descriptor.id = getHash(normalizedPath + (isProduction ? source : ""));

github.com/vitejs/vite...

可以发现,不管是 vue-loader 还是 @vitejs/plugin-vue ,data 属性 ID 的生成机制都是一样的,即:

  • 开发环境下会根据文件相对路径 生成唯一 ID,比如 vite 中 src/App.vue 固定生成 7a7a37b1
  • 生产环境下会根据文件相对路径+文件内容共同生成唯一 ID

因此,我们可以回答文章一开始的问题:

相同路径结构的 Vue 子应用的组件,在开发环境下会产生样式冲突,但在生产环境下大概率不会,除非文件内容完全一样。

那如果遇到了冲突问题,除了手动修改文件路径或文件名,还有什么办法可以完全避免?

给 Vue 提 PR 一个更好的 ID 计算方式是加上项目名(或者 package.json 的 name),并支持手动指定,这样就可以彻底避免冲突问题了。

js 复制代码
import path from "node:path";
import { createHash } from "node:crypto";
import slash from "slash";

function getHash(text) {
  return createHash("sha256").update(text).digest("hex").substring(0, 8);
}

// 获取项目名
const projectName = config.projectName || path.basename(root)
// 获取文件相对路径(含项目名)
const normalizedPath = slash(path.normalize(path.join(projectName, path.relative(root, filename))));
// 计算 ID
descriptor.id = getHash(normalizedPath + (isProduction ? source : ""));

有遇到冲突的小伙伴,给 Vue 提 PR 的机会来了~

进一步思考:为什么开发环境和生产环境的 ID 计算方式不一样?

首先,开发环境下最好不要加入文件内容进行 hash 计算。

这很好理解,一来 hash 计算是耗时的,内容越多耗时越长;二来还会频繁变动节点样式,徒增成本。

那生产环境为什么还要加入文件内容计算 hash ?

如果 ID 与文件内容无关,就可以实现稳定的 data 属性。对于 E2E 测试用例,就可以直接使用 data 属性进行元素寻址。

我能想到的原因同本文主题相关,为了缓解多个 Vue 应用的样式冲突问题,但确实不算是一个非常好的解决措施。如果还有其他原因,欢迎在评论区分享 ~

总结

本文简单分析了 Vue 中 data-v-xxx 的计算规则 。

在开发环境中,会采用文件相对路径进行 hash 计算,而在生产环境中,还会加入文件内容共同计算。

在微前端逐步流行的情况下,这套生成策略在某些情况下会导致样式冲突。或许更好的计算方式是加入应用名,取消文件代码。


最后,笔者水平有限,欢迎评论探讨。如果本文对你有帮助的话,也欢迎一键三连(点赞、收藏、分享)~

相关推荐
四喜花露水8 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy17 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生1 小时前
回调数据丢了?
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web
Missmiaomiao3 小时前
npm install慢
前端·npm·node.js