home / blog / Dev Tips
Dev Tips

4 Vue3 Composition API Tips You Should Know

With Vue3 Alpha out, many developers are trying out the new changes – the biggest one being the Composition API.

I’ve spent some time playing around with the new Composition API and learning how to implement it. Here are some things that took a little bit of time to figure out. Hopefully, it saves you some set up time.

By the end of this article, you should know a little bit more about the Composition API and how you can implement it into your projects.

Note: this is not an introduction to the Composition API, if you want to check out a basic example, I wrote a beginner Composition API tutorial.

1. Use it properly to stay organized

The main benefit of the Composition API is the ability to more efficiently organize and reuse code. Previously, in the Options API, code for a single feature would be separated across difference component options. Now, it’s all in one place.

One of the suggested design patterns is to write your code in separate functions, return the properties you want exposed, and then include them in your setup method.

The main benefit of the Composition API is the ability to more efficiently organize and reuse code.

javascript
export default {
  setup() {
    const search = configureSearch();

    // ...

    return {
      search,
    };
  },
};

// can even be in separate file and imported
function configureSearch() {
  // ...
  return { search, findString, autoComplete };
}

This is awesome for creating more readable components. Also, it means that you can even extract functionality into separate files and import them wherever you need it.

2. When to use ref or reactive

Because the Composition API directly exposes Vue’s reactivity API, we have two different ways to create reactive data: ref and reactive.

javascript
const value = ref(0);

// OR

const state = reactive({
  value: 0,
});

It’s easiest to think of this two techniques like Javascript primitive types vs. objects.

While reactive is more versatile, these objects lose reactivity whenever they are destructured or spread. To combat this, you can use the toRefs method that converts each object property to its own reactive ref.

javascript
export default {
  setup() {
    // destructure without losing reactivity bc of toRefs
    const { search, findString, autoComplete } = configureSearch();

    return {
      search,
      findString,
      autoComplete,
    };
  },
};

// can even be in separate file and imported
function configureSearch() {
  const state = reactive({
    search: "",
    findString: "",
    autoComplete: "",
  });

  return toRefs(state);
}
While reactive is more versatile, these objects lose reactivity whenever they are destructured or spread.

If you want a more in-depth review on when reactivity is lost, the Composition API RFC is a great place to start.

3. You can access props in setup()

In Vue2, we could access props anywhere in a component using this.propName

A huge difference between the Options API and the Composition API is the fact that we use the setup() method. setup does not have the same access to this as our Options API methods.

While this is not an issue for accessing component data and methods – because those would be defined inside our setup method – it does cause issues when trying to reference a component’s props.

Thankfully, our setup method accepts a components props as its first argument.

javascript
export default {
  setup(props) {
    console.log(props);
  },
};

Using this syntax, we can now access our component’s props inside our setup method. This means that our data, methods, computed values, and more can use references to props.

Just remember that props should be read only and never changed.

4. setup() also has a context argument

In addition to accepting props as an argument, setup() has a second optional argument: a context object that exposes three properties of a Vue instances.

  • attrs – a component’s attributes

  • emit – allows us to emit an event from this component

We can access this context object like this.

javascript
export default {
  setup(props, context) {
    console.log(props);
    console.log(context);
    context.emit("eventName");
  },
};

Or if we don’t need the entire context object, we can destructure it.

javascript
export default {
  setup(props, { emit }) {
    console.log(props);
    emit("eventName");
  },
};

Conclusion

New best practices, techniques, and design patterns will definitely emerge in the future when Vue3 is officially out. But for now, these are just a few of the things I wish I knew when I started playing around with the Composition API.

Hopefully you learned something and feel more comfortable with the new changes.

Happy coding!


Latest Posts

Top Tools

Getting Started with Vuex in Vue 3

Vuex is a state-management system following the Flux pattern that lets us create a global store with unidirectional data flow across our Vue 3 app.

Dev Tips

Improve Vue Performance with v-once + v-memo

Rendering performance is a vital metric for frontend developers. Improve your Vue app's performance with these two directives.

Top Tools

Making a Markdown-Based Blog with Vue and Gridsome

Use Vue with Gridsome is one of the easiest ways to create static websites from just Markdown files.

Top Tools

5 VueUse Library Functions That Can Speed Up Development

VueUse is an open-source project that provides Vue developers with a huge collection of essential Composition API utility functions for both Vue 2 and Vue 3.

Join the LearnVue Community

Every week we send out exclusive content to thousands of developers on our mailing list. 100% Free.