vue3.0在7月發(fā)布了rc版本，vue-cli4.5后也支持選擇vue3作為備選版本可以體驗(yàn)了，vue3的正式版本相必也不遠(yuǎn)了。學(xué)不動(dòng)了呀!!!!
相比vue2.0版本(Option API)，Composition API（組合API）算是3.0的重大變更之一了。
概述
Composition API 主要靈感來源于React Hooks，目的是通過一組低侵入式的、函數(shù)式的 API，使得我們能夠更靈活地「組合」組件的邏輯。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<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等參數(shù)，通過引入的ref、onMounted等方法實(shí)現(xiàn)數(shù)據(jù)的雙向綁定、生命周期函數(shù)的執(zhí)行。
為什么需要
1.在組件比較復(fù)雜的情況下，可以將邏輯代碼合到一起去，而不會(huì)被option強(qiáng)行分隔。這提高了代碼質(zhì)量的上限，同時(shí)也拉低了代碼質(zhì)量的下限。來自官方的一張對(duì)比圖：
2.更好的進(jìn)行復(fù)用。
在vue2中，想要復(fù)用部分邏輯的代碼，都是通過mixin進(jìn)去。但mixin進(jìn)去的內(nèi)容實(shí)際上很不直觀，而且相同命名會(huì)被覆蓋。而通過composition API，因?yàn)樗械姆椒ǘ际且氲模梢詫为?dú)某個(gè)邏輯進(jìn)行封裝。例如對(duì)發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能進(jìn)行封裝。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<template> <input type="number" placeholder="請(qǐng)輸入驗(yàn)證碼"> <button v-if="count">{{count}}秒后可重新發(fā)送</button> <button v-else @click="startCount">發(fā)送驗(yàn)證碼</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支持。不會(huì)再往vue原型上添加很多內(nèi)容，而是通過引入的方式，類型定義會(huì)更清晰。
setup
setup是vue新增的一個(gè)選項(xiàng)，它是組件內(nèi)使用Composition API的入口。setup是在創(chuàng)建vue組件實(shí)例并完成props的初始化之后執(zhí)行。因?yàn)閟etup會(huì)在option api解析之前被調(diào)用，所以setup中的this會(huì)與options中得完全不一樣。為了避免混亂，在setup中不使用this。同時(shí)setup返回的值，可以在模板和其他option中使用。從設(shè)計(jì)上來說，vue官方是將所有的事情在setup里完成。setup返回值連接的是template模板與方法。
ref、reactive
既然不在傳入data，那么將數(shù)據(jù)創(chuàng)建和監(jiān)聽響應(yīng)式就需要通過vue暴露出來的功能 ref或reactive。兩者有所區(qū)別，ref用于基礎(chǔ)賦值類型的數(shù)據(jù)，而reactive用于引用類型的數(shù)據(jù)。
其中基礎(chǔ)賦值類型的值，在setup方法中，需要用 .value的方式進(jìn)行獲取和修改。因?yàn)橘x值類型的值如果return出去返回值，就失去了數(shù)據(jù)的雙綁定。但是在template中，可以進(jìn)行直接訪問。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<template> <div>{{count}} <button @click="changeCount">添加</button> </div> <div>學(xué)生的姓名是:{{student.name}}</div> <div>學(xué)生的年齡是:{{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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<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, () => { // 如多個(gè)則用數(shù)組的方式傳入[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會(huì)立馬執(zhí)行，執(zhí)行中被讀取的響應(yīng)式 數(shù)據(jù)會(huì)被觀測。而watch只有在watch對(duì)象有變化時(shí)才會(huì)執(zhí)行。
生命周期
- beforeCreate -> 使用 setup()
- created -> 使用 setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
以上就是Vue3 Composition API的使用簡介的詳細(xì)內(nèi)容，更多關(guān)于Vue3 Composition API的使用的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://segmentfault.com/a/1190000024506507
