反推 - Alpine.js


Posted by TempuraEngineer on 2023-12-29

目錄


Alpine.js是甚麼

Alpine.js是一個輕量的JS框架,作者是Laravel Livewire的作者,他聲稱Alpine.js是現代版的jQuery

Laravel Livewire的作者早年也寫Vue,所以在Alpine借鑑了許多Vue的語法

寫過Vue的人應該能滿快上手的,但相應的缺點就是常會把x寫成v而不自覺😂

Alpine還有幾個特色

1.響應式框架
2.不使用虛擬 DOM 所以較輕量


可重複使用的組件

根據Does Alpine have a concept of components?中提到的,目前alpine.js並不支援,未來應該也不打算支援

但是如果需要的話,搭配alpinejs-component還是可以做出來的


stackover flow的bug

這應該是我試寫到目前覺得最勸退的點

Uncaught RangeError: Maximum call stack size exceeded中發文者提到他使用axios撈資料,然後傳給chart.js,卻發生stackover flow

除了chart.js,也有人提到巢狀結構組件也可能觸發這個bug,而且更慘的是3.13.3的現在似乎沒有workaround可以處理這個問題

alpine.js + chart.js

上方的這個例子,如果放慢點選速度的話可以正常執行

但是一旦按得比較快就會整個crash


參考資料

Alpine.js
Does Alpine have a concept of components?
Uncaught RangeError: Maximum call stack size exceeded


#alpine.js







Related Posts

Hoisting

Hoisting

為你的 Github 首頁加上酷酷的貪吃蛇動畫

為你的 Github 首頁加上酷酷的貪吃蛇動畫

Day 02 任務

Day 02 任務


Comments