Vue v-if条件满足却不生效，Font Awesome排序图标无法正常更新

问题根因与解决方案 #

1. 最高概率原因：sortedAscending 未预先在data中声明 #

Vue 2的响应式系统要求所有需要触发视图更新的属性必须在data选项中提前初始化，如果你在排序逻辑中直接赋值this.sortedAscending但没有提前在data中声明初始值，该属性不会被处理为响应式，自然不会触发模板重渲染。而在DevTools中手动修改值时会强制触发响应式更新，所以会出现手动修改正常、交互触发异常的现象。
解决方案：在data中补全初始声明：

data() {
    return {
      colBeingSorted: -1,
      sortedAscending: true // 按你的需求填初始值即可
    }
}

2. 组件复用导致的更新异常 #

你模板中三个同级的button-component没有设置唯一key，Vue的虚拟DOM Diff算法会默认复用同类型组件，即使v-if条件切换，也只会更新prop而非重新渲染组件实例，若button-component内部没有监听icon prop变化更新视图，就会出现图标不刷新的问题。
解决方案：给每个button-component添加唯一key，强制条件切换时重新渲染组件：

<button-component
  v-if="colBeingSorted != prop"
  key="sort-default"
  :icon="'fas fa-sort'"
  @click="colBeingSorted = prop"
>
<button-component
  v-else-if="colBeingSorted == prop && sortedAscending == true"
  key="sort-up"
  :icon="'fas fa-arrow-up'"
>
<button-component
  v-else-if="colBeingSorted == prop && sortedAscending == false"
  key="sort-down"
  :icon="'fas fa-arrow-down'"
>

优化方案（推荐） #

不需要写三个重复的组件，直接把图标判断逻辑收敛为方法/计算属性，从根源避免组件复用问题：

<th v-for="(column, prop) in header" :key="prop">
  <button-component
    :icon="getSortIcon(prop)"
    @click="colBeingSorted = prop"
  >
  {{ column }}

methods: {
  getSortIcon(prop) {
    if (this.colBeingSorted !== prop) return 'fas fa-sort'
    return this.sortedAscending ? 'fas fa-arrow-up' : 'fas fa-arrow-down'
  }
}

其他排查思路 #

• 检查button-component内部实现：如果组件内部把接收的icon prop赋值给了本地data变量且没有监听prop变化，就会出现prop更新但视图不刷新的问题，修改组件内部用计算属性返回icon值即可。
• 若使用Vue3，检查colBeingSorted、sortedAscending是否正确用ref/reactive声明，有没有漏写.value的情况。

内容的提问来源于stack exchange，提问作者fidgeter