---
url: /blog-vue/vue-trigger-ref-problem.md
description: 前陣子使用 triggerRef 時發現某些情境下無法觸發響應，一起來看看發生甚麼事吧 (´・ω・`)
---

![vue-trigger-ref-problem](/vue-trigger-ref-problem.webp){.cover}

# Vue 之 triggerRef 問題

`triggerRef` 主要用於觸發 `shallowRef` 響應，但是在某些情境下會無法觸發響應。%( ´•̥̥̥ ω •̥̥̥\` )%

::: tip 甚麼是 `shallowRef`
想了解甚麼是 `shallowRef` 的朋友，可以參考我之前寫的[文章](./vue-shallow-ref-and-ref)。
:::

## 問題

[問題重現](https://play.vuejs.org/#eNqNVLuO00AU/ZUrN3Gk4PCqghPx2C2ggNWCaOIUxr52vDsej2bGSSTLiAoKSqSVoACJYmskGj4IVin5BO6MEydkl7BN4rmPc4/vnOPKeSCENyvRGTi+imQmNCjUpQAW8nQYOFoFzijgWS4KqaECiUkP1DRkrJgfm2ctszRFSc9QQyKLHDoE12lbHhW5WMW9vjmYaZ17AQ94VHClIQ51CMMtTF8RJk/Hk5E7nnRNYcCTkkc6KziEcXxADW4XqoCDbfZmISvRE6Waup0ONcAWKddUUKy+CuXm7f/gbMLEcOx53iYwsZh+v1karYgOGnPBQo10AvBflVrTrPsRy6JTWmVLnTZ6cfbt19fPy+/vLs4++v2mcm+Xodr2/fxxvjx/u/zw/hKAhZjeGtGt+n36t2clQj6qqmbTdU2cTWBVbO9ndiMvYmQ0ztQEDvQp7fe33sfpkRTowpIs9U5UwUkvdnGBExFAxlA+E2a1JJdBs1KTs1f6xMa0LLG3jkdTjE6viJ+ohYkFzpFEhXKGgdPmdChT1E368PlTXNBzmyT6JaPqPcljVAUrDcem7GHJY6K9VWfZPrayJf29UIcLjVytX8oQNZW1rQ8ckrHZ3b9efUP3jnfX9pFgaItrC1zXcPNQR9Mda1Gaa5RJGCEcyUKoZqy9w5dGnANYe4iMZqXfeE3Y4iHMMz09wCQsmVZujEnG0eL49nfkdntQ1SvrWQIuGWU4avq9zZweuNYMNmk5mDkFQ48Vqdv5/eXTG3gN4+YjYIEmlzAGxmo1DbSGQxRbmsjyHOOMFNjGDKt9piPNm2E74gdS/+5ccgK0Vvhb6/UfhXHI0A==)

從以上例子可以看到，當 `shallowRef` 傳遞給子元件後，執行 `triggerRef` 並沒有觸發子元件內的響應。

官方有一個 [issue](https://github.com/vuejs/core/issues/7614) 討論此問題。

不過目前看來還沒辦法解決，所以遇到此問題時，只能回歸直接賦值或者參考 issue 內其他解法。

## 總結 🐟

* `shallowRef` 傳遞給子元件後，執行 `triggerRef` 不會觸發子元件內的響應
* 直接賦值或者參考 issue 內其他解法