HackMD
Composition API
Composition API 是這次 Vue 3 中一個相當大的新功能，開發將超出原有 Vue 的限制，提供更大的變化及運用。
✐ 特點介紹
- 可以自由撰寫邏輯順序
- 重 JS 基礎知識
- 全部整合進 setup 內
- 高度彈性
- 方便引入外部函式庫
- 編譯後的程式碼更容易壓縮
✐ 撰寫注意
- Option 全部移除改為 setup(){ … return{}}
- 沒有 this (會用到的機率非常低)
- 用 ESM 方式撰寫
https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js
✐ 撰寫開始
-
script標籤加上type="model" -
import {} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js'載入esm-browser CDNESM 是具名匯入，所以需要寫出模組化匯入名稱，因此通常會是 import { … } form './app.js' 的方式匯入)
-
setup內會return一個物件（若資料要渲染畫面，需要定義一個變數，並且透過 return 回傳）
// JS <script type="module"> // 引入 ESM，script 的 type 記得改成 module import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js' // 用 ESM 就不用 Vue. 開頭 const app = createApp({ // Composition API 一定會有 setup setup() { const text = '卡斯伯棒棒'; // 需要回傳值，才能在 HTML 使用 return { text } } }); app.mount('#app'); // mount 生成元件 </script>data, methods, created, mounted 都屬於 Option API
在 Composition API 裡面全部使用 setup(){…return{}}
✐ Composition API 的資料建構
資料的定義方法，一定要使用特定的方法來運作
➷ data → ref, reactive 方法
1. reactive :
- 限制只能使用物件（function、array都是 object）
- 標準的 Proxy 物件，在進行取值的時候，會有一個 Handler 控制器用來追蹤，有反應時會進行回傳（所以如果直接覆蓋 Proxy 時，就會失去雙向綁定的特性）
<script type="module">
// 引入 ref
import { createApp, ref } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js'
const app = createApp({
setup() {
// 使用 ref() 進行雙向綁定
const text = ref('卡斯伯棒棒');
// 需要回傳值，才能在 HTML 使用
return {
text
}
}
});
app.mount('#app');
</script>
