Vue.js 数据对象categories更新后DOM百分比显示未同步问题咨询

该问题由Vue2响应式检测限制导致：

1. 递归计算过程中给categories数组项新增的百分比属性未被提前纳入响应式系统，Vue2无法检测未初始化的对象属性更新
2. 若递归组件未绑定唯一key，数组深层内容修改时无法触发组件重新渲染
3. 若处理数组时仅修改原数组内部属性未触发引用更新，也可能导致响应式更新失效

方案1：提前初始化响应式属性 #

在ajax请求获取到分类数据时，先递归遍历所有层级的分类项，提前初始化百分比字段，保证属性从一开始就被响应式系统检测：

// ajax请求成功回调内的逻辑
const rawCats = response.data.categories
function initPercentField (arr) {
  arr.forEach(item => {
    // 提前初始化你用到的百分比字段，初始值设为0即可
    item.percentage = 0
    if (item.children?.length) initPercentField(item.children)
  })
}
initPercentField(rawCats)
this.categories = rawCats

方案2：使用$set新增响应式属性 #

如果不方便提前初始化属性，在calculate方法递归计算时，用this.$set给对象新增属性，确保新增的属性是响应式的：

// calculate方法内的递归逻辑
function calc (arr) {
  arr.forEach(item => {
    const percent = (item.rowtotal / this.main_total) * 100
    // 不要直接赋值 item.percentage = percent
    this.$set(item, 'percentage', percent)
    if (item.children?.length) calc.call(this, item.children)
  })
}
calc.call(this, this.categories)

方案3：强制触发数组引用更新+绑定唯一key #

如果递归组件仍无法触发更新，在calculate方法处理完数组后，生成新的数组引用赋值给this.categories，同时给递归组件绑定唯一key值：

// calculate方法最后赋值时，生成新的数组引用
this.categories = JSON.parse(JSON.stringify(处理后的分类数组))

递归组件渲染时绑定唯一key：

<your-recursive-row 
  v-for="item in categories"
  :key="item.id" <!-- 必须用每行唯一标识作为key，禁止用数组索引 -->
  :item="item"
/>

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