[{"data":1,"prerenderedAt":274},["ShallowReactive",2],{"content-/vue-watch-once":3,"surround-/vue-watch-once":265},{"id":4,"title":5,"body":6,"description":256,"extension":257,"meta":258,"navigation":69,"order":259,"path":260,"seo":261,"stem":262,"tags":263,"__hash__":264},"content/vue-watch-once/index.md","Let a watcher stop itself after the first change",{"type":7,"value":8,"toc":254},"minimark",[9,18,233,240,250],[10,11,12,13,17],"p",{},"In Vue 3.4+, ",[14,15,16],"code",{},"once: true"," stops a watcher after its first callback. Useful for an interaction that should happen only once per component instance.",[19,20,25],"pre",{"className":21,"code":22,"language":23,"meta":24,"style":24},"language-vue shiki shiki-themes github-dark","\u003Cscript setup>\nimport { ref, watch } from 'vue'\n\nconst hasEdited = ref(false)\nconst showHint = ref(true)\n\nwatch(hasEdited, () => {\n  showHint.value = false\n}, { once: true })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cinput @input=\"hasEdited = true\">\n  \u003Cp v-if=\"showHint\">Start typing to edit.\u003C/p>\n\u003C/template>\n","vue","",[14,26,27,47,64,71,96,115,120,135,147,158,168,173,183,202,224],{"__ignoreMap":24},[28,29,32,36,40,44],"span",{"class":30,"line":31},"line",1,[28,33,35],{"class":34},"s95oV","\u003C",[28,37,39],{"class":38},"s4JwU","script",[28,41,43],{"class":42},"svObZ"," setup",[28,45,46],{"class":34},">\n",[28,48,50,54,57,60],{"class":30,"line":49},2,[28,51,53],{"class":52},"snl16","import",[28,55,56],{"class":34}," { ref, watch } ",[28,58,59],{"class":52},"from",[28,61,63],{"class":62},"sU2Wk"," 'vue'\n",[28,65,67],{"class":30,"line":66},3,[28,68,70],{"emptyLinePlaceholder":69},true,"\n",[28,72,74,77,81,84,87,90,93],{"class":30,"line":73},4,[28,75,76],{"class":52},"const",[28,78,80],{"class":79},"sDLfK"," hasEdited",[28,82,83],{"class":52}," =",[28,85,86],{"class":42}," ref",[28,88,89],{"class":34},"(",[28,91,92],{"class":79},"false",[28,94,95],{"class":34},")\n",[28,97,99,101,104,106,108,110,113],{"class":30,"line":98},5,[28,100,76],{"class":52},[28,102,103],{"class":79}," showHint",[28,105,83],{"class":52},[28,107,86],{"class":42},[28,109,89],{"class":34},[28,111,112],{"class":79},"true",[28,114,95],{"class":34},[28,116,118],{"class":30,"line":117},6,[28,119,70],{"emptyLinePlaceholder":69},[28,121,123,126,129,132],{"class":30,"line":122},7,[28,124,125],{"class":42},"watch",[28,127,128],{"class":34},"(hasEdited, () ",[28,130,131],{"class":52},"=>",[28,133,134],{"class":34}," {\n",[28,136,138,141,144],{"class":30,"line":137},8,[28,139,140],{"class":34},"  showHint.value ",[28,142,143],{"class":52},"=",[28,145,146],{"class":79}," false\n",[28,148,150,153,155],{"class":30,"line":149},9,[28,151,152],{"class":34},"}, { once: ",[28,154,112],{"class":79},[28,156,157],{"class":34}," })\n",[28,159,161,164,166],{"class":30,"line":160},10,[28,162,163],{"class":34},"\u003C/",[28,165,39],{"class":38},[28,167,46],{"class":34},[28,169,171],{"class":30,"line":170},11,[28,172,70],{"emptyLinePlaceholder":69},[28,174,176,178,181],{"class":30,"line":175},12,[28,177,35],{"class":34},[28,179,180],{"class":38},"template",[28,182,46],{"class":34},[28,184,186,189,192,195,197,200],{"class":30,"line":185},13,[28,187,188],{"class":34},"  \u003C",[28,190,191],{"class":38},"input",[28,193,194],{"class":42}," @input",[28,196,143],{"class":34},[28,198,199],{"class":62},"\"hasEdited = true\"",[28,201,46],{"class":34},[28,203,205,207,209,212,214,217,220,222],{"class":30,"line":204},14,[28,206,188],{"class":34},[28,208,10],{"class":38},[28,210,211],{"class":42}," v-if",[28,213,143],{"class":34},[28,215,216],{"class":62},"\"showHint\"",[28,218,219],{"class":34},">Start typing to edit.\u003C/",[28,221,10],{"class":38},[28,223,46],{"class":34},[28,225,227,229,231],{"class":30,"line":226},15,[28,228,163],{"class":34},[28,230,180],{"class":38},[28,232,46],{"class":34},[10,234,235,236,239],{},"Adding ",[14,237,238],{},"immediate: true"," runs the callback immediately and uses up that one execution.",[10,241,242,249],{},[243,244,248],"a",{"href":245,"rel":246},"https://vuejs.org/guide/essentials/watchers.html#once-watchers",[247],"nofollow","Read the Vue documentation",".",[251,252,253],"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 .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":24,"searchDepth":49,"depth":49,"links":255},[],"Vue 3.4 once watchers stop automatically after the first callback, useful for one-time reactions to state changes.","md",{},221,"/vue-watch-once",{"title":5,"description":256},"vue-watch-once/index",[23],"DC6h1mLK1xu4cZ-jRQztUyzTCRRPW_iMt7zTA7MBWf4",[266,270],{"title":267,"path":268,"stem":269,"children":-1},"Pause a watcher while you batch changes","/vue-pause-watcher","vue-pause-watcher/index",{"title":271,"path":272,"stem":273,"children":-1},"Watch array changes without traversing every nested object","/vue-watch-depth","vue-watch-depth/index",1788695822212]