🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正／微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付
什麼時候用ref，什麼時候用reactive？
官方文件及尤雨溪提到過，ref 一把梭，不建議用 reactive。我說的話不可信，尤雨溪的話百分百可信，用，用，用ref 一把梭。
ref - 你的"萬能工具箱"
// 什麼都能裝！
const name = ref('張三') // ✅ 字串
const age = ref(18) // ✅ 數字
const isLoading = ref(false) // ✅ 布林值
const user = ref({name: '李四'}) // ✅ 物件
const list = ref([]) // ✅ 陣列
// 用的時候要加 .value
name.value = '王五'
age.value = 20reactive - 你的"物件專用盒"
// 只能裝物件！
const user = reactive({ // ✅ 物件
name: '張三',
age: 18
})
const form = reactive({ // ✅ 物件
username: '',
password: ''
})
const list = reactive([]) // ✅ 陣列（其實也是物件）
// 用的時候直接點屬性
user.name = '李四'
form.username = 'admin'關鍵區別：重新賦值問題
場景：從後台請求資料
❌ reactive 的錯誤用法：
// 初始化
let list = reactive(['蘋果', '香蕉'])
// 模擬請求資料
setTimeout(() => {
const newData = ['西瓜', '葡萄', '芒果']
// ❌ 錯誤！這樣會丟失響應式！
list = newData
// 頁面不會更新！因為 list 的"監聽器"斷了
}, 1000)✅ ref 的正確用法：
// 初始化
const list = ref(['蘋果', '香蕉'])
// 模擬請求資料
setTimeout(() => {
const newData = ['西瓜', '葡萄', '芒果']
// ✅ 正確！通過 .value 重新賦值
list.value = newData
// 頁面正常更新！
}, 1000)✅ reactive 的正確用法（如果非要用）：
const state = reactive({
list: ['蘋果', '香蕉']
})
setTimeout(() => {
const newData = ['西瓜', '葡萄', '芒果']
// ✅ 正確！只改屬性，不改物件本身
state.list = newData
}, 1000)📝 實戰選擇指南
情況1：基礎資料 → 必須用 ref
// ✅ 用 ref
const count = ref(0)
const name = ref('')
const isVisible = ref(true)
// ❌ reactive 會報錯！情況2：需要重新賦值 → 必須用 ref
// 從API獲取資料
const data = ref(null)
const fetchData = async () => {
const result = await api.getData()
data.value = result // ✅ 可以重新賦值
}
// 切換頁面資料
const currentPageData = ref([])
const changePage = (page) => {
currentPageData.value = getDataByPage(page) // ✅ 可以重新賦值
}情況3：固定物件，只改屬性 → 可以用 reactive
// 表單資料 - 通常不會整個替換
const form = reactive({
username: '',
password: '',
remember: false
})
// 使用者資訊 - 通常不會整個替換
const userInfo = reactive({
name: '張三',
age: 25,
avatar: ''
})情況4：不確定用哪個 → 無腦用 ref
// 安全第一！
const something = ref(初始值)🎯 黃金法則
- 處理數字、字串、布林值？ → 用
ref - 需要
xxx = 新資料這樣賦值？ → 用ref - 只是一个固定物件，只改裡面的屬性？ → 可以考慮
reactive - 不確定？ → 直接用
ref
記住：ref 永遠不會錯，reactive 有時候會坑你！
官方文件及尤雨溪提到過，ref 一把梭，不建議用 reactive。我說的話不可信，尤雨溪的話百分百可信，用，用，用ref 一把梭。不服，不服你不用打我，去打他🤣
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
🏆 本月排行榜
評分標準：發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正／微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付