Vue 3 Composition API data() function

Question

Reading the composition api documentation for Vue 3, I didn't quite understand how the new Composition API works. Could you explain please where data() function has gone and if it is no longer used what to use instead?

It hasn't gone. It's just compulsory to define data as a function, not just an object. — Matt Ellen
@MattEllen i mean if you look in Options API docs vuejs.org/v2/api, you can find it on the left in the table of contents, but the documentation for Сomposition API lacks any mention of it composition-api.vuejs.org/api.html That's what confused me. — Xth
This article shows the essential differences. As I said, the difference with data is that it can't be a plain object, it has to be a function. — Matt Ellen
@MattEllen data has always had to be a function (at least in Vue 2), and while Vue 3 still supports the Options API which includes the data method, the Composition API does not include data(). — Robert Nubel
@MattEllen ah -- I'm assuming OP is referring to data() method for building a component, rather than the data prop passed when instantiating Vue. You're correct on the latter. — Robert Nubel

Robert Nubel Robert Nubel · Accepted Answer · 2020-09-28T16:00:04

Under the new Composition API, all of the variables that you previously defined in data() are just returned from your setup() function as normal variables with reactive values. For example, a Vue 2.0 component that had a data function like so:

data() {
  return {
    foo: 1,
    bar: { name: "hi" }
  }
}

becomes this setup() function in Vue 3:

setup() {
  const foo = ref(1);
  const bar = reactive({ name: "hi" });

  return { foo, bar }
}

The ref helper wraps a non-object value for reactivity, and reactive wraps an object. This is exposing the underlying principles of Vue more clearly than the old way, where the wrapping happened "magically" behind the scenes, but will behave the same otherwise. What I like about it personally is that your setup() function can build up your object on the go while keeping related things together, allowing it to tell a cohesive story and not require jumping around to different sections.

Vue 3 Composition API data() function

2 Answers