vuejs/vue-vapor

[Bug] defineComponent seems unable to `dynamically` return Block

GaoNeng-wWw opened this issue · 3 comments

GaoNeng-wWw commented

There seem to be some points where the behavior differs from the original.

// not vapor
import {defineComponent, ref, h} from 'vue';
const comp = defineComponent({
  setup(){
    const visible = ref(false);
    setTimeout(()=>{
      visible.value = true
    }, 2000)
    return ()=>{
      // 1. false
     //  2. true
      console.log(visible.value)
      if (visible.value){
        return h('span', null, 'visible!')
      } else {
        return h('span', 'not visible')
      }
    };
  }
})

but in vapor mode

// vapor mode
defineComponent({
  setup(){
    const visible = ref(false);
    setTimeout(()=>{
      visible.value = true
    }, 2000)
   // 1. false
   if (visible.value){
     return createText(['visible']);
   } else {
     return createText(['not visible'])
   }
  }
})
sxzz commented

It should be createTextNode(() => visible.value ? 'visible' : 'not visible'])

  • ❤️1
GaoNeng-wWw commented

It should be createTextNode(() => visible.value ? 'visible' : 'not visible'])

Thank you for your answer, but I'm sorry I didn't explain it clearly. Please allow me to explain again. In Vue, defineComponent can dynamically return other components. But it is not supported by steam. Is there a problem with my usage method?

vvv Demo

const comp = defineComponent({
      setup(){
        const visible = ref(false);
        setTimeout(() => {
          visible.value = true;
        }, 500);
        const comp1 = defineComponent({
          setup(){
            return createTextNode(['visible'])
          }
        });
        const comp2 = defineComponent({
          setup(){
            return createTextNode(['not visible'])
          }
        });
        return createComponent(visible.value ? comp1 : comp2) //always return comp2
      }
    })