state.array.push在Vuex突变中是React性的吗?

r6l8ljro  于 2023-04-07  发布在  Vue.js
关注(0)|答案(2)|浏览(137)

我对JS和Vue有点陌生,不太确定我是否正确理解了文档。它说:
由于现代JavaScript的限制(以及Object.observe的放弃),Vue无法检测属性的添加或删除。由于Vue在示例初始化期间执行getter/setter转换过程,因此数据对象中必须存在一个属性,以便Vue转换它并使其成为React性的。
这是否也包括普通数组,或者数组中的元素在JavaScript中不算作“属性”?我想对数组执行state.array.push(data)。这是正确的方法吗?

qyswt5oh

qyswt5oh1#

这在文档的Change Detection Caveats部分有详细介绍。特别是对于数组:
由于JavaScript的限制,... Vue无法检测数组的以下更改:
1.当您直接设置带有索引的项目时,例如vm.items[indexOfItem] = newValue
1.当你修改数组的长度时,例如vm.items.length = newLength
数组原型方法的细节也在列表呈现部分中介绍:
Vue Package 了一个观察数组的mutation方法,这样它们也会触发视图更新。 Package 的方法是:

  1. push()
  2. pop()
  3. shift()
  4. unshift()
  5. splice()
  6. sort()
  7. reverse()
    所以问题的答案 * 是state.array.pushReact?* 是
    但是,请注意,上述警告仅适用于Vue 2
    Vue 3带来了a complete overhaul to the reactivity mechanism,从使用对象getter和setter切换到使用ES6 JavaScript特性Proxy
    这允许更全面的对象更改监视,而用户需要担心的设置和警告更少。
cygmwpex

cygmwpex2#

state.array.push(data)正确。
文档是这样说的:

// If initially you have an object like this
state = {
   obj:{
       key1: ["dummy"]
    }
};
// this will be reactive
state.obj.key1.push("dummy2");

// however if you add a new property to the object like this,
// then whatever you do with obj['key2'] will not be reactive
state.obj['key2'] = ["dummy"];

相关问题