组件中的Vuejs3反应式数组

Question

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

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

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

Answer 1

根据官方文档：

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

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

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

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