Vue 3 Composition API: Complete Guide and Best Practices

Vue 3’s Composition API provides better code organization. Here’s how to use it effectively. Setup import { ref, computed, watch } from 'vue'; export default { setup() { const count = ref(0); const doubled = computed(() => count.value * 2); watch(count, (newVal) => { console.log('Count changed:', newVal); }); return { count, doubled }; } } Script Setup <script setup> import { ref, computed } from 'vue'; const count = ref(0); const doubled = computed(() => count.value * 2); function increment() { count.value++; } </script> Composables // useCounter.js import { ref } from 'vue'; export function useCounter(initialValue = 0) { const count = ref(initialValue); const increment = () => count.value++; const decrement = () => count.value--; return { count, increment, decrement }; } Best Practices Use composables for reusability Keep setup functions focused Use script setup syntax Organize by feature Extract complex logic Conclusion Vue 3 Composition API enables better code organization! 🎯

April 20, 2023 · 3351 views

JavaScript Closures Explained: Understanding Scope and Memory

Closures are fundamental to JavaScript. Here’s how they work and when to use them. What is a Closure? A closure gives you access to an outer function’s scope from an inner function. function outer() { const name = 'JavaScript'; function inner() { console.log(name); // Accesses outer scope } return inner; } const innerFunc = outer(); innerFunc(); // "JavaScript" Common Patterns Module Pattern const counter = (function() { let count = 0; return { increment: () => ++count, decrement: () => --count, getCount: () => count }; })(); Function Factories function createMultiplier(multiplier) { return function(number) { return number * multiplier; }; } const double = createMultiplier(2); double(5); // 10 Common Pitfalls Loop with Closures // Bad: All log same value for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); // 3, 3, 3 } // Good: Use let or IIFE for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); // 0, 1, 2 } Best Practices Understand scope chain Avoid memory leaks Use closures for encapsulation Be careful in loops Use modern alternatives when possible Conclusion Master closures to write better JavaScript! 🔒

March 15, 2023 · 4617 views