淺談Vue3.0新版API之composition-api入坑指南

更新時間：2020年04月30日 16:42:32 作者：請叫我宋某某

這篇文章主要介紹了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解決了什么問題

使用傳統(tǒng)的option配置方法寫組件的時候問題，隨著業(yè)務復雜度越來越高，代碼量會不斷的加大；由于相關業(yè)務的代碼需要遵循option的配置寫到特定的區(qū)域，導致后續(xù)維護非常的復雜，同時代碼可復用性不高，而composition-api就是為了解決這個問題而生的

語法糖介紹

compositon-api提供了一下幾個函數(shù)

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，經(jīng)過reactive處理后的函數(shù)能變成響應式的數(shù)據(jù)，類似于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 中檢測狀態(tài)變化的方法，我們可以在渲染期間使用它。由于依賴關系跟蹤，當反應狀態(tài)發(fā)生變化時，視圖會自動更新。在 DOM 中呈現(xiàn)某些內容被認為是一種“副作用” : 我們的程序在程序本身(DOM)之外修改狀態(tài)。要應用并自動重新應用基于反應狀態(tài)的副作用，我們可以使用 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
   }
  }
}

有時我們需要依賴于其他狀態(tài)的狀態(tài)——在 Vue 中，這是通過計算屬性來處理的。要直接創(chuàng)建一個計算值，我們可以使用computed API

ref

上面計算屬性返回計算結果是什么？如果我們猜測一下內部是如何實現(xiàn) computed 的，我們可能會得出這樣的結論

function computed(getter) {
 let value
 watchEffect(() => {
  value = getter()
 })
 return value
}

但是我們知道這是行不通的: 如果 value 是一個類似 number 的基本類型，那么一旦返回，它與 computed 內部的更新邏輯的連接就會丟失。這是因為 JavaScript 基本類型是按值傳遞的，而不是按引用傳遞的

當一個值作為屬性分配給一個對象時，同樣的問題也會發(fā)生。如果被賦為屬性或從函數(shù)返回時，反應值不能保持其響應性，那么它就沒有多大用處。為了確保我們總是可以讀取計算的最新值，我們需要將實際值包裝在一個對象中，然后返回該對象

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的值，既<div>{{ count }} {{ double }}</div>即可

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如何組織代碼

往往是把一個功能的所有狀態(tài)、方法、都封裝到一個函數(shù)里面，方便統(tǒng)一管理，如果你按照這種方式來寫代碼，那么代碼的結構大致如下

export default {
 setup() { // ...
 }
}

function useCurrentFolderData(networkState) { // ...
}

function useFolderNavigation({ networkState, currentFolderData }) { // ...
}

function useFavoriteFolder(currentFolderData) { // ...
}

function useHiddenFolders() { // ...
}

function useCreateFolder(openFolder) { // ...
}

當我們哪個功能需要再其他組件被復用的時候，直接把相關的方法提取出去，然后再引用進來就可以了

可以看出composition api的面向人群主要是經(jīng)常寫輪子或者框架的開發(fā)者，因為他更靈活，可以寫出高內聚、低耦合的代碼

使用vue3的過程中也不是一定要用composition api的，如果業(yè)務不是很復雜使用option api也是沒什么問題的。

到此這篇關于淺談Vue3.0新版API之composition-api入坑指南的文章就介紹到這了,更多相關Vue3.0 composition-api 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: