Adding Computed Property Destructuring to Vue

[bosens-China]

Background

In Vue 3, computed properties are commonly used as reactive tools to derive new data from existing state. However, when a computed property returns an object, directly destructuring it results in the loss of reactivity for the destructured properties. To maintain reactivity, developers currently have to manually create new computed properties for each field, as shown below:

const x = computed(() => ({ a: 1, b: 2 }));
const a = computed(() => x.value.a); // Manually create for each property
const b = computed(() => x.value.b);

This approach becomes verbose and cumbersome, especially when dealing with objects with many properties or deeply nested structures. It reduces code readability and development efficiency.

---

Significance and Usage

Significance:

1. Simplified Code: Supporting direct destructuring of computed properties can eliminate redundant boilerplate code and streamline logic.
2. Improved Readability: Developers can destructure computed properties like regular objects, while maintaining reactivity, which enhances code clarity.
3. Support for Nested Structures: Not only for flat objects, but it should also allow reactive destructuring of deeply nested structures, reducing the complexity of manual handling.

Usage:
With the proposed improvement, computed properties can be destructured directly. Here's an example:

const { a, b } = computed(() => ({ a: 1, b: 2 }));
console.log(a.value); // 1
console.log(b.value); // 2

Support for Nested Destructuring:
If a computed property returns a nested object, it should also allow nested destructuring, with all destructured properties remaining reactive:

const { user: { name, age }, isActive } = computed(() => ({
  user: { name: 'Alice', age: 25 },
  isActive: true,
}));

console.log(name.value); // 'Alice'
console.log(age.value);  // 25
console.log(isActive.value); // true

Completeness and Compatibility:

• All destructured properties remain fully reactive and compatible with Vue’s reactivity system.
• This unified approach would work seamlessly for both shallow and deeply nested structures, aligning with developers’ intuitive usage.

By introducing this feature, Vue’s computed properties would become even more developer-friendly, reducing redundancy and maintenance overhead while enhancing productivity and code readability.

[Demivan]

This would be impossible to type with TypeScript.

You would need computed to return a different object when destructuring.

const x = computed(() => ({ a: 1, b: 2 }));
// { value: { a: number, b: number } }

const { a, b } = computed(() => ({ a: 1, b: 2 }));
// { a: { value: number }, b: { value: number } }

[bosens-China]

This would be impossible to type with TypeScript.

You would need computed to return a different object when destructuring.

const x = computed(() => ({ a: 1, b: 2 }));
// { value: { a: number, b: number } }

const { a, b } = computed(() => ({ a: 1, b: 2 }));
// { a: { value: number }, b: { value: number } }

I think it's possible to restrict some of the usage, for example, there are constraints on the definition of props now

[posva]

This has a few deal breakers: it's a huge breaking change, it an inconsistent behavior, and can be implemented in user land (Nested support can be achieved with Proxies). It could maybe also be a compile time but would require a different kind of computed() for types. If you want to go further I would suggest you to write a version that works and propose it as a PR at https://vue-macros.dev

[bosens-China]

This has a few deal breakers: it's a huge breaking change, it an inconsistent behavior, and can be implemented in user land (Nested support can be achieved with Proxies). It could maybe also be a compile time but would require a different kind of computed() for types. If you want to go further I would suggest you to write a version that works and propose it as a PR at https://vue-macros.dev

After reading the release of version 3.5, I personally think that as a compilation macro, it is more suitable and can also reduce incompatibility.
Moreover, it will not cause any additional performance loss