Vue－Composition API 前言

終於來了。

希望解決 Options API 的弊病

• code 散落各地，缺發群聚性，可讀性也差
• 同樣的邏輯沒辦法被重用

簡單來說 Composition API 可以讓你的 code 群組起來，也實現了「把邏輯抽出去」的功能，換句話說就跟 React 的 custom hook 是很像很像的概念，所以才會這麼多人愛用它。

基本用法

先來看 code 再來解釋：

<template>
  <div class="home">
    <h2>Home</h2>
    <p>Hello, My Name is {{ name }}, and I'm {{ age }} years old</p>
    <button @click="onClick">Click Me</button>
  </div>
</template>

<script>
  export default {
    setup() {
      let name = 'PeaNu'
      let age = 24
      function onClick() {
        console.log('Clicked')
      }

      // 這個 return 很重要
      return { name, age, onClick }
    }
  }
</script>

要使用 Composition API 的第一步就是建立 setup hook，他其實就是一個 function 而已，不過特別的地方在於「可以直接在裡面寫 JavaScript」。

上面可以看到在 setup 中我可以建立變數或函式，這個是在 Options API 中沒辦法做到的事情。

接著最後再用 return 把東西給丟出去，這個目的是為了：

• 讓 template 中能夠存取
• 讓 template 中能夠存取
• 讓 template 中能夠存取

寫到這裡應該會發現這跟 React 的 custom hook 很像，我們都是把邏輯封裝在 function 後再把對應的 state 或 method 給 return 出去，所以這邊應該不難理解為什麼能這樣子操作。

總之這個就是最基本的用法，接下來是幾個補充知識：

觸發時機

setup 是生命週期中「最先開始」被執行的 hook，也就是 created、beforeCreate 都還要前面。

你可以試著拿這段去跑跑看就懂意思了：

export default {
  setup() {
    console.log('settng...')
    let name = 'PeaNu'
    let age = 24
    function onClick() {
      console.log('Clicked')
    }

    return { name, age, onClick }
  },
  beforeCreate() {
    console.log('creating...')
  },
  created() {
    console.log('created')
  }
}

出來的順序一定是：

• settng...
• creating...
• created

或也可以回去複習一下 Vue－生命週期 的那張圖，裡面可以看到 setup 會是第一個被執行的 hook。

預設不具有 Reactive 的功能

附註：這邊有強調這是「預設」，所以並不是無法做到，這點要先搞清楚。

簡單來說我們從 setup 中傳出去的變數就算被「更新」了，也不會「反應」在 template 上，像這樣：

<template>
  <div class="home">
    <p>Hello, My Name is {{ name }}, and I'm {{ age }} years old</p>
    <button @click="changeName">Click Me</button>
  </div>
</template>

export default { setup() { let name = 'PeaNu' let age = 24 return { name, age } }, methods: {
changeName() { this.name = 'PPB' // 這邊的 log 會印出 PPB，但畫面上的 name 依然為 PeaNu
console.log(this.name) } } }

所以這個跟我們用 data 來建立資料時有很大的不同，要特別留意這點。