CES Vue and ReactJS

CES Vue and ReactJS

 

📌 1. Vue.js Lifecycle Hooks

Vue provides various lifecycle hooks that allow you to add code at specific stages of a component's life:

✅ beforeCreate – Runs after instance initialization, before data observation and events setup.
✅ created – Runs after data observation and events are set up. API calls and data initialization are often done here.
✅ beforeMount – Called before mounting begins, i.e., before the DOM is rendered.
✅ mounted – Called after the component is mounted to the DOM. You can access the DOM elements here.
✅ beforeUpdate – Called before the DOM updates when reactive data changes.
✅ updated – Called after the DOM has been updated. Use with caution to avoid infinite loops.
✅ beforeUnmount (Vue 3) – Called before a component is unmounted.
✅ unmounted (Vue 3) – Called after a component is removed from the DOM.

🔗 Example usage:

export default {
  data() {
    return { message: "Hello" };
  },
  created() {
    console.log("Component Created!");
  },
  mounted() {
    console.log("Component Mounted!");
  }
}
📌 2. Vue.js Performance Improvement Tips
✅ Use v-show vs v-if wisely: v-show toggles display, v-if adds/removes from DOM.
✅ Lazy-load components: Load heavy components only when required.
✅ Use computed properties over methods: Computed properties cache results.
✅ Avoid unnecessary watchers.
✅ Key your v-for loops to avoid re-rendering issues. 
✅ Optimize event listeners and remove them on unmount.
📌 3. Custom Vue Directive – Onclick Change Background Color
Here’s how to create a simple custom directive to change background color on click:
// directive.js
export default {
  mounted(el, binding) {
    el.addEventListener("click", () => {
      el.style.backgroundColor = binding.value || "blue";
    });
  },
  unmounted(el) {
    el.removeEventListener("click", () => {});
  }
};
🔗 Usage:
<template>
  <div v-change-bg="'yellow'">Click me to change background</div>
</template>

<script>
import changeBg from './directive.js';

export default {
  directives: {
    'change-bg': changeBg
  }
}
</script>
📌 4. React Lifecycle Hooks
React lifecycle is split into Mounting, Updating, and Unmounting phases.
🔹 Class Components
constructor() – Initialize state and bind methods.
componentDidMount() – Runs after first render. Best for API calls.
shouldComponentUpdate() – Controls re-rendering.
componentDidUpdate() – Runs after updates.
componentWillUnmount() – Cleanup tasks like clearing timers or unsubscribing.
🔹 Functional Components with Hooks
useEffect(() => {}, []) – Similar to componentDidMount.
useEffect(() => { return () => {} }, []) – Cleanup is similar to componentWillUnmount.
useLayoutEffect – Runs synchronously after DOM mutations, before painting.


📌 5. React Performance Optimization Tips
✅ Use React.memo to avoid re-rendering of functional components if props do not change.

✅ Use useCallback and useMemo to memoize functions and values.

✅ Key your lists properly to avoid unnecessary re-rendering.

✅ Lazy-load components using React.lazy and Suspense.

✅ Avoid inline functions and objects in render to prevent unnecessary re-renders.

📌 6. Responsive Design Best Practices
🌐 Responsive design ensures your app works on all devices. Key approaches include:
✅ Use relative units like %, rem, em instead of px.
✅ Media queries to handle different breakpoints:
@media (max-width: 768px) {
  .container { flex-direction: column; }
}
✅ Flexbox and CSS Grid for adaptive layouts.
✅ Set viewport meta tag in HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
✅ Test on real devices or using Chrome DevTools device simulator.