patchFlags.ts 4.0 KB

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