✅ Scope

1. Variables declared with var do not have block scope. They can be accessed outside blocks but not outside functions.
2. Variables declared with let have block scope, accessible only within the declared block.
3. const defines constants, must be initialized, accessible only in the declared block, and cannot be reassigned.

✅ Declaration Rules

• A variable name can only be declared once using one of these methods; otherwise, it throws an error.

✅ Difference when using with this

• Event delegation attaches events to a parent or ancestor element instead of individual child elements.
  
• When the event reaches the target element, it bubbles up and triggers the handler on the outer element.

• Debounce: Executes only the last trigger. Even if the event keeps firing, it waits until n seconds after the last event to execute.
• Throttle: Controls the execution frequency. Fires every n seconds during continuous event triggers.

1. Parameterized Queries: Use prepared statements or parameterized queries.
2. Input Validation: Ensure user input follows expected format.
3. Escape Special Characters: Escape characters when constructing SQL queries.
4. Limit Permissions: Restrict user privileges to prevent unsafe operations.
5. Whitelist Validation: Only allow expected values in input.
6. Code Review: Regularly review code, especially DB-related parts.

1. HTTPS requires a certificate from a CA, which may cost money.
2. HTTP transmits data in plaintext, while HTTPS uses SSL encryption.
3. They use different connection methods and ports: HTTP uses 80, HTTPS uses 443.
4. HTTP is stateless; HTTPS combines SSL + HTTP for encrypted, authenticated, secure communication.

• created runs before mounted. DOM is not fully rendered, but API requests can be made early here.
• mounted is triggered when the DOM has been rendered, so it’s suitable for manipulating DOM elements.

🔁 What is the Event Loop?

JavaScript is single-threaded. In addition to the call stack, it relies on task queues to control asynchronous code execution order.

This whole process is called the Event Loop.

🧠 Core Concepts

• Only one event loop in a single thread.
• Multiple task queues:
  • Macro Tasks
  • Micro Tasks

⏱ Execution Order

Macro Task ➝ Clear all Micro Tasks ➝ Next Macro Task ➝ Clear all Micro Tasks…

1. Execute a macro task (like the whole script)
2. Execute all micro tasks created during this macro task
3. If micro tasks generate more micro tasks, execute them too
4. Begin the next macro task loop

🧩 Examples of Macro Tasks

• script
• setTimeout
• setInterval
• setImmediate (Node.js)
• I/O operations
• UI rendering

🧬 Examples of Micro Tasks

• process.nextTick (Node.js, higher priority)
• Promise.then / catch / finally
• async / await
• MutationObserver

The CSS box model includes IE and standard W3C models.

• In standard W3C box model, width only includes content. box-sizing: content-box (default).
• In IE box model, width includes content + padding + border. box-sizing: border-box.
• box-sizing: padding-box includes left/right padding + width.

1. Two-way binding:
   • Vue 2: uses Object.defineProperty() (ES5), which only watches individual properties.
   • Vue 3: uses Proxy (ES6), which can observe entire objects and arrays.
2. Lifecycle hooks:
   • Vue 2: beforeCreate, created, beforeMount, mounted, etc.
   • Vue 3: setup, onBeforeMount, onMounted, etc.
3. Vue 2 requires a root tag; Vue 3 allows multiple root tags via Fragment.
4. API:
   • Vue 2: Options API (functions and data handled separately).
   • Vue 3: Composition API (related code grouped together).
5. Slots:
   • Named slot: Vue 2 uses slot="", Vue 3 uses v-slot="".
   • Scoped slot: Vue 2 uses slot-scope="data", Vue 3 uses #data or #default="{data}".