组件中的 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更新该值。

Answer 2

两件事情：resources: Vue.reactive({value:[]})可以通过使整个商店反应来避免data()是一个本地副本，但你真的想要一个真实的单一来源（即商店），所以通过计算属性访问它（基本上是 Vuex 的工作方式）。var self = currentClassInstance // thisself.store = Vue.reactive({&nbsp; resources: [],&nbsp; setResources(resources) {&nbsp; &nbsp; this.resources = resources&nbsp; },&nbsp;})const app_draw = {&nbsp; computed: {&nbsp; &nbsp; resources() {&nbsp; &nbsp; &nbsp; return self.store.resources&nbsp; &nbsp; }&nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; template: '<div v-for="(resource, key) in resources" :data-key="key">{{resource.name}}</div>'};

Answer 3

一个快速的方法const resources = reactive([]);// set resourcesresources.length = 0;resources.push(...items)