Vue 基礎 II.
reactive VS ref
這是在Data取用資料的兩大響應式作法，如果回推 Javascript 原始語法來說，前者像是 Proxy( )，後者像 getter( )、setter( ) 用法，處理資料方式會有所不同，編寫也會不同。網路上有許多介紹及解釋，就自行參考。
js
// ref用法
const data_A=ref("i'm data")
const data_A1=ref("i use ref")
const data_A2=ref(123)
const user=computed(()=>{
return `name:${data_A.value},info:${data_A1.value},age:${data_A2.value}`
})
TIP
取用ref內的資料就多加.value即可。
js
// reactive用法
const data_B=reactive({
name:"i'm array",
info:"i use reactive",
age:456
})
const user2=**computed**(()=>{
return `name:${data_B.name},info:${data_B.info},age:${data_B.age}`
})
TIP
在陣列 ( array ) 多半使用 reactive較方便，而其他情況下或猶豫時，則 ref一路到底。
Vue標籤注意事項
這裡有幾個vue官方必要提醒的項目 Priority A Rules: Essential，我覺得有必要提醒自己。
- 標籤問題。避免標籤元素命名相同，除非你是用在同樣物件渲染使用時。html
<Item>...</Item> 錯誤標籤示範 <item>...</item> prop定義要明確，不要太過簡略，類似陣列方式。jsprops: { status: String 太簡略 }v-for保持要放key值。html<div v-for="item in array"> 漏掉key值 </div>v-if、v-for不要放在同一個標籤內。html<div v-if='isShow' v-for='item in array'> 錯誤放置 </div>css上確認是否單一使用或全區域使用。如果單一使用記住在style標籤上要加scoped或module。