示例

<template> 
  <div>{{count}}</div> 
  <button @click="addCount">添加</button> 
</template> 
 
<script lang="ts"> 
import { defineComponent, ref, onMounted } from 'vue'; 
 
export default defineComponent({ 
  name: 'App', 
  setup () { 
    const count = ref(0) 
    const getCount = () => { 
      count.value = Math.floor(Math.random() * 10) 
    } 
    const addCount = () => { 
      count.value++ 
    } 
    onMounted(() => { 
      getCount() 
    }) 
 
    return { 
      count, 
      addCount 
    } 
  } 
}); 
</script> 

Composition API顧名思義就是不再傳入data、mounted等參數，通過引入的ref、onMounted等方法實現數據的雙向綁定、生命周期函數的執行。

為什么需要
在組件比較復雜的情況下，可以將邏輯代碼合到一起去，而不會被option強行分隔。這提高了代碼質量的上限，同時也拉低了代碼質量的下限。來自官方的一張對比圖：

2.更好的進行復用。

在vue2中，想要復用部分邏輯的代碼，都是通過mixin進去。但mixin進去的內容實際上很不直觀，而且相同命名會被覆蓋。而通過composition API，因為所有的方法都是引入的，可以將單獨某個邏輯進行封裝。例如對發送驗證碼倒計時功能進行封裝。

<template> 
  <input type="number" placeholder="請輸入驗證碼"> 
  <button v-if="count">{{count}}秒后可重新發送</button> 
  <button v-else @click="startCount">發送驗證碼</button> 
</template> 
 
<script lang="ts"> 
import { defineComponent, ref, reactive } from 'vue'; 
 
const userCountDown = () => { 
  const count = ref(0) 
  const countDown = (num: number) => { 
    count.value = num 
    num-- 
    if (num > 0) { 
      setTimeout(() => { 
        countDown(num) 
      }, 1000) 
    } 
  } 
  const startCount = () => { 
    // get verifyCode 
    countDown(60) 
  } 
 
  return { count, startCount } 
} 
 
export default defineComponent({ 
  name: 'Home', 
  setup () { 
    const { count, startCount } = userCountDown() 
    return { count, startCount } 
  } 
}); 
</script> 

3.更好的typescript支持。不會再往vue原型上添加很多內容，而是通過引入的方式，類型定義會更清晰。

setup
setup是vue新增的一個選項，它是組件內使用Composition API的入口。setup是在創建vue組件實例并完成props的初始化之后執行。因為setup會在option api解析之前被調用，所以setup中的this會與options中得完全不一樣。為了避免混亂，在setup中不使用this。同時setup返回的值，可以在模板和其他option中使用。從設計上來說，vue官方是將所有的事情在setup里完成。setup返回值連接的是template模板與方法。

ref、reactive
既然不在傳入data，那么將數據創建和監聽響應式就需要通過vue暴露出來的功能 ref或reactive。兩者有所區別，ref用于基礎賦值類型的數據，而reactive用于引用類型的數據。

其中基礎賦值類型的值，在setup方法中，需要用 .value的方式進行獲取和修改。因為賦值類型的值如果return出去返回值，就失去了數據的雙綁定。但是在template中，可以進行直接訪問。

<template> 
  <div>{{count}} 
    <button @click="changeCount">添加</button> 
  </div> 
  <div>學生的姓名是:{{student.name}}</div> 
  <div>學生的年齡是:{{student.age}} 
    <button @click="changeStudentAge(20)">添加</button> 
  </div> 
</template> 
 
<script lang="ts"> 
import { defineComponent, ref, reactive } from 'vue'; 
 
export default defineComponent({ 
  name: 'Home', 
  setup () { 
    const count = ref(0) 
    const changeCount = () => { 
      count.value = count.value + 1 
    } 
    const student = reactive({ 
      name: 'Bob', 
      age: 12 
    }) 
    const changeStudentAge = (age: number) => { 
      student.age = age 
    } 
    return { 
      count, 
      changeCount, 
      student, 
      changeStudentAge 
    } 
  } 
}); 
</script> 

computed與watch

<template> 
  <div>{{count}}</div> 
  <div>{{doubleCount}}</div> 
  <button @click="addCount">添加</button> 
</template> 
 
<script lang="ts"> 
import { defineComponent, ref, computed, watchEffect, watch } from 'vue'; 
 
export default defineComponent({ 
  name: 'App', 
  setup () { 
    const count = ref(0) 
    watch(count, () => { // 如多個則用數組的方式傳入[count, count1] 
      console.log('watch', count.value) 
    }) 
    watchEffect(() => { 
      console.log('watchEffect', count.value) 
    }) 
    const addCount = () => { 
      count.value++ 
    } 
    const doubleCount = computed(() => { 
      return count.value * 2 
    }) 
    return { 
      count, 
      doubleCount, 
      addCount 
    } 
  } 
}); 
</script> 

watch與watchEffect的差別是，watchEffect會立馬執行，執行中被讀取的響應式 數據會被觀測。而watch只有在watch對象有變化時才會執行。

生命周期

beforeCreate -> 使用 setup() 
created -> 使用 setup() 
beforeMount -> onBeforeMount 
mounted -> onMounted 
beforeUpdate -> onBeforeUpdate 
updated -> onUpdated 
beforeDestroy -> onBeforeUnmount 
destroyed -> onUnmounted 
errorCaptured -> onErrorCaptured