组件中的 Vuejs3 反应数组

Question

我尝试在组件中使用反应数组。它适用于对象，但不适用于对象数组。数组更新时如何更新视图？var self = currentClassInstance // thisself.store = {    resources: Vue.reactive([]),    test:  Vue.reactive({ test: 'my super test' }),    setResources(resources) {        // this one doesn't update the view. ?        this.resources = resources    },     setResources(resources) {        // this one update the view        this.test.test = "test ok"    },  }....const app_draw = {    data() {        return {            resources: self.store.resources,            test: self.store.test,        }    },           updated() {        // triggered for "test" but not for "resources"        console.log('updated')    },           template: '<div v-for="(resource, key) in resources" :data-key="key">{{resource.name}}</div>'};....

Answer 1

根据官方文档：

Reactive：
获取一个对象并返回原始对象的反应代理。这等同于 2.x 的Vue.observable()
...。
反应式转换是“深度”的：它影响所有嵌套属性。在基于 ES2015 Proxy 的实现中，返回的代理不等于原始对象。建议专门使用反应式代理并避免依赖原始对象。

我建议将数组分配给反应参数中名为 value 的字段，就像您所做的那样test：

resources: Vue.reactive({value:[]}),

然后用于resources.value=someVal更新该值。

Answer 2

两件事情：

• resources: Vue.reactive({value:[]})可以通过使整个商店反应来避免

• data()是一个本地副本，但你真的想要一个真实的单一来源（即商店），所以通过计算属性访问它（基本上是 Vuex 的工作方式）。

var self = currentClassInstance // this

self.store = Vue.reactive({

  resources: [],

  setResources(resources) {

    this.resources = resources

  }, 

})

const app_draw = {

  computed: {

    resources() {

      return self.store.resources

    }

  }

       

  template: '<div v-for="(resource, key) in resources" :data-key="key">{{resource.name}}</div>'

};

Answer 3

一个快速的方法

const resources = reactive([]);

// set resources

resources.length = 0;

resources.push(...items)