search

gloriasoft / veaury

Use React in Vue3 and Vue3 in React, And as perfect as possible!
MIT License
1.31k stars 83 forks source link

watch ref does not work for applyPureReactInVue children of applyPureReactInVue #123

Closed nhaustov closed 5 months ago

nhaustov commented 5 months ago

After the fix to #122, watch works correctly for Vue children, however it still does not work if ref is on applyPureReactInVue component. This can be reproduced by the following modified code in dev-project-vue3. box4 watch does not fire.

    <PureBox>
      <PureBox v-if="show === 1" ref="box4">box4 show===1</PureBox>
      <PureBox v-if="show === 2" ref="box4">box4 show===2</PureBox>
    </PureBox>

Full diff: diff.txt

nhaustov commented 5 months ago

Thank you for fixing #122. In my bigger application, something still does not work. The difficulty is that it works in dev build, but not in production build. I tried to reproduce it and came up with the above problem, though still not sure if it is the root cause.

nhaustov commented 5 months ago

As a side note, is it possible to use dev-project-vue3 production build? I tried to add build:vue target (see diff) and it builds, however loading it in the browser leads to an exception. runtime-core.esm-bundler.js:262 TypeError: Cannot read properties of null (reading 'refs') at xr (runtime-core.esm-bundler.js:4537:22) at g (runtime-core.esm-bundler.js:5377:7) at c.s [as fn] (runtime-core.esm-bundler.js:6011:11) at c.run (reactivity.esm-bundler.js:177:19) at L.e.update (runtime-core.esm-bundler.js:6135:16) at L (runtime-core.esm-bundler.js:6145:5) at R (runtime-core.esm-bundler.js:5913:7) at A (runtime-core.esm-bundler.js:5867:9) at g (runtime-core.esm-bundler.js:5335:11) at O (runtime-core.esm-bundler.js:5583:7)

devilwjp commented 5 months ago

@nhaustov Sorry, I haven't used dev-project-vue3 for production builds yet. Until I find the cause of your problem, I temporarily redirected version 2.3.16 to the latest version.

devilwjp commented 5 months ago

@nhaustov Try 2.3.18-beta.0, and you can also get the branch fix_123, start the project dev-project-vue3 to test the route /watchref, and the browser console must return the results and everything is correct. And the project has been built in the production environment and tested in the production environment.

nhaustov commented 5 months ago

Thank you! I confirm that this fixes the problem and also the problem that we had in a bigger app in production build.