Optimize Event Handling in Vue with Throttling and Debouncing Techniques

{
  "title": "Optimize Event Handling in Vue with Throttling and Debouncing Techniques",
  "description": "Ensure efficient event handling in Vue components by implementing throttling and debouncing techniques to improve performance in interactive applications.",
  "category": "Vue Cursor Rules",
  "severity": "warning",
  "patterns": [
    {
      "pattern": "\\.addEventListener\\(\\s*['\"](scroll|resize|mousemove|input|keydown)['\"]\\s*,\\s*function\\s*\\(",
      "message": "Consider applying throttling or debouncing to this event listener to enhance performance.",
      "fix": "Wrap the event handler function with a throttling or debouncing utility, such as those provided by Lodash or VueUse."
    },
    {
      "pattern": "@(scroll|resize|mousemove|input|keydown)\\s*=\\s*['\"]\\w+['\"]",
      "message": "Consider applying throttling or debouncing to this event binding to enhance performance.",
      "fix": "Wrap the method in the event binding with a throttling or debouncing utility, such as those provided by Lodash or VueUse."
    }
  ],
  "examples": [
    {
      "bad": "window.addEventListener('scroll', function() { /* handler code */ });",
      "good": "import { throttle } from 'lodash';\nconst throttledHandler = throttle(function() { /* handler code */ }, 200);\nwindow.addEventListener('scroll', throttledHandler);"
    },
    {
      "bad": "<input @input=\"handleInput\">",
      "good": "import { debounce } from 'lodash';\nexport default {\n  methods: {\n    handleInput: debounce(function() { /* handler code */ }, 300)\n  }\n};\n<input @input=\"handleInput\">"
    }
  ]
}