DEV Community

loading...

Discussion on: Write Vue like you write React

Collapse
jfbrennan profile image
Jordan Brennan

The code is clearly worse, so what's the benefit?

Collapse
vuesomedev profile image
Gábor Soós Author

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.

Collapse
jfbrennan profile image
Jordan Brennan • Edited

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>;
  }
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
vuesomedev profile image
Gábor Soós Author

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.