pref(runtime-vapor): refactor apiCreateIf

[edison1105]

• for this template code

  <h1 v-if="msg">{{ msg }}</h1>
  <span v-else-if="foo">foo</span>
  <span v-else>bar</span>

• current compiled code - call createIf twice, each v-else-if generates a new createIf call

  const n0 = _createIf(() => (_ctx.msg), () => {
    const n2 = t0()
    let _msg
    _renderEffect(() => _setText(n2, _ctx.msg))
    return n2
  }, () => _createIf(() => (_ctx.foo), () => {
    const n4 = t1()
    return n4
  }, () => {
    const n7 = t2()
    return n7
  }))

• compiled code with this PR - call createIf only once, reduce overhead

  const n0 = _createIf(() => (_ctx.msg) ? () => {
    const n2 = t0()
    _renderEffect(() => _setText(n2, _ctx.msg))
    return n2
  } : _ctx.foo ? () => {
    const n4 = t1()
    return n4
  } : () => {
    const n7 = t2()
    return n7
  })

---

analysis

Initial Render

Before

• Each createIf internally call renderEffect and create a new DynamicFragment instance

After

• only one DynamicFragment instance
• only one renderEffect call

Re-Render(Update)

Before

• Nested createIf structure ensures only necessary conditions are evaluated
• Each v-else-if branch:
  • Maintains its own DynamicFragment
  • Creates separate renderEffect for dynamic content
  • EffectScope stop/create when branches switch

After

• All conditions are evaluated in sequence (seems like a drawback)
• However, in reality:
  • Condition evaluation overhead is minimal (simple variable access or basic operations)
  • Thanks to short-circuit evaluation, not all conditions will be evaluated
  • Most importantly
    • only one DynamicFragment needs to be maintained
    • only one renderEffect

Trade-offs:

• Added overhead:
  • May evaluate a few more condition expressions
  • This overhead is lightweight and immediate
• Reduced overhead:
  • Less memory allocation
  • Fewer object creations

[Doctor-wu]

In the previous implementation, reactive data has an update boundary for each createIf, which is dropped in this PR (since we merge all reactive stuff into one createIf).

Considering this case

  <h1 v-if="msg">{{ msg }}</h1>
  <span v-else-if="foo">foo</span>
  <span v-else-if="foo1">foo1</span>
  <span v-else-if="foo2">foo2</span>
  <span v-else-if="foo3">foo3</span>
  <span v-else-if="foo4">foo4</span>
  <span v-else>bar</span>

If foo4 changed, we re-calc this template in the previous impl,

  <span v-else-if="foo4">foo4</span>
  <span v-else>bar</span>

but now we need re-calc the whole v-if-else chain in this PR.
We may need to do some bench on this.