[{"data":1,"prerenderedAt":258},["ShallowReactive",2],{"content-/vue-watch-depth":3,"surround-/vue-watch-depth":249},{"id":4,"title":5,"body":6,"description":240,"extension":241,"meta":242,"navigation":69,"order":243,"path":244,"seo":245,"stem":246,"tags":247,"__hash__":248},"content/vue-watch-depth/index.md","Watch array changes without traversing every nested object",{"type":7,"value":8,"toc":238},"minimark",[9,18,224,234],[10,11,12,13,17],"p",{},"Vue 3.5+ lets you limit watcher traversal with a number. Use ",[14,15,16],"code",{},"deep: 1"," for an array when you care about its entries, not changes inside each entry.",[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 items = ref([{ id: 1, name: 'First' }])\n\nwatch(items, () => {\n  console.log('Array changed')\n}, { deep: 1 })\n\n// Triggers the watcher\nitems.value.push({ id: 2, name: 'Second' })\n\n// Does not trigger it\nitems.value[0].name = 'Renamed'\n\u003C/script>\n","vue","",[14,26,27,47,64,71,102,107,122,140,151,156,163,185,190,196,214],{"__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,96,99],{"class":30,"line":73},4,[28,75,76],{"class":52},"const",[28,78,80],{"class":79},"sDLfK"," items",[28,82,83],{"class":52}," =",[28,85,86],{"class":42}," ref",[28,88,89],{"class":34},"([{ id: ",[28,91,92],{"class":79},"1",[28,94,95],{"class":34},", name: ",[28,97,98],{"class":62},"'First'",[28,100,101],{"class":34}," }])\n",[28,103,105],{"class":30,"line":104},5,[28,106,70],{"emptyLinePlaceholder":69},[28,108,110,113,116,119],{"class":30,"line":109},6,[28,111,112],{"class":42},"watch",[28,114,115],{"class":34},"(items, () ",[28,117,118],{"class":52},"=>",[28,120,121],{"class":34}," {\n",[28,123,125,128,131,134,137],{"class":30,"line":124},7,[28,126,127],{"class":34},"  console.",[28,129,130],{"class":42},"log",[28,132,133],{"class":34},"(",[28,135,136],{"class":62},"'Array changed'",[28,138,139],{"class":34},")\n",[28,141,143,146,148],{"class":30,"line":142},8,[28,144,145],{"class":34},"}, { deep: ",[28,147,92],{"class":79},[28,149,150],{"class":34}," })\n",[28,152,154],{"class":30,"line":153},9,[28,155,70],{"emptyLinePlaceholder":69},[28,157,159],{"class":30,"line":158},10,[28,160,162],{"class":161},"sAwPA","// Triggers the watcher\n",[28,164,166,169,172,175,178,180,183],{"class":30,"line":165},11,[28,167,168],{"class":34},"items.value.",[28,170,171],{"class":42},"push",[28,173,174],{"class":34},"({ id: ",[28,176,177],{"class":79},"2",[28,179,95],{"class":34},[28,181,182],{"class":62},"'Second'",[28,184,150],{"class":34},[28,186,188],{"class":30,"line":187},12,[28,189,70],{"emptyLinePlaceholder":69},[28,191,193],{"class":30,"line":192},13,[28,194,195],{"class":161},"// Does not trigger it\n",[28,197,199,202,205,208,211],{"class":30,"line":198},14,[28,200,201],{"class":34},"items.value[",[28,203,204],{"class":79},"0",[28,206,207],{"class":34},"].name ",[28,209,210],{"class":52},"=",[28,212,213],{"class":62}," 'Renamed'\n",[28,215,217,220,222],{"class":30,"line":216},15,[28,218,219],{"class":34},"\u003C/",[28,221,39],{"class":38},[28,223,46],{"class":34},[10,225,226,233],{},[227,228,232],"a",{"href":229,"rel":230},"https://vuejs.org/guide/essentials/watchers.html#deep-watchers",[231],"nofollow","Read the Vue documentation",".",[235,236,237],"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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}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":239},[],"Use deep: 1 in Vue 3.5 to watch array replacement and mutation without tracking every nested property.","md",{},220,"/vue-watch-depth",{"title":5,"description":240},"vue-watch-depth/index",[23],"lg69aPBiqc_kVjoXvgP0MZkR6khzKBaaaiwStoi9M4E",[250,254],{"title":251,"path":252,"stem":253,"children":-1},"Let a watcher stop itself after the first change","/vue-watch-once","vue-watch-once/index",{"title":255,"path":256,"stem":257,"children":-1},"Nuxt 3.14 introduces the `shared/` folder for types and utilities that work in both server and client contexts with auto-imports.","/nuxt-shared-folder","nuxt-shared-folder/index",1788695822212]