這篇文章主要介紹了Vue3.0新版API之composition-api入坑指南,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
關於VUE3.0
由於vue3.0語法跟vue2.x的語法幾乎是完全兼容的,本文主要介紹瞭如何使用composition-api,主要分以下幾個方面來講
使用vite體驗vue3.0
composition-api解決了什麼問題
語法糖介紹
vite的安裝使用
vite倉庫地址 https://github.com/vuejs/vite 上面有詳細的安裝使用教程,按照步驟安裝即可
composition-api解決了什麼問題
使用傳統的option配置方法寫組件的時候問題,隨著業務複雜度越來越高,代碼量會不斷的加大;由於相關業務的代碼需要遵循option的配置寫到特定的區域,導致後續維護非常的複雜,同時代碼可複用性不高,而composition-api就是為了解決這個問題而生的
語法糖介紹
compositon-api提供了一下幾個函數
reactive
watchEffect
computed
ref
toRefs
生命週期的hooks
reactive
import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0 }) function increment() { state.count++ } return { state, increment } } }
Reactive 相當於當前的 Vue.observable () API,經過reactive處理後的函數能變成響應式的數據,類似於option api裡面的data屬性的值
watchEffect
import { reactive, computed, watchEffect } from 'vue' export default { setup() { const state = reactive({ count: 0 }) const double = computed(() => state.count * 2) function increment() { state.count++ } watchEffect(() => { console.log(double.value) }) return { state, increment } } }
Vue 中檢測狀態變化的方法,我們可以在渲染期間使用它。 由於依賴關係跟蹤,當反應狀態發生變化時,視圖會自動更新。 在 DOM 中呈現某些內容被認為是一種“副作用” : 我們的程序在程序本身(DOM)之外修改狀態。 要應用並自動重新應用基於反應狀態的副作用,我們可以使用 watchEffect API
computed
import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0 }) const double = computed(() => state.count * 2) function increment() { state.count++ } return { state, increment } } }
有時我們需要依賴於其他狀態的狀態――在 Vue 中,這是通過計算屬性來處理的。 要直接創建一個計算值,我們可以使用computed API
ref
上面計算屬性返回計算結果是什麼? 如果我們猜測一下內部是如何實現 computed 的,我們可能會得出這樣的結論
function computed(getter) { let value watchEffect(() => { value = getter() }) return value }
但是我們知道這是行不通的: 如果 value 是一個類似 number 的基本類型,那麼一旦返回,它與 computed 內部的更新邏輯的連接就會丟失。 這是因為 JavaScript 基本類型是按值傳遞的,而不是按引用傳遞的
當一個值作為屬性分配給一個對象時,同樣的問題也會發生。 如果被賦為屬性或從函數返回時,反應值不能保持其響應性,那麼它就沒有多大用處。 為了確保我們總是可以讀取計算的最新值,我們需要將實際值包裝在一個對象中,然後返回該對象
function computed(getter) { const ref = { value: null } watchEffect(() => { ref.value = getter() }) return ref }
所以要拿到ref與computed的值應該是那返回值下面的value
let count = ref(1) console.log(count.value) // 1 let double = computed(() => count.value * 2) // 2
值得注意,當我們在template裡面使用ref或者computed的時候,vue會自動把它們用reactive處理無需用count.value或者double.value的值,既
{{ count }} {{ double }}
即可
toRefs
toRefs API提供了一個方法可以把reactive的值處理為ref
生命週期的hooks
方法與option api基本一致
import { onBeforeMount, onMounted, reactive, watchEffect } from 'vue' export default { setup() { const state = reactive({ count: 0 }) const double = computed(() => state.count * 2) function increment() { state.count++ } watchEffect(() => { console.log(double.value) }) onMounted(() => { document.title = 'hello' }) return { state, increment } } }
最後講講關於使用composition api如何組織代碼
往往是把一個功能的所有狀態、方法、都封裝到一個函數裡面,方便統一管理,如果你按照這種方式來寫代碼,那麼代碼的結構大致如下
export default { setup() { // ... } } function useCurrentFolderData(networkState) { // ... } function useFolderNavigation({ networkState, currentFolderData }) { // ... } function useFavoriteFolder(currentFolderData) { // ... } function useHiddenFolders() { // ... } function useCreateFolder(openFolder) { // ... }
當我們哪個功能需要再其他組件被複用的時候,直接把相關的方法提取出去,然後再引用進來就可以了
可以看出composition api的面向人群主要是經常寫輪子或者框架的開發者,因為他更靈活,可以寫出高內聚、低耦合的代碼
使用vue3的過程中也不是一定要用composition api的,如果業務不是很複雜使用option api也是沒什麼問題的。
[ml5rwbikls ] 淺談Vue3.0新版API之composition-api入坑指南已經有387次圍觀