Nuxt自定义Radio组件通过计算属性绑定动态样式首次触发不流畅

问题原因 #

这个问题和计算属性的运行机制完全无关，属于纯CSS字体渲染层面的问题，触发原因有两个：

1. 你在.radio--active类中修改了font-weight属性，不同字重的字符本身宽度存在差异，字重升高后字符会更宽，导致文本总宽度变化，就会出现你观察到的收缩/膨胀抖动效果。
2. 仅首次点击触发抖动是因为页面初始加载时只会渲染用到的常规字重字体，第一次触发中粗字重渲染时，浏览器需要临时加载、渲染对应字重的字体变体，第一次渲染完成后对应字重已经被缓存，后续切换就不会出现抖动。

解决方案 #

你可以选择以下任意一种方案修复：

• 预加载字体：在页面head中提前预加载常规、中粗两个字重的字体文件，保证两种字重在页面加载完成时就已经就绪。
• 固定容器宽度：给.radio__label设置固定宽度或者足够的预留宽度，同时添加text-wrap: nowrap避免换行，抵消字重变化带来的宽度偏移。
• 添加过渡效果：给.radio__label添加transition: font-weight 0.18s ease属性，让字重变化有平滑过渡，弱化跳变的视觉感知。
• 占位兜底方案：在.radio__label中添加宽度占位，用伪元素写入和标签相同的文本内容，设置为中粗字重、不可见，让容器默认按照粗体宽度渲染，切换字重时容器宽度不会发生变化，彻底解决抖动问题，示例代码如下：

.radio__label {
  display: flex;
  align-items: center;
  line-height: 1;
  position: relative;
  &::after {
    content: attr(data-text);
    font-weight: $font-weight-medium;
    visibility: hidden;
    height: 0;
    display: block;
  }
}

使用该方案时需要给.radio__label添加data-text属性绑定标签文本：

<span :for="radioId" class="radio__label" :data-text="radioLabel">{{ radioLabel }}</span>

内容的提问来源于stack exchange，提问作者Théo Lavaux