ਇਹ Vue ਕੰਪੋਨੈਂਟਸ ਲਿਖਣ ਦੇ ਦੋ ਤਰੀਕੇ ਹਨ। Options API ਕੋਡ ਨੂੰ option type ਦੁਆਰਾ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ (data, methods, computed); Composition API ਕੋਡ ਨੂੰ ref, , ਅਤੇ ਵਰਗੇ functions ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦੁਆਰਾ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ।
ਇਹ Vue ਕੰਪੋਨੈਂਟਸ ਲਿਖਣ ਦੇ ਦੋ ਤਰੀਕੇ ਹਨ। Options API ਕੋਡ ਨੂੰ option type ਦੁਆਰਾ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ (data, methods, computed); Composition API ਕੋਡ ਨੂੰ ref, , ਅਤੇ ਵਰਗੇ functions ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦੁਆਰਾ ਸੰਗਠਿਤ ਕਰਦਾ ਹੈ।
computedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
ਸਭ ਕੁਝ fixed buckets ਵਿੱਚ ਗਰੁੱਪ ਕੀਤਾ ਹੋਇਆ ਹੈ (data, methods, computed, lifecycle)। ਸਧਾਰਨ ਅਤੇ ਖੋਜਣ ਯੋਗ, ਪਰ ਇੱਕ feature ਦਾ logic ਉਹਨਾਂ buckets ਵਿੱਚ ਖਿਲਰਿਆ ਹੋਇਆ ਹੈ।
<script setup>
import { ref, computed, onMounted } from "vue";
// all the logic for "counter" lives together
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>
State, computed, methods, ਅਤੇ lifecycle ਇੱਕ concern ਲਈ ਇਕੱਠੇ ਹਨ, ਅਤੇ <script setup> ਇਸ ਨੂੰ ਸੰਖੇਪ ਬਣਾਉਂਦਾ ਹੈ (ਕੋਈ this ਨਹੀਂ, ਕੋਈ return ਨਹੀਂ)।
Composition API ਤੁਹਾਨੂੰ stateful logic ਨੂੰ extract ਅਤੇ ਮੁੜ ਵਰਤੋ ਕਰਨ ਦਿਦੀ ਹੈ plain functions ਦੇ ਤੌਰ ਤੇ (composables):
// useCounter.js — reusable across any component
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
<script setup>
const { count, increment } = useCounter(); // reuse anywhere
</script>
ਇਹ logic-reuse ਨੂੰ ਸਾਫ਼-ਸੁਥਰੇ ਢੰਗ ਨਾਲ ਹਲ ਕਰਦਾ ਹੈ, ਜੋ Options API ਵਿੱਚ ਅਜੀਬ ਸੀ (mixins ਵਿੱਚ naming collisions ਅਤੇ unclear sources ਸਨ)।
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
Composition API (<script setup> ਦੇ ਨਾਲ) ਨਵੇ Vue 3 projects ਲਈ recommended default ਹੈ, ਖਾਸ ਕਰਕੇ TypeScript ਦੇ ਨਾਲ।
Composition API Vue 3 ਦਾ component logic ਨੂੰ ਸੰਗਠਿਤ ਅਤੇ ਮੁੜ ਵਰਤਣ ਯੋਗ ਬਣਾਉਣ ਦਾ ਜਵਾਬ ਹੈ।
yeh samjhnā ki Composition API code ਨੂੰ feature ਦੁਆਰਾ group ਕਰਦਾ ਹੈ (option type ਦੁਆਰਾ ਨਹੀਂ) ਅਤੇ composables ਨੂੰ enable ਕਰਦਾ ਹੈ — Options API ਦੇ option-based buckets ਦੇ ਮੁਕਾਬਲੇ — modern Vue style ਨੂੰ ਸਮਝਾਉਂਦਾ ਹੈ ਅਤੇ ਇਹ ਸਮਝਾਉਂਦਾ ਹੈ ਕਿ ਕਿਉਂ complex components ਅਤੇ TypeScript codebases ਇਸ ਨੂੰ ਪਸੰਦ ਕਰਦੇ ਹਨ।
ਦੋਵੇਂ ਪੂਰੀ ਤਰ੍ਹਾਂ supported ਹਨ; ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਮਿਕਸ ਵੀ ਕਰ ਸਕਦੇ ਹੋ।