vue.set向对象里增加多层数组属性不生效问题及解决

首先我们来分析一下“vue.set向对象里增加多层数组属性不生效问题”的原因：

Vue.js在处理对象和数组时，会对其进行深拷贝。Vue.js中使用Object.defineProperty方法将属性转化为getter/setter，从而在获取属性值和设置属性值时，都可监听到并作出反应。但是在对象和数组中需要添加新属性或元素时，Vue.js就无法进行响应处理，从而导致数据不会更新。

因此，我们需要使用Vue.js提供的vue.set方法，其可实现在对象和数组中添加新属性或元素，同时仍然保持响应性。不过在使用这个方法时，需要特别注意中间的key路径需要存在，如果中间某一层路径不存在，是无法添加新属性的，因此在需要向深层次嵌套的对象或数组中添加新属性时，需要特别注意处理中间路径的问题。

下面我们来看两个示例说明：

示例一：

<template>
  <div>
    <h2>商品列表：</h2>
    <ul>
      <li v-for="(product, index) in products" :key="product.id">
        <span>商品名称：{{ product.name }}</span>
        <button @click="addSpec(index)">添加规格</button>
        <ul>
          <li v-for="spec in product.specs" :key="spec.id">{{ spec.name }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  data() {
    return {
      products: [
        {
          id: 1,
          name: '商品1',
          specs: [
            { id: 1, name: '规格1' },
            { id: 2, name: '规格2' }
          ]
        },
        {
          id: 2,
          name: '商品2',
          specs: [
            { id: 3, name: '规格3' },
            { id: 4, name: '规格4' }
          ]
        }
      ]
    }
  },
  methods: {
    addSpec(index) {
      let spec = { id: 5, name: '规格5' }
      // 以下代码无法实现新增 spec 属性
      // this.products[index].specs.push(spec)
      // 以下代码可实现新增 spec 属性
      this.$set(this.products[index].specs, this.products[index].specs.length, spec)
    }
  }
}
</script>

在上面的示例中，我们在商品列表中加了一个“添加规格”的按钮，点击后会向该商品的规格列表中添加新规格。

由于规格列表是一个数组，所以我们需要使用vue.set方法来添加新规格，而不是直接使用push方法来添加。注意，在使用vue.set方法时，需要传入三个参数，分别是被操作的数组、新增元素的下标以及新增元素本身。

示例二：

<template>
  <div>
    <h2>学生成绩：</h2>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>语文</th>
          <th>数学</th>
          <th>英语</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students" :key="student.id">
          <td>{{ student.name }}</td>
          <td>{{ student.score.chinese }}</td>
          <td>{{ student.score.math }}</td>
          <td>{{ student.score.english }}</td>
          <td><button @click="addScore(index)">添加成绩</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'ScoreList',
  data() {
    return {
      students: [
        {
          id: 1,
          name: '张三',
          score: {
            chinese: 80,
            math: 90,
            english: 70
          }
        },
        {
          id: 2,
          name: '李四',
          score: {
            chinese: 85,
            math: 75,
            english: 90
          }
        }
      ]
    }
  },
  methods: {
    addScore(index) {
      let score = { chinese: 95, math: 80, english: 85 }
      // 以下代码无法实现新增 score 属性
      // this.students[index].score = score
      // 以下代码可实现新增 score 属性
      this.$set(this.students[index], 'score', score)
    }
  }
}
</script>

在上面的示例中，我们在成绩表格中加了一个“添加成绩”的按钮，点击后会修改该学生的成绩信息。

由于成绩信息是一个嵌套对象，所以我们需要使用vue.set方法来添加新成绩，而不是直接修改score属性的值。注意，在使用vue.set方法时，需要传入两个参数，分别是被操作的对象和新增属性的名称。

通过以上两个示例，我们可以看到，在向多层嵌套的对象或数组中添加新属性时，如果直接使用push方法或赋值语句来添加新元素，Vue.js的响应机制是无法正常工作的。此时，我们必须使用Vue.js提供的vue.set方法来进行添加新元素的操作，才能确保数据的响应性。