[{"data":1,"prerenderedAt":320},["ShallowReactive",2],{"note-\u002Fnotes\u002Fsync\u002Fvue-03-reactivity-fundamentals":3},{"id":4,"title":5,"body":6,"category":308,"date":309,"description":22,"draft":310,"extension":311,"meta":312,"navigation":46,"path":313,"seo":314,"sourcePath":315,"stem":316,"tags":317,"__hash__":319},"notes\u002Fnotes\u002Fsync\u002Fvue-03-reactivity-fundamentals.md","Reactivity Fundamentals",{"type":7,"value":8,"toc":303},"minimark",[9,14,19,23,54,57,98,101,184,191,223,228,231,295,299],[10,11,13],"h2",{"id":12},"declaring-reactive-state","Declaring Reactive State",[15,16,18],"h3",{"id":17},"ref","ref()",[20,21,22],"p",{},"宣告響應式狀態的建議方法",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-javascript shiki shiki-themes github-light github-dark","import { ref } from 'vue'\n\nconst count = ref(0)\n","javascript","",[31,32,33,41,48],"code",{"__ignoreMap":29},[34,35,38],"span",{"class":36,"line":37},"line",1,[34,39,40],{},"import { ref } from 'vue'\n",[34,42,44],{"class":36,"line":43},2,[34,45,47],{"emptyLinePlaceholder":46},true,"\n",[34,49,51],{"class":36,"line":50},3,[34,52,53],{},"const count = ref(0)\n",[20,55,56],{},"ref() 函數接受一個參數，並將其包裝在一個帶有 .value 屬性的 ref 物件中傳回",[24,58,60],{"className":26,"code":59,"language":28,"meta":29,"style":29},"const count = ref(0)\n\nconsole.log(count) \u002F\u002F { value: 0 }\nconsole.log(count.value) \u002F\u002F 0\n\ncount.value++\nconsole.log(count.value) \u002F\u002F 1\n",[31,61,62,66,70,75,81,86,92],{"__ignoreMap":29},[34,63,64],{"class":36,"line":37},[34,65,53],{},[34,67,68],{"class":36,"line":43},[34,69,47],{"emptyLinePlaceholder":46},[34,71,72],{"class":36,"line":50},[34,73,74],{},"console.log(count) \u002F\u002F { value: 0 }\n",[34,76,78],{"class":36,"line":77},4,[34,79,80],{},"console.log(count.value) \u002F\u002F 0\n",[34,82,84],{"class":36,"line":83},5,[34,85,47],{"emptyLinePlaceholder":46},[34,87,89],{"class":36,"line":88},6,[34,90,91],{},"count.value++\n",[34,93,95],{"class":36,"line":94},7,[34,96,97],{},"console.log(count.value) \u002F\u002F 1\n",[20,99,100],{},"setup() 函數中宣告並傳回它們",[24,102,104],{"className":26,"code":103,"language":28,"meta":29,"style":29},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\nfunction increment() {\n  count.value++\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"increment\">\n    {{ count }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[31,105,106,111,115,119,123,127,132,137,143,149,154,160,166,172,178],{"__ignoreMap":29},[34,107,108],{"class":36,"line":37},[34,109,110],{},"\u003Cscript setup>\n",[34,112,113],{"class":36,"line":43},[34,114,40],{},[34,116,117],{"class":36,"line":50},[34,118,47],{"emptyLinePlaceholder":46},[34,120,121],{"class":36,"line":77},[34,122,53],{},[34,124,125],{"class":36,"line":83},[34,126,47],{"emptyLinePlaceholder":46},[34,128,129],{"class":36,"line":88},[34,130,131],{},"function increment() {\n",[34,133,134],{"class":36,"line":94},[34,135,136],{},"  count.value++\n",[34,138,140],{"class":36,"line":139},8,[34,141,142],{},"}\n",[34,144,146],{"class":36,"line":145},9,[34,147,148],{},"\u003C\u002Fscript>\n",[34,150,152],{"class":36,"line":151},10,[34,153,47],{"emptyLinePlaceholder":46},[34,155,157],{"class":36,"line":156},11,[34,158,159],{},"\u003Ctemplate>\n",[34,161,163],{"class":36,"line":162},12,[34,164,165],{},"  \u003Cbutton @click=\"increment\">\n",[34,167,169],{"class":36,"line":168},13,[34,170,171],{},"    {{ count }}\n",[34,173,175],{"class":36,"line":174},14,[34,176,177],{},"  \u003C\u002Fbutton>\n",[34,179,181],{"class":36,"line":180},15,[34,182,183],{},"\u003C\u002Ftemplate>\n",[185,186,188,189],"h4",{"id":187},"為什麼是ref","為什麼是",[31,190,18],{},[192,193,194,205,214],"ul",{},[195,196,197,201,202,204],"li",{},[198,199,200],"strong",{},"自動追蹤與更新","：首次渲染時追蹤 ",[31,203,17],{},"，數值改變即自動更新 DOM。",[195,206,207,213],{},[198,208,209,212],{},[31,210,211],{},"value"," 的作用","：讓 Vue 能夠攔截並偵測數值的存取與修改。",[195,215,216,219,220,222],{},[198,217,218],{},"保持響應性傳遞","：可將 ",[31,221,17],{}," 傳入函式且不失聯，適合抽離與重構邏輯。",[224,225,227],"h5",{"id":226},"補充","補充：",[20,229,230],{},"在底層，Vue 在 getter 中執行跟踪，並在 setter 中執行觸發。從概念上講，你可以將 ref 想像成一個類似這樣的物件：",[24,232,234],{"className":26,"code":233,"language":28,"meta":29,"style":29},"\u002F\u002F pseudo code, not actual implementation\nconst myRef = {\n  _value: 0,\n  get value() {\n    track()\n    return this._value\n  },\n  set value(newValue) {\n    this._value = newValue\n    trigger()\n  }\n}\n",[31,235,236,241,246,251,256,261,266,271,276,281,286,291],{"__ignoreMap":29},[34,237,238],{"class":36,"line":37},[34,239,240],{},"\u002F\u002F pseudo code, not actual implementation\n",[34,242,243],{"class":36,"line":43},[34,244,245],{},"const myRef = {\n",[34,247,248],{"class":36,"line":50},[34,249,250],{},"  _value: 0,\n",[34,252,253],{"class":36,"line":77},[34,254,255],{},"  get value() {\n",[34,257,258],{"class":36,"line":83},[34,259,260],{},"    track()\n",[34,262,263],{"class":36,"line":88},[34,264,265],{},"    return this._value\n",[34,267,268],{"class":36,"line":94},[34,269,270],{},"  },\n",[34,272,273],{"class":36,"line":139},[34,274,275],{},"  set value(newValue) {\n",[34,277,278],{"class":36,"line":145},[34,279,280],{},"    this._value = newValue\n",[34,282,283],{"class":36,"line":151},[34,284,285],{},"    trigger()\n",[34,287,288],{"class":36,"line":156},[34,289,290],{},"  }\n",[34,292,293],{"class":36,"line":162},[34,294,142],{},[185,296,298],{"id":297},"deep-reactivity","Deep Reactivity",[300,301,302],"style",{},"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);}",{"title":29,"searchDepth":43,"depth":43,"links":304},[305],{"id":12,"depth":43,"text":13,"children":306},[307],{"id":17,"depth":50,"text":18},"frontend","2026-08-05",false,"md",{},"\u002Fnotes\u002Fsync\u002Fvue-03-reactivity-fundamentals",{"title":5,"description":22},"Vue\u002F03-Reactivity Fundamentals.md","notes\u002Fsync\u002Fvue-03-reactivity-fundamentals",[318],"Vue","duR2kYCNZfv8QjPTTlA4tIr2MkGi7SdFRti6eojxMNY",1788767747585]