组件中的Vuejs3反应数组答案

【问题标题】：Vuejs3 reactive array in a component组件中的Vuejs3反应数组
【发布时间】：2021-02-01 14:18:13
【问题描述】：

我尝试在组件中使用反应式数组。
它适用于对象，但不适用于对象数组。

数组更新时如何更新视图？

var self = currentClassInstance // this

self.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>'
};
....

【问题讨论】：

我会尝试使用代理... this.resources = 资源擦除 Vue.reactive，它不能工作

标签： javascript vue.js vuejs3 vue-composition-api

【解决方案1】：

根据official docs：

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

我建议像使用test 一样将数组分配给反应参数内的名为 value 的字段：

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

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

【讨论】：

【解决方案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>'
};

【讨论】：