v-once whitelist and additional directives

What problem does this feature solve?

If a single child of a v-once parent requires reactivity then we can not use v-once on the parent element but must apply it to all the siblings of the reactive element/component instead. It would be nicer if we could whitelist the reactive children of an element or component that has v-once with some additional proposed directives.

Whitelists are usually a better strategy, especially for security, than blacklists.

What does the proposed API look like?

Ideally we would be able to do this:

<div v-once>
	<h1>static text</h1>
	<h1 v-exclude>{{non-static text}}</h1>
	<h1>static text</h1>
	<h1>static text</h1>
</div>

instead of the following:

<div>
	<h1 v-once>static text</h1>
	<h1>{{non-static text}}</h1>
	<h1 v-once>static text</h1>
	<h1 v-once>static text</h1>
</div>

Some additional directives proposed:

• v-always: takes precedent over v-never and always excludes an element/component and its children
• v-never: takes precedent over v-exclude and never excludes an element/component and its children
• v-exclude: exclude a specific element/component and its children from v-once

[yyx990803]

v-once should really only be used on chunks of template that are significantly large and costly to render, otherwise the benefit would be negligible. Most applications perform perfectly fine without the need for v-once at all. The cost of introducing these additional directives/concepts, both technical and API surface increase, are not really worth it.

[javoski]

@posva See https://github.com/vuejs/vue/blob/dev/src/compiler/optimizer.js#L75, template below will generate static render function.

<div>
    <p class="hey">{{ text }}</p>
    <p><span class="ha">Hello</span></p>
</div>

IMO the costs of implementing this feature is heavily outweigh its benefits.