DEV Community


Discussion on: Write Vue like you write React

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++;

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

    return () => <button type="button" onClick={handler}>
      Count: {count.value}
Enter fullscreen mode Exit fullscreen mode

compared to regular Vue:

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

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

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

  methods: {
    increment() { this.count++ }
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.