What is the difference between functional components and class components in Vue?

Question

Accepted Answer

**Functional** — stateless, no instance. **Class** — OOP style, decorator-based.

**Functional components:**
```typescript
// Functional component
const MyComponent = (props) => {
    return h("div", props.text)
}

// Or with template
const MyComponent = {
    functional: true,
    render(props) {
        return h("div", props.text)
    }
}
```

**Class components (deprecated):**
```typescript
import Vue from "vue"
import Component from "vue-class-component"

@Component
export default class MyComponent extends Vue {
    count = 0
    
    increment() {
        this.count++
    }
}
```

**Best practices:**
- Use Composition API instead.
- Class components are deprecated.

Vue.js: What is the difference between functional components and class components in Vue?