[{"data":1,"prerenderedAt":570},["ShallowReactive",2],{"navigation_docs":3,"rule-content-\u002Fvue\u002Frules\u002Flifecycle\u002Fprefer-use-event-listener":44},[4,8,12,16,20,24,28,32,36,40],{"title":5,"path":6,"stem":7},"CLI","\u002Fcli","1.cli",{"title":9,"path":10,"stem":11},"Nuxt","\u002Fnuxt","2.nuxt",{"title":13,"path":14,"stem":15},"Vue","\u002Fvue","3.vue",{"title":17,"path":18,"stem":19},"Vite","\u002Fvite","4.vite",{"title":21,"path":22,"stem":23},"Nitro","\u002Fnitro","5.nitro",{"title":25,"path":26,"stem":27},"TypeScript","\u002Ftypescript","6.typescript",{"title":29,"path":30,"stem":31},"shadcn","\u002Fshadcn","7.shadcn",{"title":33,"path":34,"stem":35},"Package","\u002Fpackage","8.package",{"title":37,"path":38,"stem":39},"Extending Doctor","\u002Fextending","9.extending",{"title":41,"path":42,"stem":43},"Pinia","\u002Fpinia","9.pinia",{"id":45,"title":46,"body":47,"category":53,"description":558,"diagnosticCodes":559,"docsUrl":55,"extension":560,"fix":56,"framework":561,"meta":562,"navigation":563,"pack":57,"path":565,"recommendedReplacement":566,"ruleId":58,"seo":567,"severity":59,"source":60,"sourceUrl":61,"stem":568,"why":112,"__hash__":569},"rules\u002Fvue\u002Frules\u002Flifecycle\u002Fprefer-use-event-listener.md","Prefer VueUse event listener cleanup",{"type":48,"value":49,"toc":549},"minimark",[50,62,67,105,109,113,117,124,128,140,144,149,152,382,385,545],[51,52],"rule-metadata",{"category":53,"diagnosticCodes":54,"docsUrl":55,"fix":56,"pack":57,"ruleId":58,"severity":59,"source":60,"sourceUrl":61},"lifecycle","VUE0025","https:\u002F\u002Fvueuse.org\u002Fcore\u002Fuseeventlistener\u002F","suggestion","vite-doctor\u002Fvue","vue\u002Flifecycle\u002Fprefer-use-event-listener","warn","src\u002Frule-packs\u002Fvue\u002Frules\u002Fvue\u002Fprefer-use-event-listener.ts","https:\u002F\u002Fgithub.com\u002Fonmax\u002Fvite-doctor\u002Fblob\u002Fmain\u002Fsrc\u002Frule-packs\u002Fvue\u002Frules\u002Fvue\u002Fprefer-use-event-listener.ts",[63,64,66],"h2",{"id":65},"run-this-rule","Run this rule",[68,69,74],"pre",{"className":70,"code":71,"language":72,"meta":73,"style":73},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm vite-doctor . --framework vue --rules vue\u002Flifecycle\u002Fprefer-use-event-listener\n","bash","",[75,76,77],"code",{"__ignoreMap":73},[78,79,82,86,90,93,96,99,102],"span",{"class":80,"line":81},"line",1,[78,83,85],{"class":84},"sBMFI","pnpm",[78,87,89],{"class":88},"sfazB"," vite-doctor",[78,91,92],{"class":88}," .",[78,94,95],{"class":88}," --framework",[78,97,98],{"class":88}," vue",[78,100,101],{"class":88}," --rules",[78,103,104],{"class":88}," vue\u002Flifecycle\u002Fprefer-use-event-listener\n",[63,106,108],{"id":107},"why-it-matters","Why it matters",[110,111,112],"p",{},"DOM listeners are lifecycle resources. Keeping setup and disposal behind a composable makes repeated watcher runs, component unmounts, and composable scope disposal harder to drift apart.",[63,114,116],{"id":115},"recommended-fix","Recommended fix",[110,118,119,120,123],{},"Use VueUse ",[75,121,122],{},"useEventListener()"," for DOM listeners. In watcher callbacks, keep the returned stop handle in watcher cleanup when each watcher run owns a fresh listener.",[63,125,127],{"id":126},"useful-links","Useful links",[129,130,131],"ul",{},[132,133,134],"li",{},[135,136,139],"a",{"href":55,"rel":137},[138],"nofollow","VueUse useEventListener",[63,141,143],{"id":142},"example","Example",[145,146,148],"h3",{"id":147},"use-vueuse-for-watcher-owned-listeners","Use VueUse for watcher-owned listeners",[110,150,151],{},"Before",[68,153,157],{"className":154,"code":155,"language":156,"meta":73,"style":73},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","watch(active, (_value, _oldValue, onCleanup) => {\n  const el = document.querySelector('.target')\n  if (!el) return\n  const onEnd = () => el.classList.remove('active')\n  el.addEventListener('animationend', onEnd, { once: true })\n  onCleanup(() => el.removeEventListener('animationend', onEnd))\n})\n","ts",[75,158,159,200,236,257,295,339,374],{"__ignoreMap":73},[78,160,161,165,169,173,176,180,182,185,187,190,193,197],{"class":80,"line":81},[78,162,164],{"class":163},"s2Zo4","watch",[78,166,168],{"class":167},"sTEyZ","(active",[78,170,172],{"class":171},"sMK4o",",",[78,174,175],{"class":171}," (",[78,177,179],{"class":178},"sHdIc","_value",[78,181,172],{"class":171},[78,183,184],{"class":178}," _oldValue",[78,186,172],{"class":171},[78,188,189],{"class":178}," onCleanup",[78,191,192],{"class":171},")",[78,194,196],{"class":195},"spNyl"," =>",[78,198,199],{"class":171}," {\n",[78,201,203,206,209,212,215,218,221,225,228,231,233],{"class":80,"line":202},2,[78,204,205],{"class":195},"  const",[78,207,208],{"class":167}," el",[78,210,211],{"class":171}," =",[78,213,214],{"class":167}," document",[78,216,217],{"class":171},".",[78,219,220],{"class":163},"querySelector",[78,222,224],{"class":223},"swJcz","(",[78,226,227],{"class":171},"'",[78,229,230],{"class":88},".target",[78,232,227],{"class":171},[78,234,235],{"class":223},")\n",[78,237,239,243,245,248,251,254],{"class":80,"line":238},3,[78,240,242],{"class":241},"s7zQu","  if",[78,244,175],{"class":223},[78,246,247],{"class":171},"!",[78,249,250],{"class":167},"el",[78,252,253],{"class":223},") ",[78,255,256],{"class":241},"return\n",[78,258,260,262,265,267,270,272,274,276,279,281,284,286,288,291,293],{"class":80,"line":259},4,[78,261,205],{"class":195},[78,263,264],{"class":167}," onEnd",[78,266,211],{"class":171},[78,268,269],{"class":171}," ()",[78,271,196],{"class":195},[78,273,208],{"class":167},[78,275,217],{"class":171},[78,277,278],{"class":167},"classList",[78,280,217],{"class":171},[78,282,283],{"class":163},"remove",[78,285,224],{"class":223},[78,287,227],{"class":171},[78,289,290],{"class":88},"active",[78,292,227],{"class":171},[78,294,235],{"class":223},[78,296,298,301,303,306,308,310,313,315,317,319,321,324,327,330,334,337],{"class":80,"line":297},5,[78,299,300],{"class":167},"  el",[78,302,217],{"class":171},[78,304,305],{"class":163},"addEventListener",[78,307,224],{"class":223},[78,309,227],{"class":171},[78,311,312],{"class":88},"animationend",[78,314,227],{"class":171},[78,316,172],{"class":171},[78,318,264],{"class":167},[78,320,172],{"class":171},[78,322,323],{"class":171}," {",[78,325,326],{"class":223}," once",[78,328,329],{"class":171},":",[78,331,333],{"class":332},"sfNiH"," true",[78,335,336],{"class":171}," }",[78,338,235],{"class":223},[78,340,342,345,347,350,352,354,356,359,361,363,365,367,369,371],{"class":80,"line":341},6,[78,343,344],{"class":163},"  onCleanup",[78,346,224],{"class":223},[78,348,349],{"class":171},"()",[78,351,196],{"class":195},[78,353,208],{"class":167},[78,355,217],{"class":171},[78,357,358],{"class":163},"removeEventListener",[78,360,224],{"class":223},[78,362,227],{"class":171},[78,364,312],{"class":88},[78,366,227],{"class":171},[78,368,172],{"class":171},[78,370,264],{"class":167},[78,372,373],{"class":223},"))\n",[78,375,377,380],{"class":80,"line":376},7,[78,378,379],{"class":171},"}",[78,381,235],{"class":167},[110,383,384],{},"After",[68,386,388],{"className":154,"code":387,"language":156,"meta":73,"style":73},"watch(active, (_value, _oldValue, onCleanup) => {\n  const el = document.querySelector('.target')\n  if (!el) return\n  const stop = useEventListener(el, 'animationend', () => {\n    el.classList.remove('active')\n  }, { once: true })\n  onCleanup(stop)\n})\n",[75,389,390,416,440,454,487,510,527,538],{"__ignoreMap":73},[78,391,392,394,396,398,400,402,404,406,408,410,412,414],{"class":80,"line":81},[78,393,164],{"class":163},[78,395,168],{"class":167},[78,397,172],{"class":171},[78,399,175],{"class":171},[78,401,179],{"class":178},[78,403,172],{"class":171},[78,405,184],{"class":178},[78,407,172],{"class":171},[78,409,189],{"class":178},[78,411,192],{"class":171},[78,413,196],{"class":195},[78,415,199],{"class":171},[78,417,418,420,422,424,426,428,430,432,434,436,438],{"class":80,"line":202},[78,419,205],{"class":195},[78,421,208],{"class":167},[78,423,211],{"class":171},[78,425,214],{"class":167},[78,427,217],{"class":171},[78,429,220],{"class":163},[78,431,224],{"class":223},[78,433,227],{"class":171},[78,435,230],{"class":88},[78,437,227],{"class":171},[78,439,235],{"class":223},[78,441,442,444,446,448,450,452],{"class":80,"line":238},[78,443,242],{"class":241},[78,445,175],{"class":223},[78,447,247],{"class":171},[78,449,250],{"class":167},[78,451,253],{"class":223},[78,453,256],{"class":241},[78,455,456,458,461,463,466,468,470,472,475,477,479,481,483,485],{"class":80,"line":259},[78,457,205],{"class":195},[78,459,460],{"class":167}," stop",[78,462,211],{"class":171},[78,464,465],{"class":163}," useEventListener",[78,467,224],{"class":223},[78,469,250],{"class":167},[78,471,172],{"class":171},[78,473,474],{"class":171}," '",[78,476,312],{"class":88},[78,478,227],{"class":171},[78,480,172],{"class":171},[78,482,269],{"class":171},[78,484,196],{"class":195},[78,486,199],{"class":171},[78,488,489,492,494,496,498,500,502,504,506,508],{"class":80,"line":297},[78,490,491],{"class":167},"    el",[78,493,217],{"class":171},[78,495,278],{"class":167},[78,497,217],{"class":171},[78,499,283],{"class":163},[78,501,224],{"class":223},[78,503,227],{"class":171},[78,505,290],{"class":88},[78,507,227],{"class":171},[78,509,235],{"class":223},[78,511,512,515,517,519,521,523,525],{"class":80,"line":341},[78,513,514],{"class":171},"  },",[78,516,323],{"class":171},[78,518,326],{"class":223},[78,520,329],{"class":171},[78,522,333],{"class":332},[78,524,336],{"class":171},[78,526,235],{"class":223},[78,528,529,531,533,536],{"class":80,"line":376},[78,530,344],{"class":163},[78,532,224],{"class":223},[78,534,535],{"class":167},"stop",[78,537,235],{"class":223},[78,539,541,543],{"class":80,"line":540},8,[78,542,379],{"class":171},[78,544,235],{"class":167},[546,547,548],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":73,"searchDepth":202,"depth":202,"links":550},[551,552,553,554,555],{"id":65,"depth":202,"text":66},{"id":107,"depth":202,"text":108},{"id":115,"depth":202,"text":116},{"id":126,"depth":202,"text":127},{"id":142,"depth":202,"text":143,"children":556},[557],{"id":147,"depth":238,"text":148},"Finds Vue scopes that manually pair DOM event listener setup and cleanup when VueUse is already available.",[54],"md","vue",{},{"title":564},"useEventListener","\u002Fvue\u002Frules\u002Flifecycle\u002Fprefer-use-event-listener","Use VueUse useEventListener() for DOM listeners. In watcher callbacks, keep the returned stop handle in watcher cleanup when each watcher run owns a fresh listener.",{"title":46,"description":558},"vue\u002Frules\u002Flifecycle\u002Fprefer-use-event-listener","wCtC1583QN0KzMHxRnCcQVALlhvQSCtSTWWYbDn33pQ",1791309455650]