Allowing v-once to accept a boolean flag

[kevmo314]

What problem does this feature solve?

Right now, v-once will render the component on creation, which is great if the data is available, however it would be nice to be able to allow the component to rerender until async data is available, then freeze the contents so it no longer impacts performance.

What does the proposed API look like?

Allow v-once to take a boolean parameter, eg :v-once="completed", and if this parameter is truthy, the default v-once behavior is applied, otherwise v-once is ignored.

[posva]

I'm not sure this is actually possible. I guess, we could move the generated render function to statics once the value is true but the problem behind the FR isn't that clear to me. Isn't this what you're trying to achieve http://jsfiddle.net/oLhd2qwx/

[kevmo314]

Yes, that's essentially what I'm trying to achieve, but that seems like it's one extra unnecessary listener, since in the async data case, visible will never be false again?

The case I ran into this providing a nice semantic is if I had an observable of status messages, suppose I had an Observable.of('Initializing', 'Pending', 'Doing stuff', 'Completed') then I could use the following template to render:

<div :v-once="status == 'Completed'">
  {{status}}
</div>

This seems a lot simpler than

<div v-if="status != 'Completed'>
  {{status}}
</div>
<div v-else v-once>
  {{status}}
</div>

and it's a lot clearer what the intent is, since it's obvious that status == 'Completed' is the "final" status.

Also, I acknowledge that rendering a {{status}} is trivial, another example that's less trivial is a streaming updating of a list of objects that, once finalized, you don't want to keep updating. :)

[posva]

If the data never updates again, you probably don't need to optimise anything else
I don't think the intent is clear (btw it would be v-once="status" without the :) because it can be read as once this condition is met, render this, so, basically an if
I'm not sure how much extra work is needed to achieve this, but keep in mind we don't want to add any syntax sugar to Vue for the moment because we want to keep the lib small. We may revisit this in the future though, but for the moment, because we can already achieve this using an if/else, we'll proly pass on this

[kevmo314]

Perhaps a .when modifier could be used then? v-once.when="status" seems less ambiguous. Although I can't speak to the dev effort, thanks for the consideration. :)

[Plasmatium]

Hi @kevmo314 ,
v-once is used for static content, doc. 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. Use status to control {{contents}}, if status is done, and contents will never change, then the component will never invokes the responsive code in watcher. There is no performance lost, "the code not running is the fastest code".

[yyx990803]

As @Plasmatium pointed out, v-once is essentially a compiler optimization hint and it doesn't really make sense it make it dynamic. The syntax also makes it feel a bit confusing.

Also, v-once is meant for optimizing large trees of plain element nodes. If there are nested components inside, each component already serves as an update boundary - if the props passed to the components did not change, no updates will happen downstream.