Tag VUE

Vue Composition API + Chart.js 基本使用

如果要在 Vue Composition API 來使用 Chart.js ，同時在更換資料時，圖表也要更新，要怎麼做？讓我來筆記一下詳細作法。

上一篇文章有提到公司舊專案使用eChart 做圖表，被掃出有資安風險，現在要改用 Chart.js，我原本沒有要搭配其他把Chart.js 做成元件的套件，但後來因為某些原因還是使用了 Vue-chart.js，在這邊紀錄一下我的作法與踩的坑。

去年參與的幾個專案有使用的 EChart 這個套件，結果被業主掃出有資安問題。綜合考量之下，決定改用 Chart.js 來取代 EChart。在這邊整理一下 Chart.js 在 Vue3 的使用方法。

今天把子系統推上了測試機，卻發生了不能登入的慘案。我本來以為是login沒有寫好，研究了很久，後來問了公司的devope工程師，他幫我看了之後，跟我說是我環境變數沒設好，就讓我來整理一下子系統的環境變數該怎麼設。

前端工程師的日常免不了要接 API 的資料回來列表，有條理地呈現資料，讓我來整理一下資料列表常用的技巧。

接手前輩的專案作維運，他使用的日曆套件是 Vue-datepicker-next，所以我也針對這個套件做了一番研究。大致上的參數用法在官網的 Demo 上都有示範，而我比較困惑的部分是在於年分的 disabled 部分，官網 Demo 並沒有示範年份不可選區間的部分，所以我做了一下研究。

今天在解一個 issue，有一個表單如下，選好設備與類型之後，進行搜尋會生成下方的表格，但是這個表格有一個bug，就是每次重新搜尋，重新生成表格都不會捲回表格最上方，而是會停在上次捲度的位置。剛好可以藉這個案例來談談 v-if 與 v-show的差異。

Vue3 提供了 ref() 跟 reactive() 兩種可供資料與畫面響應的資料類型，當程式或 API 傳來的資料改變時，畫面上的資料也會隨之改變。Vue3 的官方文件尤其推薦用戶使用 ref() 來宣告響應資料。以下整理幾個使用 ref() 時會迷惑的問題與解答

在 Vue 中有一個叫 computed 的神奇方法，它可以觀察在data的變數，一旦變數有了改變，就會去取變數來運算，產生一個新的值呈現在畫面上，而這個新的值不會寫回 Option API 的 data 中

初學 VUE 的時候常常混淆 computed 與 watch 的功能。用了幾次之後，慢慢產生一些基礎的認識，今天就讓我來分享一下 watch 要如何使用及要注意的事情。