Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Editor Reactivity #1804

Merged
merged 1 commit into from
Aug 26, 2021
Merged

Conversation

nVitius
Copy link
Contributor

@nVitius nVitius commented Aug 26, 2021

When using the useEditor composable, the Ref that is returned observes changes on the Editor's own properties, causing any effects that reference editor to trigger unnecessarily.

Even though the Editor's constructor uses markRaw, using ref wraps your value in an object and makes it reactive internally. You can see this happening here: https://github.com/vuejs/composition-api/blob/main/src/reactivity/ref.ts#L82
The check for isRaw only happens on the parent, which in this case is the wrapper object.

Using shallowRef instead allows us to create effects that trigger when the Editor is instantiated (in the onMounted) while preventing reactivity of the Editor's properties. From the Vue docs:

Creates a ref that tracks its own .value mutation but doesn't make its value reactive.

@philippkuehn philippkuehn merged commit 46701fd into ueberdosis:main Aug 26, 2021
@philippkuehn
Copy link
Contributor

great! thanks for the explanation!

@nVitius nVitius deleted the fix/editor_reactive branch August 26, 2021 12:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants