Vue 3 Composition API data() function
Solution 1
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.
Solution 2
The composition is the new feature comes with Vue 3 and as a plugin for Vue 2, it doesn't replace the old option api but they could be used together in the same component.
The composition api compared to option api :
- Gather the logic functionalities into reusable pieces of logic.
- Use one option which the
setup
function which is executed before the component is created, once the props are resolved, and serves as the entry point for composition API's. - Define your old data option as
ref
orreactive
properties - computed and watch is defined as :
watch(...,()=>{...})
orcomputed(()=>{...})
- Methods defined as plain javascript functions.
-
setup
option used instead of created hook and it has as parameters theprops
andcontext
- Hooks like
mounted
could be used asonMounted(()=>{...})
,learn more
Xth
Updated on June 26, 2022Comments
-
Xth almost 2 years
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?Updated 23.10.2021: The documentation in the link has been updated and expanded to include a mention of the data() in the Composition API introduction, so this question is now deprecated.
-
Matt Ellen over 3 yearsIt hasn't gone. It's just compulsory to define
data
as a function, not just an object. -
Xth over 3 years@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.
-
Matt Ellen over 3 yearsThis 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. -
Robert Nubel over 3 years@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 thedata
method, the Composition API does not includedata()
. -
Matt Ellen over 3 years@RobertNubel not at all. In Vue2
data
has only had to be a function incomponents
in the main app it can be a bare object. -
Robert Nubel over 3 years@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.
-
-
volume one almost 3 yearsAlso you can still access the variables returned by
setup()
in the Options API usingthis.foo
for example.