enum PatchFlags

Patch flags are optimization hints generated by the compiler. when a block with dynamicChildren is encountered during diff, the algorithm enters "optimized mode". In this mode, we know that the vdom is produced by a render function generated by the compiler, so the algorithm only needs to handle updates explicitly marked by these patch flags.

Patch flags can be combined using the \| bitwise operator and can be checked using the & operator, e.g.

const flag = TEXT | CLASS
if (flag & TEXT) { ... }

Check the patchElement function in '../../runtime-core/src/renderer.ts' to see how the flags are handled during diff.

Fields

BAIL

A special flag that indicates that the diffing algorithm should bail out of optimized mode. For example, on block fragments created by renderSlot() when encountering non-compiler generated slots (i.e. manually written render functions, which should always be fully diffed) OR manually cloneVNodes

Declaration
BAIL = -2

CLASS

Indicates an element with dynamic class binding.

Declaration
CLASS = 2

DEV_ROOT_FRAGMENT

Indicates a fragment that was created only because the user has placed comments at the root level of a template. This is a dev-only flag since comments are stripped in production.

Declaration
DEV_ROOT_FRAGMENT = 2048

DYNAMIC_SLOTS

Indicates a component with dynamic slots (e.g. slot that references a v-for iterated value, or dynamic slot names). Components with this flag are always force updated.

Declaration
DYNAMIC_SLOTS = 1024

FULL_PROPS

Indicates an element with props with dynamic keys. When keys change, a full diff is always needed to remove the old key. This flag is mutually exclusive with CLASS, STYLE and PROPS.

Declaration
FULL_PROPS = 16

HOISTED

Indicates a hoisted static vnode. This is a hint for hydration to skip the entire sub tree since static content never needs to be updated.

Declaration
HOISTED = -1

HYDRATE_EVENTS

Indicates an element with event listeners (which need to be attached during hydration)

Declaration
HYDRATE_EVENTS = 32

KEYED_FRAGMENT

Indicates a fragment with keyed or partially keyed children

Declaration
KEYED_FRAGMENT = 128

NEED_PATCH

Indicates an element that only needs non-props patching, e.g. ref or directives (onVnodeXXX hooks). since every patched vnode checks for refs and onVnodeXXX hooks, it simply marks the vnode so that a parent block will track it.

Declaration
NEED_PATCH = 512

PROPS

Indicates an element that has non-class/style dynamic props. Can also be on a component that has any dynamic props (includes class/style). when this flag is present, the vnode also has a dynamicProps array that contains the keys of the props that may change so the runtime can diff them faster (without having to worry about removed props)

Declaration
PROPS = 8

STABLE_FRAGMENT

Indicates a fragment whose children order doesn’t change.

Declaration
STABLE_FRAGMENT = 64

STYLE

Indicates an element with dynamic style The compiler pre-compiles static string styles into static objects + detects and hoists inline static objects e.g. style="color: red" and :style="{ color: 'red' }" both get hoisted as const style = { color: 'red' } render() { return e('div', { style }) }

Declaration
STYLE = 4

TEXT

Indicates an element with dynamic textContent (children fast path)

Declaration
TEXT = 1

UNKEYED_FRAGMENT

Indicates a fragment with unkeyed children.

Declaration
UNKEYED_FRAGMENT = 256