vuejs / vue-vapor

Vue Vapor is a variant of Vue that offers rendering without the Virtual DOM.
https://vapor-repl.netlify.app
MIT License
1.94k stars 94 forks source link

`createIf` doesn't update #257

Closed xiaodong2008 closed 2 months ago

xiaodong2008 commented 4 months ago

createIf only updates when passing a context ref.

const value = ref(true)
const Parent = {
  render() {
    return createComponent(Child)
  },
}
const Child: Component = {
+ setup() {
+   return { value }
+ },
  render(_ctx) {
    return createIf(() => _ctx.value, template(`<div>`), template(`<span>`))
  },
}
const { html, serialize } = define(Parent).render()
value.value = false
await nextTick()
console.log(html()) // Doesn't change when without setup
GaoNeng-wWw commented 4 months ago

Snipaste_2024-06-26_10-59-50

It doesn't look like bug

git commit: 5eb43b08

xiaodong2008 commented 4 months ago

Snipaste_2024-06-26_10-59-50

It doesn't look like bug

git commit: 5eb43b08

Reproduce:

const value = ref(true)
const Parent = {
  render() {
    return createComponent(Child)
  },
}
const Child: Component = {
  render() {
    return createIf(() => value, template(`<div>`), template(`<span>`))
  },
}
const { html, serialize } = define(Parent).render()
value.value = false
await nextTick()
console.log(html()) // Doesn't change when without setup
moushicheng commented 2 months ago

@xiaodong2008 Hello,it seems not a bug in component Child, you must use value.value instead of value to track effect.

  render() {
    return createIf(() => value.value, template(`<div>`), template(`<span>`))
  },

here looks good

image