Vue.js Assignment– 1

Vue.js Basics

Basic Questions

  1. Create a Vue component that demonstrates how a reactive object updates the DOM automatically.
  2. Use ref() and reactive() to track primitive and object state changes.
  3. Build a counter app and explain how Vue’s reactivity system handles updates.
  4. Show the difference between using ref() and reactive() for arrays.
  5. Demonstrate how Vue batches DOM updates in the rendering cycle.
  6. Create a component that uses watch to track a single reactive property.
  7. Create a component that uses watchEffect for auto-tracking dependencies.
  8. Build a simple app showing Virtual DOM updates when toggling between two components.
  9. Use the v-once directive to render static content and verify it doesn’t re-render.
  10. Use the v-pre directive to display raw template syntax instead of binding it.
  11. Create a custom directive that changes text color when applied to an element.
  12. Build a custom directive that adds a hover effect to buttons.
  13. Write a component using Mixins for reusing logic across two components.
  14. Refactor the same logic using Composition API with setup().
  15. Compare Mixins and Composition API in code by building a small form validator.
  16. Create a form where one field re-renders and another does not, using reactivity APIs.
  17. Use toRefs() to preserve reactivity when destructuring reactive state.
  18. Write a small demo to showcase the lifecycle of Vue rendering (beforeMount, mounted, updated).
  19. Create a nested component that shows how Virtual DOM diffing optimizes re-renders.
  20. Write a note explaining why Virtual DOM is faster than direct DOM manipulation.

Intermediate Questions

  1. Create a reactive Todo list using reactive() and show how Vue tracks array mutations.
  2. Build a component that uses a deep watcher to track nested object changes.
  3. Use markRaw() to exclude a specific object from reactivity and explain the impact.
  4. Create a component that uses shallowReactive() and demonstrate its limitations.
  5. Compare shallowRef() vs ref() in a simple list rendering example.
  6. Create a custom directive v-permission that conditionally renders buttons based on a user role.
  7. Build a custom directive v-focus to auto-focus input fields.
  8. Implement a debounce directive that delays user input handling in a search bar.
  9. Create a small example showing the Virtual DOM patching process with dynamic elements.
  10. Demonstrate how Vue reuses elements with the key attribute in Virtual DOM rendering.
  11. Implement a shared logic for input validation using Mixins.
  12. Refactor the above to use Composition API with reusable functions (useValidation).
  13. Use the provide and inject APIs to share reactive state across deeply nested components.
  14. Optimize a component with computed() properties instead of recalculating values in methods.
  15. Create a reactive chart where only updated data points re-render.
  16. Implement customRef() to create a reactive input field with custom logic.
  17. Show an example where watch is more suitable than computed.
  18. Profile a Vue app with Chrome DevTools and identify unnecessary re-renders.
  19. Use the v-memo directive (Vue 3.2+) to skip re-renders of static subtrees.
  20. Document a scenario where using Composition API significantly improves code organization vs Mixins.

Advanced Questions

  1. Build a real-time dashboard app using reactivity APIs (ref, computed, watchEffect).
  2. Implement a global custom directive for lazy-loading images.
  3. Create a Virtual DOM demo app comparing raw DOM manipulation vs Vue reactivity performance.
  4. Build a directive that automatically logs when an element is inserted or removed from the DOM.
  5. Use Mixins in a medium project and demonstrate name-collision issues.
  6. Refactor the project using Composition API to solve those issues.
  7. Implement effectScope() to manage and dispose reactivity scopes in a complex app.
  8. Create a performance benchmark comparing reactive vs shallowReactive for large data sets.
  9. Build a reusable custom hook (e.g., useDarkMode) with Composition API and reactive state.
  10. Final Hands-on Project:
    • Build a small Vue app (e.g., Stock Tracker)
    • Use reactivity APIs for state management
    • Optimize rendering with Virtual DOM strategies
    • Add custom directives for interactivity
    • Compare Mixins vs Composition API for shared logic
    • Apply performance tuning with markRaw, shallowRef, and v-memo