Vue在数组改变元素时不更新view问题--欢聚时代一面

深藏阁楼爱情的钟 2023-06-29 10:55 28阅读 0赞

因为vue实现双向数据绑定的机制是数据劫持，也就是在所有对象上有个Object.defineProperty()方法，通过监听set，get方法去实现，而数组没有这两个方法，所以就不会更新view

答案在Vue的API手册中[https://cn.vuejs.org/v2/guide/list.html\#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B][https_cn.vuejs.org_v2_guide_list.html_E6_95_B0_E7_BB_84_E6_9B_B4_E6_96_B0_E6_A3_80_E6_B5_8B]

## [数组更新检测][https_cn.vuejs.org_v2_guide_list.html_E6_95_B0_E7_BB_84_E6_9B_B4_E6_96_B0_E6_A3_80_E6_B5_8B] ##

### [变异方法 (mutation method)][_mutation method] ###

Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

*  `push()`
 *  `pop()`
 *  `shift()`
 *  `unshift()`
 *  `splice()`
 *  `sort()`
 *  `reverse()`

你可以打开控制台，然后对前面例子的 `items` 数组尝试调用变异方法。比如 `example1.items.push({ message: 'Baz' })`。

### [替换数组][Link 1] ###

变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 `filter()`、`concat()` 和 `slice()` 。它们不会改变原始数组，而**总是返回一个新数组**。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
      return item.message.match(/Foo/)
    })

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

### [注意事项][Link 2] ###

由于 JavaScript 的限制，Vue **不能**检测以下数组的变动：

1.  当你利用索引直接设置一个数组项时，例如：`vm.items[indexOfItem] = newValue`
2.  当你修改数组的长度时，例如：`vm.items.length = newLength`

举个例子：

var vm = new Vue({
      data: {
        items: ['a', 'b', 'c']
      }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 `vm.items[indexOfItem] = newValue` 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
    Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 [`vm.$set`][vm._set] 实例方法，该方法是全局方法 `Vue.set` 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 `splice`：

vm.items.splice(newLength)

## [对象变更检测注意事项][Link 3] ##

还是由于 JavaScript 的限制，**Vue 不能检测对象属性的添加或删除**：

var vm = new Vue({
      data: {
        a: 1
      }
    })
    // `vm.a` 现在是响应式的
    
    vm.b = 2
    // `vm.b` 不是响应式的

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 `Vue.set(object, propertyName, value)` 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
      data: {
        userProfile: {
          name: 'Anika'
        }
      }
    })

你可以添加一个新的 `age` 属性到嵌套的 `userProfile` 对象：

Vue.set(vm.userProfile, 'age', 27)

你还可以使用 `vm.$set` 实例方法，它只是全局 `Vue.set` 的别名：

vm.$set(vm.userProfile, 'age', 27)

有时你可能需要为已有对象赋值多个新属性，比如使用 `Object.assign()` 或 `_.extend()`。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })

你应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })

## [显示过滤/排序后的结果][Link 4] ##

有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

例如：

data: {
      numbers: [ 1, 2, 3, 4, 5 ]
    },
    computed: {
      evenNumbers: function () {
        return this.numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }

在计算属性不适用的情况下 (例如，在嵌套 `v-for` 循环中) 你可以使用一个方法：

data: {
      numbers: [ 1, 2, 3, 4, 5 ]
    },
    methods: {
      even: function (numbers) {
        return numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }

[https_cn.vuejs.org_v2_guide_list.html_E6_95_B0_E7_BB_84_E6_9B_B4_E6_96_B0_E6_A3_80_E6_B5_8B]: https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
[_mutation method]: https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method
[Link 1]: https://cn.vuejs.org/v2/guide/list.html#%E6%9B%BF%E6%8D%A2%E6%95%B0%E7%BB%84
[Link 2]: https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
[vm._set]: https://cn.vuejs.org/v2/api/#vm-set
[Link 3]: https://cn.vuejs.org/v2/guide/list.html#%E5%AF%B9%E8%B1%A1%E5%8F%98%E6%9B%B4%E6%A3%80%E6%B5%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
[Link 4]: https://cn.vuejs.org/v2/guide/list.html#%E6%98%BE%E7%A4%BA%E8%BF%87%E6%BB%A4-%E6%8E%92%E5%BA%8F%E5%90%8E%E7%9A%84%E7%BB%93%E6%9E%9C