Data and Methods

Options API Data & Methods

In Options API, data returns state and methods hold functions.

Useful for reading older components; new code can use Composition instead.

export default {
  data() { return { count: 0 } },
  methods: {
    inc() { this.count++ }
  }
}

Classic Options API counter.

this Binding

Methods get `this` pointing at the component instance.

• Prefer Vue 3 + Composition API.
• Use script setup for SFCs.
• Keep components focused.
• Lean on official docs.

Data and Methods Cheatsheet

Quick reference for patterns covered in this lesson.

Migration

Move Options pieces into setup/script setup gradually.

Common Mistakes

• Arrow functions in methods that break this.
• Shared mutable objects returned from data() across instances.

Key Takeaways

• Data and Methods is a core Vue skill.
• Practice in a Vite app.
• Prefer clarity.
• Revisit docs for edge cases.