<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>Alex Liu</title>
        <link>https://mini-ghost.dev/posts/</link>
        <description>The personal website of Alex Liu</description>
        <lastBuildDate>Sun, 28 Dec 2025 12:05:00 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>zh-TW</language>
        <image>
            <title>Alex Liu</title>
            <url>https://avatars.githubusercontent.com/u/39984251</url>
            <link>https://mini-ghost.dev/posts/</link>
        </image>
        <copyright>© 2019-2025 Alex Liu. All rights reserved.</copyright>
        <atom:link href="https://mini-ghost.dev/rss.xml" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[Intersection Observer API 使用筆記]]></title>
            <link>https://mini-ghost.dev/posts/api-intersection-oserver</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/api-intersection-oserver</guid>
            <pubDate>Tue, 07 Jul 2020 10:12:47 GMT</pubDate>
            <description><![CDATA[剛進入業界時，為了提高網頁的效能以及更豐富的網頁互動效果，會利用 bLazy.js 實作圖片延遲載入或是用 waypoints.js 執行間單的進場效果。不過後來發現 Intersection Observer 這個瀏覽器原生的 Web API 讓這一切變得更簡單使用而且效能也更好。]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>JavaScript</category>
            <category>Web APIs</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/Intersection%20Observer%20API%20%E4%BD%BF%E7%94%A8%E7%AD%86%E8%A8%98?create=1594116767567" length="0" type="image//Intersection%20Observer%20API%20%E4%BD%BF%E7%94%A8%E7%AD%86%E8%A8%98"/>
        </item>
        <item>
            <title><![CDATA[深入淺出 axios（一）：預設 axios 物件、Axios 類別、攔截器]]></title>
            <link>https://mini-ghost.dev/posts/axios-source-code-1</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/axios-source-code-1</guid>
            <pubDate>Sat, 13 Feb 2021 14:39:24 GMT</pubDate>
            <description><![CDATA[axios 是一個 Promise based 的 HTTP 請求工具，他可以運行在「瀏覽器環境」與「Node.js」中。相信在 AJAX 技術被廣泛應用的今日，稍微有一點經驗的捧油門對他一定都不陌生。因此這系列分享不會特別著重在如何使用 axios，而是針對幾個我覺得 axios 有趣、好用的地方，研究他的原始碼是如何撰寫的，從中吸收寶貴的經驗。那就讓我們一起看下去吧！]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>JavaScript</category>
            <category>axios</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20axios%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9A%E9%A0%90%E8%A8%AD%20axios%20%E7%89%A9%E4%BB%B6%E3%80%81Axios%20%E9%A1%9E%E5%88%A5%E3%80%81%E6%94%94%E6%88%AA%E5%99%A8?create=1613227164210" length="0" type="image//%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20axios%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9A%E9%A0%90%E8%A8%AD%20axios%20%E7%89%A9%E4%BB%B6%E3%80%81Axios%20%E9%A1%9E%E5%88%A5%E3%80%81%E6%94%94%E6%88%AA%E5%99%A8"/>
        </item>
        <item>
            <title><![CDATA[深入淺出 axios（二）：XMLHttpRequest、CancelToken]]></title>
            <link>https://mini-ghost.dev/posts/axios-source-code-2</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/axios-source-code-2</guid>
            <pubDate>Fri, 26 Feb 2021 00:06:44 GMT</pubDate>
            <description><![CDATA[axios 是一個 Promise based 的 Http 請求工具，他可以運行在瀏覽器環境與 Node.js 中。相信在 AJAX 技術被廣泛應用的今日，稍微有一點經驗的捧油門對他一定都不陌生。上篇對 axios 的核心程式設計做了剖析，這篇要來從 axios 的適配器（adapter，介面）的設計認識 XMLHttpRequest 物件，並且了解 axios 取消請求的設計。那就就讓我們一起看下去吧！]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>JavaScript</category>
            <category>axios</category>
            <category>XMLHttpRequest</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20axios%EF%BC%88%E4%BA%8C%EF%BC%89%EF%BC%9AXMLHttpRequest%E3%80%81CancelToken?create=1614298004109" length="0" type="image//%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20axios%EF%BC%88%E4%BA%8C%EF%BC%89%EF%BC%9AXMLHttpRequest%E3%80%81CancelToken"/>
        </item>
        <item>
            <title><![CDATA[深入淺出 axios（三）：axios 內部 Promise 導致請求延遲]]></title>
            <link>https://mini-ghost.dev/posts/axios-source-code-3</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/axios-source-code-3</guid>
            <pubDate>Sat, 30 Oct 2021 13:16:18 GMT</pubDate>
            <description><![CDATA[axios 在 GitHub 上有超過 88.9k 的星星，擁有非常大量的使用社群，也有無數的開源貢獻者，但 axios 就因此無懈可擊了嗎？本篇將分享在今年年初一個筆者非常關注的的 PR 內容，而者個 PR 也被正式採納並發布在 axios v0.21.2 當中，就讓我們一起看下去吧！]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>JavaScript</category>
            <category>axios</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20axios%EF%BC%88%E4%B8%89%EF%BC%89%EF%BC%9Aaxios%20%E5%85%A7%E9%83%A8%20Promise%20%E5%B0%8E%E8%87%B4%E8%AB%8B%E6%B1%82%E5%BB%B6%E9%81%B2?create=1635599778101" length="0" type="image//%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20axios%EF%BC%88%E4%B8%89%EF%BC%89%EF%BC%9Aaxios%20%E5%85%A7%E9%83%A8%20Promise%20%E5%B0%8E%E8%87%B4%E8%AB%8B%E6%B1%82%E5%BB%B6%E9%81%B2"/>
        </item>
        <item>
            <title><![CDATA[使用 Vue.js 實作動態布局（Dynamic Layout）]]></title>
            <link>https://mini-ghost.dev/posts/dynamic-vue-layout</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/dynamic-vue-layout</guid>
            <pubDate>Wed, 10 Jun 2020 22:31:55 GMT</pubDate>
            <description><![CDATA[在使用 Vue 在製作比較複雜的專案時，可能會因應不同的頁面需求需要有多種不同的 Layout 設定，在 Nuxt.js 可以輕鬆的利用屬性來設定，但在 Vue CLI 下或是 Gridsome 中要如何實作呢？這裡將分享幾種實作方式。]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>Vue</category>
            <category>Gridsome</category>
            <category>Dynamic Layout</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E4%BD%BF%E7%94%A8%20Vue.js%20%E5%AF%A6%E4%BD%9C%E5%8B%95%E6%85%8B%E5%B8%83%E5%B1%80%EF%BC%88Dynamic%20Layout%EF%BC%89?create=1591828315435" length="0" type="image/js%20%E5%AF%A6%E4%BD%9C%E5%8B%95%E6%85%8B%E5%B8%83%E5%B1%80%EF%BC%88Dynamic%20Layout%EF%BC%89"/>
        </item>
        <item>
            <title><![CDATA[如何在 Vuetify 加入共用的 ConfirmBox]]></title>
            <link>https://mini-ghost.dev/posts/how-to-create-vuetify-global-confirmbox</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/how-to-create-vuetify-global-confirmbox</guid>
            <pubDate>Sun, 19 Sep 2021 18:33:26 GMT</pubDate>
            <description><![CDATA[在 Element-ui 中提供了 $alert、$notify、$message 這些方法，讓我們可以依照需求開啟對話框確認使用者的操作，或是叫出 Toast（或 Snackbar）針對使用者的操作結果進行回饋。但在 Vuefiy，雖然有 VDialog、VSnackber 這些 Component 卻沒有提供這類全域方法使用。這篇紀錄了我在真實專案中用到的解決方法，那就讓我們一起看下去吧！]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>JavaScript</category>
            <category>Vue</category>
            <category>Vuetify</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E5%A6%82%E4%BD%95%E5%9C%A8%20Vuetify%20%E5%8A%A0%E5%85%A5%E5%85%B1%E7%94%A8%E7%9A%84%20ConfirmBox?create=1632076406128" length="0" type="image//%E5%A6%82%E4%BD%95%E5%9C%A8%20Vuetify%20%E5%8A%A0%E5%85%A5%E5%85%B1%E7%94%A8%E7%9A%84%20ConfirmBox"/>
        </item>
        <item>
            <title><![CDATA[新手 JS 地下城 - 2F 時鐘 Clock]]></title>
            <link>https://mini-ghost.dev/posts/javascript-clock</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/javascript-clock</guid>
            <pubDate>Sun, 02 Jun 2019 16:07:16 GMT</pubDate>
            <description><![CDATA[這是由六角學院在 Udemy 推出的：JavaScript 題目篇 - 新手 JS 地下城，所出的題目。今天要來分享的是第二題：時鐘（Clock)]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>JavaScript</category>
            <category>Vanilla JS</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%96%B0%E6%89%8B%20JS%20%E5%9C%B0%E4%B8%8B%E5%9F%8E%20-%202F%20%E6%99%82%E9%90%98%20Clock?create=1559491636000" length="0" type="image//%E6%96%B0%E6%89%8B%20JS%20%E5%9C%B0%E4%B8%8B%E5%9F%8E%20-%202F%20%E6%99%82%E9%90%98%20Clock"/>
        </item>
        <item>
            <title><![CDATA[新手 JS 地下城 - 1F 九九乘法表 Multiplication Chart]]></title>
            <link>https://mini-ghost.dev/posts/javascript-multiplication-chart</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/javascript-multiplication-chart</guid>
            <pubDate>Tue, 28 May 2019 22:32:58 GMT</pubDate>
            <description><![CDATA[這是由六角學院在 Udemy 推出的：JavaScript 題目篇 - 新手 JS 地下城，所出的題目。裡面有各種有趣的題型可以練習，如果是剛接觸前端的捧油們可以在這裡面找一些題目來練練手。也可以在練習過後爬爬其他人所分享的製作方法，多方比較過後一定會有所成長的！]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>JavaScript</category>
            <category>Vanilla JS</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%96%B0%E6%89%8B%20JS%20%E5%9C%B0%E4%B8%8B%E5%9F%8E%20-%201F%20%E4%B9%9D%E4%B9%9D%E4%B9%98%E6%B3%95%E8%A1%A8%20Multiplication%20Chart?create=1559082778000" length="0" type="image//%E6%96%B0%E6%89%8B%20JS%20%E5%9C%B0%E4%B8%8B%E5%9F%8E%20-%201F%20%E4%B9%9D%E4%B9%9D%E4%B9%98%E6%B3%95%E8%A1%A8%20Multiplication%20Chart"/>
        </item>
        <item>
            <title><![CDATA[深入解析 Nuxt.js 的 <nuxt-link> Smart Prefetching 實作]]></title>
            <link>https://mini-ghost.dev/posts/nuxt-link-how-to-prefetch</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/nuxt-link-how-to-prefetch</guid>
            <pubDate>Wed, 02 Sep 2020 17:30:53 GMT</pubDate>
            <description><![CDATA[Smart Prefetching（或稱 Router Prefetch） 機制改善了使用者等待換頁請求的體驗，他讓頁面切換更為順暢。在 Nuxt.js 中內建的 <nuxt-link> 組件也實做了這項功能，讓我們一起從 Nuxt.js 的 source code 中認識這項技術並從中吸取大神們的寶貴經驗吧！]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>JavaScript</category>
            <category>Vue</category>
            <category>Nuxt</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%B7%B1%E5%85%A5%E8%A7%A3%E6%9E%90%20Nuxt.js%20%E7%9A%84%20%3Cnuxt-link%3E%20Smart%20Prefetching%20%E5%AF%A6%E4%BD%9C?create=1599067853162" length="0" type="image/js%20%E7%9A%84%20%3Cnuxt-link%3E%20Smart%20Prefetching%20%E5%AF%A6%E4%BD%9C"/>
        </item>
        <item>
            <title><![CDATA[Nuxt 進階應用：HTML 壓縮技巧全解析]]></title>
            <link>https://mini-ghost.dev/posts/optimize-nuxt-html</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/optimize-nuxt-html</guid>
            <pubDate>Sun, 24 Dec 2023 17:30:53 GMT</pubDate>
            <description><![CDATA[在網頁開發的過程中，如何在讓網站的效能有更多的提升一直都是個非常深的學問。在這篇文章中，我將分享如何在 Nuxt 中使用 html-minifier-terser 處理 HTML 壓縮，盡可能的提升網頁加載速度。如果你也正在使用 Nuxt 架設網站，相信這篇內容會讓你很有收穫，那就讓我們一起看下去吧！]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>Vue</category>
            <category>Nuxt</category>
            <category>HTML Compression</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/Nuxt%20%E9%80%B2%E9%9A%8E%E6%87%89%E7%94%A8%EF%BC%9AHTML%20%E5%A3%93%E7%B8%AE%E6%8A%80%E5%B7%A7%E5%85%A8%E8%A7%A3%E6%9E%90?create=1703439053162" length="0" type="image//Nuxt%20%E9%80%B2%E9%9A%8E%E6%87%89%E7%94%A8%EF%BC%9AHTML%20%E5%A3%93%E7%B8%AE%E6%8A%80%E5%B7%A7%E5%85%A8%E8%A7%A3%E6%9E%90"/>
        </item>
        <item>
            <title><![CDATA[深入淺出 pinia（一）：createPinia、defineStore]]></title>
            <link>https://mini-ghost.dev/posts/pinia-source-code-1</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/pinia-source-code-1</guid>
            <pubDate>Sat, 20 May 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[在開發比較大型的專案時我們經常需要將一些「狀態」儲存到一個共用的地方，讓些狀態可以更容易的在各個元件之間使用。Pinia 是目前 Vue 官方首推的狀態管理工具，而關於 Pinia 的使用介紹與五星吹捧更是多不勝數。因此這系列文章不會特別著重在如何使用 Pinia 而是深入剖析 Pinia 的原始碼，研究它的設計，從中吸收寶貴的經驗。]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>Vue</category>
            <category>Pinia</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20pinia%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9AcreatePinia%E3%80%81defineStore?create=1684540800000" length="0" type="image//%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20pinia%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9AcreatePinia%E3%80%81defineStore"/>
        </item>
        <item>
            <title><![CDATA[深入淺出 pinia（二）：createOptionsStore]]></title>
            <link>https://mini-ghost.dev/posts/pinia-source-code-2</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/pinia-source-code-2</guid>
            <pubDate>Sat, 20 May 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Pinia 是目前 Vue 官方首推的狀態管理工具。這個系列分享不會特別著重於如何使用 Pinia，而是深入剖析 Pinia 的原始碼，研究它的設計，從中吸收寶貴的經驗。在上一篇內容中，我們先查看了 Pinia 實例上的成員，也初步了解了 defineStore 的功能。接下來，我們將更深入地了解 Options Store 內部的實作。]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>Vue</category>
            <category>Pinia</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20pinia%EF%BC%88%E4%BA%8C%EF%BC%89%EF%BC%9AcreateOptionsStore?create=1684540800001" length="0" type="image//%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20pinia%EF%BC%88%E4%BA%8C%EF%BC%89%EF%BC%9AcreateOptionsStore"/>
        </item>
        <item>
            <title><![CDATA[深入淺出 pinia（三）：createSetupStore]]></title>
            <link>https://mini-ghost.dev/posts/pinia-source-code-3</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/pinia-source-code-3</guid>
            <pubDate>Sat, 20 May 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Pinia 是目前 Vue 官方首推的狀態管理工具。這系列文章不會特別著重在如何使用 Pinia 而是深入剖析 Pinia 的原始碼，研究它的設計，從中吸收寶貴的經驗。在上一篇的內容我們先看了 Options Store 的實作，發先最後會透過 Setup Store 完成整個 Store 的建立。因此接下來會更深入核心了解 Setup Store 內部的實作。]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>Vue</category>
            <category>Pinia</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20pinia%EF%BC%88%E4%B8%89%EF%BC%89%EF%BC%9AcreateSetupStore?create=1684540800002" length="0" type="image//%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20pinia%EF%BC%88%E4%B8%89%EF%BC%89%EF%BC%9AcreateSetupStore"/>
        </item>
        <item>
            <title><![CDATA[用 Vue.js 實作時下流行的深色模式（Dark Mode 🌓）網頁]]></title>
            <link>https://mini-ghost.dev/posts/practice-dark-mode-with-vue</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/practice-dark-mode-with-vue</guid>
            <pubDate>Sat, 30 May 2020 16:04:11 GMT</pubDate>
            <description><![CDATA[現在越來越多網站，開始加入「深色模式」的切換選擇，關於這個近期逐漸流行的色彩模式切換到底該怎麼做呢？在技術上會有什麼限制呢！]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>Vue</category>
            <category>Gridsome</category>
            <category>Dark Mode</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E7%94%A8%20Vue.js%20%E5%AF%A6%E4%BD%9C%E6%99%82%E4%B8%8B%E6%B5%81%E8%A1%8C%E7%9A%84%E6%B7%B1%E8%89%B2%E6%A8%A1%E5%BC%8F%EF%BC%88Dark%20Mode%20%F0%9F%8C%93%EF%BC%89%E7%B6%B2%E9%A0%81?create=1590854651796" length="0" type="image/js%20%E5%AF%A6%E4%BD%9C%E6%99%82%E4%B8%8B%E6%B5%81%E8%A1%8C%E7%9A%84%E6%B7%B1%E8%89%B2%E6%A8%A1%E5%BC%8F%EF%BC%88Dark%20Mode%20%F0%9F%8C%93%EF%BC%89%E7%B6%B2%E9%A0%81"/>
        </item>
        <item>
            <title><![CDATA[深入淺出 TanStack Query（一）：在呼叫 useQuery 後發生了什麼事]]></title>
            <link>https://mini-ghost.dev/posts/tanstack-query-source-code-1</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/tanstack-query-source-code-1</guid>
            <pubDate>Sat, 30 Sep 2023 13:45:16 GMT</pubDate>
            <description><![CDATA[你是怎麼管理專案的 server data 狀態呢？前端開發時不僅要處理 server data 的快取，還要讓它能盡可能的跨元件共用，最後又要在適當的時候清除或更新，阿哩阿雜的真的很煩人。TanStack Query 是一個可以很好的解決這些問題的工具。這個系列文章將分享如何使用 TanStack Query 以及深入暸解它底層運作的原理與邏輯與架構。]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>TanStack Query</category>
            <category>Observer Pattern</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20TanStack%20Query%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9A%E5%9C%A8%E5%91%BC%E5%8F%AB%20useQuery%20%E5%BE%8C%E7%99%BC%E7%94%9F%E4%BA%86%E4%BB%80%E9%BA%BC%E4%BA%8B?create=1696081516002" length="0" type="image//%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20TanStack%20Query%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9A%E5%9C%A8%E5%91%BC%E5%8F%AB%20useQuery%20%E5%BE%8C%E7%99%BC%E7%94%9F%E4%BA%86%E4%BB%80%E9%BA%BC%E4%BA%8B"/>
        </item>
        <item>
            <title><![CDATA[深入淺出 TanStack Query（二）：在呼叫 useMutation 後發生了什麼事]]></title>
            <link>https://mini-ghost.dev/posts/tanstack-query-source-code-2</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/tanstack-query-source-code-2</guid>
            <pubDate>Sat, 04 Nov 2023 09:00:00 GMT</pubDate>
            <description><![CDATA[你是怎麼管理專案的 server data 狀態呢？前端開發時不僅要處理 server data 的快取，還要讓它能盡可能的跨元件共用，最後又要在適當的時候清除或更新，阿哩阿雜的真的很煩人。TanStack Query 是一個可以很好的解決這些問題的工具。這個系列文章將分享如何使用 TanStack Query 以及深入暸解它底層運作的原理與邏輯與架構。]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>TanStack Query</category>
            <category>Observer Pattern</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20TanStack%20Query%EF%BC%88%E4%BA%8C%EF%BC%89%EF%BC%9A%E5%9C%A8%E5%91%BC%E5%8F%AB%20useMutation%20%E5%BE%8C%E7%99%BC%E7%94%9F%E4%BA%86%E4%BB%80%E9%BA%BC%E4%BA%8B?create=1699088400000" length="0" type="image//%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20TanStack%20Query%EF%BC%88%E4%BA%8C%EF%BC%89%EF%BC%9A%E5%9C%A8%E5%91%BC%E5%8F%AB%20useMutation%20%E5%BE%8C%E7%99%BC%E7%94%9F%E4%BA%86%E4%BB%80%E9%BA%BC%E4%BA%8B"/>
        </item>
        <item>
            <title><![CDATA[深入淺出 TanStack Query（三）：在呼叫 invalidateQueries 後發生了什麼事]]></title>
            <link>https://mini-ghost.dev/posts/tanstack-query-source-code-3</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/tanstack-query-source-code-3</guid>
            <pubDate>Wed, 27 Mar 2024 04:17:24 GMT</pubDate>
            <description><![CDATA[在使用 TanStack Query 時，我們經常需要手動地讓某些或是特定的 query 重新發送請求來取得最新的資料，此時，我們可以使用 invalidateQueries 方法。這篇文章將深入了解在調用 invalidateQueries 後 TanStack Query 做了什麼事，以及 invalidateQueries 與 refetch 的使用比較。]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>TanStack Query</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20TanStack%20Query%EF%BC%88%E4%B8%89%EF%BC%89%EF%BC%9A%E5%9C%A8%E5%91%BC%E5%8F%AB%20invalidateQueries%20%E5%BE%8C%E7%99%BC%E7%94%9F%E4%BA%86%E4%BB%80%E9%BA%BC%E4%BA%8B?create=1711513044680" length="0" type="image//%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA%20TanStack%20Query%EF%BC%88%E4%B8%89%EF%BC%89%EF%BC%9A%E5%9C%A8%E5%91%BC%E5%8F%AB%20invalidateQueries%20%E5%BE%8C%E7%99%BC%E7%94%9F%E4%BA%86%E4%BB%80%E9%BA%BC%E4%BA%8B"/>
        </item>
        <item>
            <title><![CDATA[用 Vue.js 做 15 Puzzle 拼圖小遊戲（下）]]></title>
            <link>https://mini-ghost.dev/posts/vue-15-puzzle-components</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/vue-15-puzzle-components</guid>
            <pubDate>Sat, 02 May 2020 01:32:32 GMT</pubDate>
            <description><![CDATA[上一篇分享了用 Vue.js 做 15-puzzle 小遊戲的資料部分。接下來這一篇來分：我是怎麼規劃 components 與遊戲成功的判定方式。]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>Vue</category>
            <category>15-puzzle</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E7%94%A8%20Vue.js%20%E5%81%9A%2015%20Puzzle%20%E6%8B%BC%E5%9C%96%E5%B0%8F%E9%81%8A%E6%88%B2%EF%BC%88%E4%B8%8B%EF%BC%89?create=1588383152592" length="0" type="image/js%20%E5%81%9A%2015%20Puzzle%20%E6%8B%BC%E5%9C%96%E5%B0%8F%E9%81%8A%E6%88%B2%EF%BC%88%E4%B8%8B%EF%BC%89"/>
        </item>
        <item>
            <title><![CDATA[用 Vue.js 做 15 Puzzle 拼圖小遊戲（上）]]></title>
            <link>https://mini-ghost.dev/posts/vue-15-puzzle-vuex</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/vue-15-puzzle-vuex</guid>
            <pubDate>Fri, 01 May 2020 23:50:57 GMT</pubDate>
            <description><![CDATA[前陣子在 Facebook 社團看到有網友用 Vanilla JS 做了一個 15 puzzle 的小遊戲，剛好假日非常有（ㄅㄧㄢ）空（ㄩㄢˊ），那就利用 Vue.js 來做做看囉！]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>Vue</category>
            <category>15-puzzle</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E7%94%A8%20Vue.js%20%E5%81%9A%2015%20Puzzle%20%E6%8B%BC%E5%9C%96%E5%B0%8F%E9%81%8A%E6%88%B2%EF%BC%88%E4%B8%8A%EF%BC%89?create=1588377057000" length="0" type="image/js%20%E5%81%9A%2015%20Puzzle%20%E6%8B%BC%E5%9C%96%E5%B0%8F%E9%81%8A%E6%88%B2%EF%BC%88%E4%B8%8A%EF%BC%89"/>
        </item>
        <item>
            <title><![CDATA[簡單的 Vue Render Functions 與動態組件的綜合應用]]></title>
            <link>https://mini-ghost.dev/posts/vue-render-function-dynamic-component</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/vue-render-function-dynamic-component</guid>
            <pubDate>Tue, 12 May 2020 19:46:19 GMT</pubDate>
            <description><![CDATA[在開發 Vue 專案的時候，單檔組件（SFC）提供了開發者非常好的便利性。但有時候在某些特殊情況時 Render Functions 提供了更好的靈活性，可以讓組件寫得更優雅。那我們該怎麼應用呢？]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>Vue</category>
            <category>Vue Components</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E7%B0%A1%E5%96%AE%E7%9A%84%20Vue%20Render%20Functions%20%E8%88%87%E5%8B%95%E6%85%8B%E7%B5%84%E4%BB%B6%E7%9A%84%E7%B6%9C%E5%90%88%E6%87%89%E7%94%A8?create=1589312779329" length="0" type="image//%E7%B0%A1%E5%96%AE%E7%9A%84%20Vue%20Render%20Functions%20%E8%88%87%E5%8B%95%E6%85%8B%E7%B5%84%E4%BB%B6%E7%9A%84%E7%B6%9C%E5%90%88%E6%87%89%E7%94%A8"/>
        </item>
        <item>
            <title><![CDATA[Webpack 動態載入的 Magic Comments]]></title>
            <link>https://mini-ghost.dev/posts/webpack-dynamic-import-magic-comments</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/webpack-dynamic-import-magic-comments</guid>
            <pubDate>Fri, 11 Sep 2020 22:52:45 GMT</pubDate>
            <description><![CDATA[動態載入（Dynamic import）可以有效的減少 Webpack 打包後的 bundle size。適當地使用動態載入，將不立即需要的 code 切分至獨立的模塊（chunk）可以在初次載入時帶來更好的使用者體驗。此外 webpack 也為動態載入提供了一些 Magic Comments，讓開發人員能更有彈性的調整各項細節。本篇將一一介紹這些 Comment 的用法並搭配簡易範例來呈現、說明。]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>Webpack</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/Webpack%20%E5%8B%95%E6%85%8B%E8%BC%89%E5%85%A5%E7%9A%84%20Magic%20Comments?create=1599864765395" length="0" type="image//Webpack%20%E5%8B%95%E6%85%8B%E8%BC%89%E5%85%A5%E7%9A%84%20Magic%20Comments"/>
        </item>
        <item>
            <title><![CDATA[為什麼 Nuxt 推薦使用全域的 $fetch]]></title>
            <link>https://mini-ghost.dev/posts/why-nuxt-recommends-dollarfetch</link>
            <guid isPermaLink="true">https://mini-ghost.dev/posts/why-nuxt-recommends-dollarfetch</guid>
            <pubDate>Sat, 12 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[Nuxt 在 HTTP 請求上提供了 $fetch 這個全域的 utils function，這個 utils function 讓我們可以輕鬆取得來自後端的資料，但為什麼 Nuxt 會推薦我們使用 $fetch 而不是其他的 HTTP 請求工具呢？讓我們一起認識 $fetch 並了解它的優勢吧！]]></description>
            <author>dsa1314@gmail.com (Alex Liu)</author>
            <category>Nuxt</category>
            <enclosure url="https://og-image-mini-ghost.vercel.app/%E7%82%BA%E4%BB%80%E9%BA%BC%20Nuxt%20%E6%8E%A8%E8%96%A6%E4%BD%BF%E7%94%A8%E5%85%A8%E5%9F%9F%E7%9A%84%20%24fetch?create=1744416000000" length="0" type="image//%E7%82%BA%E4%BB%80%E9%BA%BC%20Nuxt%20%E6%8E%A8%E8%96%A6%E4%BD%BF%E7%94%A8%E5%85%A8%E5%9F%9F%E7%9A%84%20%24fetch"/>
        </item>
    </channel>
</rss>