[{"data":1,"prerenderedAt":310},["ShallowReactive",2],{"content-/vue-pause-watcher":3,"surround-/vue-pause-watcher":301},{"id":4,"title":5,"body":6,"description":292,"extension":293,"meta":294,"navigation":77,"order":295,"path":296,"seo":297,"stem":298,"tags":299,"__hash__":300},"content/vue-pause-watcher/index.md","Pause a watcher while you batch changes",{"type":7,"value":8,"toc":290},"minimark",[9,26,273,276,286],[10,11,12,13,17,18,21,22,25],"p",{},"Vue 3.5+ watchers return ",[14,15,16],"code",{},"pause",", ",[14,19,20],{},"resume",", and ",[14,23,24],{},"stop",". Pause a reaction while updating related values, then resume it with the final state.",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-vue shiki shiki-themes github-dark","\u003Cscript setup>\nimport { ref, watch } from 'vue'\n\nconst filters = ref({ query: '', page: 1 })\nconst appliedFilters = ref({ ...filters.value })\n\nconst { pause, resume } = watch(filters, (value) => {\n  appliedFilters.value = { ...value }\n}, { deep: true })\n\nfunction resetFilters() {\n  pause()\n  filters.value.query = ''\n  filters.value.page = 1\n  resume()\n}\n\u003C/script>\n","vue","",[14,34,35,55,72,79,110,131,136,175,190,201,206,218,227,238,249,257,263],{"__ignoreMap":32},[36,37,40,44,48,52],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"s95oV","\u003C",[36,45,47],{"class":46},"s4JwU","script",[36,49,51],{"class":50},"svObZ"," setup",[36,53,54],{"class":42},">\n",[36,56,58,62,65,68],{"class":38,"line":57},2,[36,59,61],{"class":60},"snl16","import",[36,63,64],{"class":42}," { ref, watch } ",[36,66,67],{"class":60},"from",[36,69,71],{"class":70},"sU2Wk"," 'vue'\n",[36,73,75],{"class":38,"line":74},3,[36,76,78],{"emptyLinePlaceholder":77},true,"\n",[36,80,82,85,89,92,95,98,101,104,107],{"class":38,"line":81},4,[36,83,84],{"class":60},"const",[36,86,88],{"class":87},"sDLfK"," filters",[36,90,91],{"class":60}," =",[36,93,94],{"class":50}," ref",[36,96,97],{"class":42},"({ query: ",[36,99,100],{"class":70},"''",[36,102,103],{"class":42},", page: ",[36,105,106],{"class":87},"1",[36,108,109],{"class":42}," })\n",[36,111,113,115,118,120,122,125,128],{"class":38,"line":112},5,[36,114,84],{"class":60},[36,116,117],{"class":87}," appliedFilters",[36,119,91],{"class":60},[36,121,94],{"class":50},[36,123,124],{"class":42},"({ ",[36,126,127],{"class":60},"...",[36,129,130],{"class":42},"filters.value })\n",[36,132,134],{"class":38,"line":133},6,[36,135,78],{"emptyLinePlaceholder":77},[36,137,139,141,144,146,148,150,153,156,159,162,166,169,172],{"class":38,"line":138},7,[36,140,84],{"class":60},[36,142,143],{"class":42}," { ",[36,145,16],{"class":87},[36,147,17],{"class":42},[36,149,20],{"class":87},[36,151,152],{"class":42}," } ",[36,154,155],{"class":60},"=",[36,157,158],{"class":50}," watch",[36,160,161],{"class":42},"(filters, (",[36,163,165],{"class":164},"s9osk","value",[36,167,168],{"class":42},") ",[36,170,171],{"class":60},"=>",[36,173,174],{"class":42}," {\n",[36,176,178,181,183,185,187],{"class":38,"line":177},8,[36,179,180],{"class":42},"  appliedFilters.value ",[36,182,155],{"class":60},[36,184,143],{"class":42},[36,186,127],{"class":60},[36,188,189],{"class":42},"value }\n",[36,191,193,196,199],{"class":38,"line":192},9,[36,194,195],{"class":42},"}, { deep: ",[36,197,198],{"class":87},"true",[36,200,109],{"class":42},[36,202,204],{"class":38,"line":203},10,[36,205,78],{"emptyLinePlaceholder":77},[36,207,209,212,215],{"class":38,"line":208},11,[36,210,211],{"class":60},"function",[36,213,214],{"class":50}," resetFilters",[36,216,217],{"class":42},"() {\n",[36,219,221,224],{"class":38,"line":220},12,[36,222,223],{"class":50},"  pause",[36,225,226],{"class":42},"()\n",[36,228,230,233,235],{"class":38,"line":229},13,[36,231,232],{"class":42},"  filters.value.query ",[36,234,155],{"class":60},[36,236,237],{"class":70}," ''\n",[36,239,241,244,246],{"class":38,"line":240},14,[36,242,243],{"class":42},"  filters.value.page ",[36,245,155],{"class":60},[36,247,248],{"class":87}," 1\n",[36,250,252,255],{"class":38,"line":251},15,[36,253,254],{"class":50},"  resume",[36,256,226],{"class":42},[36,258,260],{"class":38,"line":259},16,[36,261,262],{"class":42},"}\n",[36,264,266,269,271],{"class":38,"line":265},17,[36,267,268],{"class":42},"\u003C/",[36,270,47],{"class":46},[36,272,54],{"class":42},[10,274,275],{},"Vue already batches synchronous watcher callbacks. This control is useful when a pause needs to span separate steps. It does not cancel work a previous callback already started.",[10,277,278,285],{},[279,280,284],"a",{"href":281,"rel":282},"https://vuejs.org/api/reactivity-core.html#watch",[283],"nofollow","Read the Vue documentation",".",[287,288,289],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}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);}",{"title":32,"searchDepth":57,"depth":57,"links":291},[],"Pause and resume Vue 3.5 watchers to defer a reaction while updating related state.","md",{},222,"/vue-pause-watcher",{"title":5,"description":292},"vue-pause-watcher/index",[31],"4n1EZKEvSmkpPYeZ2YjUColoBVcWQb361ak7ZpE-Ue8",[302,306],{"title":303,"path":304,"stem":305,"children":-1},"Accept a value, ref, or getter in the same composable","/vue-to-value","vue-to-value/index",{"title":307,"path":308,"stem":309,"children":-1},"Let a watcher stop itself after the first change","/vue-watch-once","vue-watch-once/index",1788695822212]