CODEWITHSUNDEEP
vue.js
thephpdev
thephpdev

Reputation: 1117

Conditional v-once directive

I'm working on an app that uses Vue. It is a kind of document editor that allows editing of content.

There's a filmstrip in a sidebar displaying the entirety of the document, and a viewport in the center displaying the current page/spread.

On large documents with 100+ pages, I'd like to throttle the number of updates allowed through to the filmstrip component as it gets a little laggy on resize and when the JS controlled layouts in pages all have to resize simultaneously when global fields are changed etc.

There's a data structure representing the document's content, which is rendered by Vue components in the viewport and the filmstrip.

I could maintain two data structures and only update the data structure used in the filmstrip 1000ms after the last user interaction.

However, it feels like there could be a better way.

Vue has a directive called v-once, which looks promising, however, I can't find out if that can be set conditionally.

If I could, then I could set a timeout on change, and clear it if a change occurs before the timeout ends, and then momentarily unset v-once, then on next tick, add it back on again so that rendering pauses.

If there's a way of doing this, I'd love to know.

Upvotes: 2

Views: 1047

Answers (1)

DobleL
DobleL

Reputation: 3918

Here Proposal: Allowing v-once to accept a boolean flag is very clear, you can't set v-once dynamically. Also there is an example of one way to combine v-if and v-once to achieve the result you want.

Excerpt from the link

v-once is used for static content. v-once tell the compiler don't add any responsive functionalities to save cpu time. Otherwise, if the content is responsive, no methods could be used to save this kind of cpu time.

Hope it helped

Upvotes: 4

Related Questions