[{"data":1,"prerenderedAt":119},["ShallowReactive",2],{"note-\u002Fnotes\u002Fvue-reactivity-basics":3},{"id":4,"title":5,"body":6,"category":104,"date":105,"description":106,"draft":107,"extension":108,"meta":109,"navigation":110,"path":111,"seo":112,"sourcePath":113,"stem":114,"tags":115,"__hash__":118},"notes\u002Fnotes\u002Fvue-reactivity-basics.md","Vue 反應性基礎",{"type":7,"value":8,"toc":95},"minimark",[9,13,17,28,46,55,58,80,83],[10,11,12],"h2",{"id":12},"為什麼要懂反應性",[14,15,16],"p",{},"Vue 的畫面更新建立在「讀取被追蹤、寫入觸發更新」。搞清楚這條路徑，比背 API 名稱更重要。",[10,18,20,24,25],{"id":19},"ref-與-reactive",[21,22,23],"code",{},"ref"," 與 ",[21,26,27],{},"reactive",[29,30,31,41],"ul",{},[32,33,34,36,37,40],"li",{},[21,35,23],{},"：包一層 ",[21,38,39],{},".value","，適合基本型別與需要整包替換的值。",[32,42,43,45],{},[21,44,27],{},"：對物件做 Proxy，適合結構穩定的狀態物件。",[14,47,48,49,51,52,54],{},"實務上元件內狀態多數用 ",[21,50,23],{}," 就夠；跨多欄位的表單模型再用 ",[21,53,27],{}," 也行。",[10,56,57],{"id":57},"常見陷阱",[59,60,61,71,74],"ol",{},[32,62,63,64,66,67,70],{},"解構 ",[21,65,27],{}," 物件會失去追蹤，需要 ",[21,68,69],{},"toRefs","。",[32,72,73],{},"在非同步 callback 裡讀寫仍要保持同一份來源。",[32,75,76,77,79],{},"大物件全程 ",[21,78,27],{}," 可能讓依賴圖難除錯，寧可拆小。",[10,81,82],{"id":82},"小結",[14,84,85,86,88,89,91,92,94],{},"先確認「誰在讀、誰在寫」，再選 ",[21,87,23],{}," \u002F ",[21,90,27],{},"。大部分 UI 狀態用 ",[21,93,23],{}," 起步最穩。",{"title":96,"searchDepth":97,"depth":97,"links":98},"",2,[99,100,102,103],{"id":12,"depth":97,"text":12},{"id":19,"depth":97,"text":101},"ref 與 reactive",{"id":57,"depth":97,"text":57},{"id":82,"depth":97,"text":82},"frontend","2026-08-20","整理 ref、reactive 與依賴追蹤的核心觀念，方便之後回頭對照實務行為。",false,"md",{},true,"\u002Fnotes\u002Fvue-reactivity-basics",{"title":5,"description":106},null,"notes\u002Fvue-reactivity-basics",[116,117],"Vue","Reactivity","e5PoVDMtWlCgwyoX1OBUG05C5O7jGyJYjrMdSQexMIc",1788767747489]