I’ve been working on a Vue 3 project where I have a large number of records (up to a million) that require various computed properties. To optimize performance, I’ve started defining computed properties inside another computed property. This approach seems to work fine in my testing, and it appears to save memory because the inner computed properties are only created when the outer computed is invoked.

Here is a simplified example of what I’m doing:

const _users = reactive(new Map())
function insert(data) {
    return data.map((user) => {
        const record = reactive(user);
        
        record.state = computed(() => {
            return {
                    fullName: computed(() => `${record.firstName} ${record.lastName}`),
                    props1: computed(() => record.a + record.b),
                    props2: computed(() => record.c + record.d),
                    //...more computed props
                }
        });

        _users.set(user.id, record);
    });
}

Observations:

When using this approach with a large number of records (for example, 300,000 records), the Task Manager in the browser shows approximately 300 MB of memory usage. However, if I define the computed properties directly in the object instead of nesting them, the memory usage increases to about 900 MB.

Furthermore, adding a new computed property in this nested manner seems to add around 50 MB of additional memory usage. This suggests that using nested computed properties might be more memory-efficient compared to defining them directly in the object.

Questions:

1. Is there any downside to defining computed properties inside another computed like this?

2. Could this approach potentially lead to memory leaks or performance issues in the long run, especially with a large number of records?

3. Are there any best practices or alternative patterns I should consider when working with a large dataset in Vue 3?

Additional Context:

• My primary goal is to minimize memory usage while still leveraging Vue’s reactivity system.

• The application needs to handle millions of records efficiently, so I’m open to any suggestions that could help with performance optimization.

Thanks in advance for your insights!