Managing Component Lifecycles with Custom Hooks

Understand how to create custom lifecycle hooks for better control and organization of component behavior.

0 likes
46 views

Rule Content

{
  "title": "Managing Component Lifecycles with Custom Hooks",
  "description": "Ensure consistent and efficient management of Vue component lifecycles by enforcing the use of custom hooks for lifecycle events.",
  "category": "Vue Cursor Rules",
  "severity": "warning",
  "rule": {
    "meta": {
      "docs": {
        "description": "Encourages the use of custom hooks to manage component lifecycle events for better organization and control.",
        "category": "Best Practices",
        "recommended": true
      },
      "messages": {
        "useCustomHook": "Consider using a custom hook to manage this lifecycle event for improved code organization and reusability."
      },
      "type": "suggestion",
      "schema": []
    },
    "create": "function(context) {\n  return {\n    'CallExpression[callee.name=/^(onBeforeMount|onMounted|onBeforeUpdate|onUpdated|onBeforeUnmount|onUnmounted)$/]': function(node) {\n      context.report({\n        node,\n        messageId: 'useCustomHook'\n      });\n    }\n  };\n}"
  }
}