Vue2中无法监听数组和对象的某些变化问题

Vue2 中无法监听数组和对象的某些变化是因为，Vue2 采用的是数据劫持的方式来监听数据变化。Vue2 只能监听对象属性的变化及其添加或删除，但是对于对象的属性值改变、数组的变化（包括数组元素的增减及赋值）等操作是无法监听到的。

解决这个问题的方法是使用 Vue 提供的 $set 和 $delete 方法

$set 方法

Vue 中可以通过 $set 方法来为对象添加属性或者给对象已有的属性赋新值。

语法：Vue.set(object, propertyName/index, value)

• object: 要添加属性的对象。
• propertyName/index：属性名/属性索引，可以是字符串或数字。
• value：属性值。

示例1：动态添加对象属性

<template>
  <div>
    <button @click="add">动态添加属性</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: '小明'
      }
    }
  },
  methods: {
    add() {
      this.$set(this.obj, 'age', 18)
    }
  }
}
</script>

示例2：动态添加对象属性到数组元素

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <span>{{ item }}</span>
        <button @click="addItem(index)">添加属性</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'pear']
    }
  },
  methods: {
    addItem(index) {
      this.$set(this.list, index, {
        name: this.list[index],
        price: 10
      })
    }
  }
}
</script>

$delete 方法

Vue 中可以通过 $delete 方法删除对象的属性或者数组的元素。

语法：Vue.delete(object/array, propertyName/index)

• object/array: 要删除属性/元素的对象/数组。
• propertyName/index：属性名/元素索引，可以是字符串或数字。

示例3：删除对象属性

<template>
  <div>
    <button @click="del">删除属性</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: '小明'
      }
    }
  },
  methods: {
    del() {
      this.$delete(this.obj, 'name')
    }
  }
}
</script>

示例4：删除数组元素

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <span>{{ item }}</span>
        <button @click="delItem(index)">删除元素</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'pear']
    }
  },
  methods: {
    delItem(index) {
      this.$delete(this.list, index)
    }
  }
}
</script>