2 of 33

自我介紹

大家好，我叫 Jan

參加讀書會動機:�會參加這次的讀書會是因為想要學習 Vue ，雖然在工作上也有用到一點 Vue，不過還是 React 居多，�多學一點也沒壞事吧~~��Github�Linkedin��技術都歡迎一起交流~~

如果對於股市回測 side project 有興趣的話，也可以私訊我 (React, Nextjs)

3 of 33

2.1 ref()的使用

ref() 接收參數，並將其包裹在一個帶有 .value 屬性的 ref 對象中返回

4 of 33

ref() + TypeScript

5 of 33

ref() + setup (Composition API)

由於 setup() 每次都要手動 return ref() 的變數，所以官方提供了 <script setup> 方法

6 of 33

Why ref()?

ref() 多了一個 .value() ，感覺更不直觀，那為什麼要用？

Ans: Reactivity (響應式)��

7 of 33

Reactivity 響應式？那是什麼？

指的是 Vue 幫助你即時更新相依資料這件事

�…it’s the concept that when x changes or updates in one location, the things that depend on the value of x are recalculated and updated in various other locations in a non-blocking fashion, without having to tie up threads sitting around just waiting for events to happen. ….

當 x 在一個位置發生更改或更新時，依賴於 x 值的事物將會無條件更新�

8 of 33

Demo

Q: 點擊按鈕以後，console.log 出來的結果，跟畫面上顯示的內容，分別為何？�A: Demo

9 of 33

使用 ref() 以後，Vue 能夠自動偵測到變動，進而更新畫面，而原生的 JavaScript 不具備這樣的功能�

那 Vue 怎麼辦到的...?

10 of 33

Vue 使用了 getter setter

getter setter 相關文章

11 of 33

2.3 ref()深層物件響應式

12 of 33

等等，那不是 reactive 嗎？

沒錯，在 ref 中，如果是普通型別就會直接回傳值，但如果是物件型別，就會回傳一個 reactive 的值

13 of 33

2.4 DOM 更新的時機和 nextTick() 關係

當你修改了響應式狀態時，DOM 會被自動更新。但是需要注意的是，DOM 更新不是同步的。Vue 會在“next tick”更新周期中緩沖所有狀態的修改，以確保不管你進行了多少次狀態修改，每個組件都只會被更新一次。

14 of 33

修改資料和更新畫面的 DOM 是兩回事。前者是同步執行，後者是非同步執行。

畫面只會顯示一次 999，而不是從 0 到 999

15 of 33

如果有需要要等待 DOM 更新完成後再執行額外的代碼，可以使用 nextTick() 全局 API：

�Demo 連結

16 of 33

2.5 reactive() 的使用

17 of 33

reactive() 的原理

Proxy 相關文章

18 of 33

reactive() + TypeScript

就跟一般的 Object 一樣

19 of 33

reactive() 的限制 - 1

必須是 Object 型別，如果使用普通型別將失去響應式，Demo

��

20 of 33

reactive() 的限制 - 2

不能隨意替換整個對象，因為記憶位置會被改變，一樣會失去響應式的效果

21 of 33

Reactive Proxy vs Original

只有 Vue代理對象是響應式的，更改原始對象不會觸發更新。
Vue 的代理對象(Proxy) 跟原始對象是不相等的

22 of 33

ref() / reactive() 的解包(構)

何謂解包？

�所謂解包就是獲取到 ref 對象上 value 屬性的值。常用的兩種方法就是 .value() 和 unref()。

23 of 33

ref()解包的注意事項

新的 ref 賦值給一個關聯了已有 ref 的屬性，那麽它會替換掉舊的 ref

24 of 33

Template 的解包注意事項 - 1

只有頂級的 ref 屬性才會被解包。��count 和 object 是頂級屬性，但 object.id 不是

理想中的情況:��

25 of 33

Template 的解包注意事項 - 2

在 Vue 官網上說明，如果 count + 1 可以正常運作，反觀 Object.id + 1 不會��那怎麼叫不按預期工作？

�那怎麼解決？�

26 of 33

解決方法

使用 .value()
改成頂級ref

27 of 33

講了那麼多，到底 ref 跟 reactive 差在哪？

ref : 可以接受任何型態的資料，取資料時需要 .value()。

reactive : 只能接受 Object 或 Array，會對內部的屬性變動做深層的監聽，取資料時不需要 .value。

尤雨溪專訪影片

作者表示: 團隊溝通好就好

28 of 33

深度探討 1

Q: 畫面會更新嗎？如果不會的話，要怎麼調整？

29 of 33

深度探討 1 - 答案

不會，因為當你從 reactive 創建的對象中解構出屬性時，解構出來的屬性就不再是響應式的了。

怎麼解決？

加上 toRefs��Demo�相關文章

30 of 33

深度探討 2

模板中有些資料是固定不動的，該用 ref/reactive 綁定模板嗎？

為什麼？

31 of 33

深度探討 2 - 答案

如果模板中的某些數據是固定不動的，通常不需要將其綁定為響應式數據。

Vue 的響應式系統主要用於處理會發生變化的數據，將固定不變的數據設置為響應式的並不會帶來任何好處，反而可能會增加不必要的性能開銷。

可以，但沒必要

1 of 33