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,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&http://www.cppcns.comgt; <div>學生的年齡是:{{student.age}} <button @click="chan程式設計客棧geStudentAge(20)">新增</button> </div> </template> <script lang="ts"> import { defineComponent,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,changeStudentAgprtfse } } }); </script>
computed與watch
<template> <div>{{count}}</div> <div>{{doubleCount}}</div> <button @click="addCount">新增</button> </template> <script lang="ts"> import { defineComponent,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物件有變化時才會執http://www.cppcns.com行。
生命週期
- beforeCreate -> 使用 setup()
- created -> 使用 setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
以上就是Vue3 Composition API的使用簡介的詳細內容,更多關於Vue3 Composition API的使用的資料請關注我們其它相關文章!