Vue3 Composition API

vue3.0在7月發佈了rc版本，vue-cli4.5後也支持選擇vue3做爲備選版本能夠體驗了，vue3的正式版本相必也不遠了。學不動了呀!!!!
相比vue2.0版本(Option API)，Composition API（組合API）算是3.0的重大變動之一了。

概述

Composition API 主要靈感來源於React Hooks，目的是經過一組低侵入式的、函數式的 API，使得咱們可以更靈活地「組合」組件的邏輯。

示例

<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等方法實現數據的雙向綁定、生命週期函數的執行。

爲何須要

1.在組件比較複雜的狀況下，能夠將邏輯代碼合到一塊兒去，而不會被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