Question 49610 in Javascript Question posted in
A very good W3school tutorial can be found here.

VueJS: setup() hook inside an OptionAPI component – Javascript

Hello everyone and thanks in advance for your help.

I am new to VueJS and was asked to work with a big codebase that uses the OptionAPI of VueJS. This code was written before Vue3 was release. However, it seems like the programmers of this had been already using features of the CompositionAPI such as the setup() hook alongside with the data() method to declare the state.

My problem is, I can’t understand the difference between the setup() hook and the data() function in terms of functionalities provided to the component. In many places of this code base, components use both functions to declare their properties / functions that will be used in the code.

What is the difference between declaring a property inside data() and one inside setup() ? Is it simply the sign of bad programming practice, or could it have been done for a specific reason ?

For instance, here is the most naive example. In this case, is there any reason why using the setup() method ?

<script>
import { ref  } from'vue'

export default {
    data() {
        return {
            count: 0
        }
    },
    setup() {
        const tmp = ref(0)
        // expose to template and other options API hooks
        return {
            tmp
        }
    },
    mounted() {
        console.log(this.count) // 0
    }
}
</script>

<template>
    <div>
            Control with Option API: <button @click="count++">{{ count  }} and {{tmp}}</button>
            <p></p>
            Control with Composition API: <button @click="tmp++">{{ count  }} and {{tmp}}</button>
    </div>
</template>

Thanks for your precious help.

Tags:

2

Answers


  1. 0

    maybe they want to emphasize data . the difference is that anything data() returns will be reacted while setup() is a general purpose pattern it can return anything (methods, data, mixins, components…)

    basically your example is equivalent it’s just a matter of whether you like it or not

    Login or Signup to reply.
  2. 0

    If both data and setup as used in a component, the most likely reason for that may be that setup acts like a modern alternative for mixins:

    playground

    <template>
  <div>
    <button @click="inc">
      {{ count }}
    </button> * {{ time }} = {{ product }}
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

function useClockMixin() {
  const time = ref(0)
  setInterval(() => time.value += 1)
  return { time }
}
  
export default defineComponent({
   data() {
      return {count: 1}
   },
   setup() {
      const { time } = useClockMixin()
      return { time }
   },
   computed: {
       product() {return this.count * this.time }
   },
   methods: {
     inc() {this.count += 1}
   }
})
</script>

    Old mixins have many problems with type support, overlapping, and other unexpected things. Using composition-style mixins in setup is much more clear way to express what you want, get better typings, and provide better code quality all at once.

    Data and Setup don’t really have differences other than:

    • Setup can be async (must be used with <Suspense>)
    • Setup may return a render function

    And that’s it (comment if I’ve missed something important)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search