Discussion on: Write Vue like you write React

[Gábor Soós]

JSX or the functional api?

Can you. elaborate on what is worse? I feel JSX as a different approach, not a better/worse one - different people different tastes.

[Jordan Brennan]

One reason devs like Vue is because it's not like React. So what is the benefit of writing this React-like component:

import { defineComponent, ref, watchEffect } from 'vue';

export const Counter = defineComponent({
  props: ['limit', 'onLimit'],
  setup(props) {
    const count = ref(0);
    const handler = () => count.value++;

    watchEffect(
      () => (count.value >= props.limit) ? props.onLimit() : null
    );

    return () => <button type="button" onClick={handler}>
      Count: {count.value}
    </button>;
  }
});

compared to regular Vue:

<template>
<button type="button" v-on:click="increment">Count: {{ count }}</button>
</template>

<script>
export default {
  props: ['limit', 'onLimit'],
  data() {
    return { count: 0 }
  },

  watch: {
    count: function(count) { count >= this.limit && this.onLimit() }
  },

  methods: {
    increment() { this.count++ }
  }
}
</script>

[Gábor Soós]

You can extract the business logic as a plain function. The JSX templating is just for the experiment. JSX in many cases suffers performance penalty compared to Vue templates.