patchFlags.ts 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /**
  2. * Patch flags are optimization hints generated by the compiler.
  3. * when a block with dynamicChildren is encountered during diff, the algorithm
  4. * enters "optimized mode". In this mode, we know that the vdom is produced by
  5. * a render function generated by the compiler, so the algorithm only needs to
  6. * handle updates explicitly marked by these patch flags.
  7. *
  8. * Patch flags can be combined using the | bitwise operator and can be checked
  9. * using the & operator, e.g.
  10. *
  11. * ```js
  12. * const flag = TEXT | CLASS
  13. * if (flag & TEXT) { ... }
  14. * ```
  15. *
  16. * Check the `patchElement` function in '../../runtime-core/src/renderer.ts' to see how the
  17. * flags are handled during diff.
  18. */
  19. export const enum PatchFlags {
  20. /**
  21. * Indicates an element with dynamic textContent (children fast path)
  22. */
  23. TEXT = 1,
  24. /**
  25. * Indicates an element with dynamic class binding.
  26. */
  27. CLASS = 1 << 1,
  28. /**
  29. * Indicates an element with dynamic style
  30. * The compiler pre-compiles static string styles into static objects
  31. * + detects and hoists inline static objects
  32. * e.g. style="color: red" and :style="{ color: 'red' }" both get hoisted as
  33. * const style = { color: 'red' }
  34. * render() { return e('div', { style }) }
  35. */
  36. STYLE = 1 << 2,
  37. /**
  38. * Indicates an element that has non-class/style dynamic props.
  39. * Can also be on a component that has any dynamic props (includes
  40. * class/style). when this flag is present, the vnode also has a dynamicProps
  41. * array that contains the keys of the props that may change so the runtime
  42. * can diff them faster (without having to worry about removed props)
  43. */
  44. PROPS = 1 << 3,
  45. /**
  46. * Indicates an element with props with dynamic keys. When keys change, a full
  47. * diff is always needed to remove the old key. This flag is mutually
  48. * exclusive with CLASS, STYLE and PROPS.
  49. */
  50. FULL_PROPS = 1 << 4,
  51. /**
  52. * Indicates an element with event listeners (which need to be attached
  53. * during hydration)
  54. */
  55. HYDRATE_EVENTS = 1 << 5,
  56. /**
  57. * Indicates a fragment whose children order doesn't change.
  58. */
  59. STABLE_FRAGMENT = 1 << 6,
  60. /**
  61. * Indicates a fragment with keyed or partially keyed children
  62. */
  63. KEYED_FRAGMENT = 1 << 7,
  64. /**
  65. * Indicates a fragment with unkeyed children.
  66. */
  67. UNKEYED_FRAGMENT = 1 << 8,
  68. /**
  69. * Indicates an element that only needs non-props patching, e.g. ref or
  70. * directives (onVnodeXXX hooks). since every patched vnode checks for refs
  71. * and onVnodeXXX hooks, it simply marks the vnode so that a parent block
  72. * will track it.
  73. */
  74. NEED_PATCH = 1 << 9,
  75. /**
  76. * Indicates a component with dynamic slots (e.g. slot that references a v-for
  77. * iterated value, or dynamic slot names).
  78. * Components with this flag are always force updated.
  79. */
  80. DYNAMIC_SLOTS = 1 << 10,
  81. /**
  82. * Indicates a fragment that was created only because the user has placed
  83. * comments at the root level of a template. This is a dev-only flag since
  84. * comments are stripped in production.
  85. */
  86. DEV_ROOT_FRAGMENT = 1 << 11,
  87. /**
  88. * SPECIAL FLAGS -------------------------------------------------------------
  89. * Special flags are negative integers. They are never matched against using
  90. * bitwise operators (bitwise matching should only happen in branches where
  91. * patchFlag > 0), and are mutually exclusive. When checking for a special
  92. * flag, simply check patchFlag === FLAG.
  93. */
  94. /**
  95. * Indicates a hoisted static vnode. This is a hint for hydration to skip
  96. * the entire sub tree since static content never needs to be updated.
  97. */
  98. HOISTED = -1,
  99. /**
  100. * A special flag that indicates that the diffing algorithm should bail out
  101. * of optimized mode. For example, on block fragments created by renderSlot()
  102. * when encountering non-compiler generated slots (i.e. manually written
  103. * render functions, which should always be fully diffed)
  104. * OR manually cloneVNodes
  105. */
  106. BAIL = -2
  107. }
  108. /**
  109. * dev only flag -> name mapping
  110. */
  111. export const PatchFlagNames = {
  112. [PatchFlags.TEXT]: `TEXT`,
  113. [PatchFlags.CLASS]: `CLASS`,
  114. [PatchFlags.STYLE]: `STYLE`,
  115. [PatchFlags.PROPS]: `PROPS`,
  116. [PatchFlags.FULL_PROPS]: `FULL_PROPS`,
  117. [PatchFlags.HYDRATE_EVENTS]: `HYDRATE_EVENTS`,
  118. [PatchFlags.STABLE_FRAGMENT]: `STABLE_FRAGMENT`,
  119. [PatchFlags.KEYED_FRAGMENT]: `KEYED_FRAGMENT`,
  120. [PatchFlags.UNKEYED_FRAGMENT]: `UNKEYED_FRAGMENT`,
  121. [PatchFlags.NEED_PATCH]: `NEED_PATCH`,
  122. [PatchFlags.DYNAMIC_SLOTS]: `DYNAMIC_SLOTS`,
  123. [PatchFlags.DEV_ROOT_FRAGMENT]: `DEV_ROOT_FRAGMENT`,
  124. [PatchFlags.HOISTED]: `HOISTED`,
  125. [PatchFlags.BAIL]: `BAIL`
  126. }