search

vuejs / composition-api

Composition API plugin for Vue 2
https://composition-api.vuejs.org/
MIT License
4.19k stars 343 forks source link

Shallow unwrapping creates a feature parity problem with Vue3 #536

Closed Aaron-Pool closed 3 years ago

Aaron-Pool commented 3 years ago

Release beta.7 integrated the breaking change introduced by vue 3 release here. Unfortunately, this creates an issue in using the composition-api in vue 2.

Evan has 2 suggested fixes in the release notes for people using a plain object with refs:

  1. Wrap the whole thing in reactive, which results in identical behavior as before. However, this doesn't work in the vue 2 api, as reactive mutates the underlying object, meaning those refs are unwrapped everywhere that they were being used or injected, and not just unwrapped in the newly assigned variable,

  2. Just destructure the refs and return them specifically. Evan mentions that the only reason most people bundle refs together in a parent object is because of the verbosity of the return statement otherwise, which can me mitigated quite well by the new <script setup> RFC. This is a fair point, however, the <script setup> functionality doesn't exist in Vue 2, so that is, once again, not an option for Vue2 users.

I'm honestly not sure what the answer here is, but that breaking change kind of put the users of this api in a bit of a maintainability bind. Any advice from the maintainers here would be greatly appreciated @pikax @antfu

pikax commented 3 years ago
  • Wrap the whole thing in reactive, which results in identical behavior as before. However, this doesn't work in the vue 2 api, as reactive mutates the underlying object, meaning those refs are unwrapped everywhere that they were being used or injected, and not just unwrapped in the newly assigned variable

With the vue2 limitations it makes it really difficult, unfortunately I don't have a good solution, it would be possible to create an copy of the object and unwarp the values (similar to reactive, but without original object mutation), but that would be an api which wouldn't exist in vue3 and it would also possibly add a few more issues.

Aaron-Pool commented 3 years ago

@pikax Has anyone considered backporting the <script setup> option to the vue 2 compiler? I've looked into doing the webpack loader to do the transform with jscodeshift, which seems like it would be pretty trivial, but the typing seems like it would be pretty challenging to get to work properly, at least in an even remotely ergonomic fashion.

pikax commented 3 years ago

That SFC is still in RFC https://github.com/vuejs/rfcs/pull/182

I wouldn't expect it to be ported until is merged

antfu commented 3 years ago

This is not a part of this plugin, should be handled by vue-compiler. You can continue the discussion in the corresponding RFC or the vuejs/vue repo. Closing for now. Thanks.