關(guān)于VUE3.0

由于vue3.0語法跟vue2.x的語法幾乎是完全兼容的，本文主要介紹了如何使用composition-api，主要分以下幾個(gè)方面來講

• 使用vite體驗(yàn)vue3.0
• composition-api解決了什么問題
• 語法糖介紹

vite的安裝使用

vite倉庫地址 https://github.com/vuejs/vite 上面有詳細(xì)的安裝使用教程，按照步驟安裝即可

composition-api解決了什么問題

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

語法糖介紹

compositon-api提供了一下幾個(gè)函數(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 相當(dāng)于當(dāng)前的 Vue.observable () API，經(jīng)過reactive處理后的函數(shù)能變成響應(yīng)式的數(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 中檢測(cè)狀態(tài)變化的方法，我們可以在渲染期間使用它。 由于依賴關(guān)系跟蹤，當(dāng)反應(yīng)狀態(tài)發(fā)生變化時(shí)，視圖會(huì)自動(dòng)更新。 在 DOM 中呈現(xiàn)某些內(nèi)容被認(rèn)為是一種“副作用” : 我們的程序在程序本身(DOM)之外修改狀態(tài)。 要應(yīng)用并自動(dòng)重新應(yīng)用基于反應(yīng)狀態(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
   }
  }
}

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

ref

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

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

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

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

function computed(getter) {
 const ref = {
  value: null
 }
 watchEffect(() => {
  ref.value = getter()
 })
 return ref
}

所以要拿到ref與computed的值應(yīng)該是那返回值下面的value

let count = ref(1)

console.log(count.value) // 1

let double = computed(() => count.value * 2) // 2

值得注意，當(dāng)我們?cè)趖emplate里面使用ref或者computed的時(shí)候，vue會(huì)自動(dòng)把它們用reactive處理無需用count.value或者double.value的值，既<div>{{ count }} {{ double }}</div>即可

toRefs

toRefs API提供了一個(gè)方法可以把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
   }
  }
}

最后講講關(guān)于使用composition api如何組織代碼

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

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

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

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

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

function useHiddenFolders() { // ...
}

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

當(dāng)我們哪個(gè)功能需要再其他組件被復(fù)用的時(shí)候，直接把相關(guān)的方法提取出去，然后再引用進(jìn)來就可以了

可以看出composition api的面向人群主要是經(jīng)常寫輪子或者框架的開發(fā)者，因?yàn)樗`活，可以寫出高內(nèi)聚、低耦合的代碼

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

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

最新評(píng)論