vue-next函數(shù)式api的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下vue-next函數(shù)式api的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司專注于棗莊網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供棗莊營(yíng)銷型網(wǎng)站建設(shè)，棗莊網(wǎng)站制作、棗莊網(wǎng)頁(yè)設(shè)計(jì)、棗莊網(wǎng)站官網(wǎng)定制、微信小程序定制開(kāi)發(fā)服務(wù)，打造棗莊網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供棗莊網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

setup

setup 會(huì)作為編寫(xiě)組件業(yè)務(wù)邏輯的主戰(zhàn)場(chǎng)，各種 hook 類型的方法均需要在 setup 這個(gè)作用域下調(diào)用，直接來(lái)看 RFC 中的例子：

<template>
 <button @click="increment">
  Count is: {{ state.count }}, double is: {{ state.double }}
 </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
 setup() {
  const state = reactive({
   count: 0,
   double: computed(() => state.count \* 2)
  })

  function increment() {
   state.count++
  }

  return {
   state,
   increment
  }
 }
}
</script>

其代碼結(jié)構(gòu)看起來(lái)和 vue2 基本保持一致，不過(guò)有以下幾點(diǎn)需要注意：

  • setup 本身的調(diào)用時(shí)機(jī)，從目前的源碼來(lái)看，介于 beforeCreate 和 created 這兩個(gè)生命周期之間，言外之意，就是你無(wú)法在這里使用 this 指向當(dāng)前組件實(shí)例

  • 對(duì)于 state 的聲明，我們使用 reactive 這個(gè) api 來(lái)構(gòu)造，對(duì)于 computed state 的聲明，使用 computed，兩者本質(zhì)上均是 Proxy 對(duì)象

  • 對(duì)于組件方法的聲明，我們直接通過(guò)聲明普通函數(shù)的方式進(jìn)行聲明即可，對(duì)于 state 的變更，直接通過(guò)閉包使用 reactive 返回的 Proxy 對(duì)象即可

  • setup 的返回值被稱作 render context，顧名思義，就是模板中可以訪問(wèn)到的各種數(shù)據(jù)和方法的上下文對(duì)象，我在之前的文章中曾提及，模板在解析數(shù)據(jù)時(shí)，會(huì)優(yōu)先考慮從 data 對(duì)象取值，之后就是這個(gè) render context 了

  • 除了返回 render context，還可以返回模板渲染函數(shù)，對(duì)，就是那個(gè) h(...)，這種形式對(duì)應(yīng)的情況是，當(dāng)我們沒(méi)有聲明 template 屬性時(shí)

在 vue-next 中，我們直接從 vue 導(dǎo)入 reactive 、computed 以及其他的 api 即可，如果在 vue2 版本上，我們還可以通過(guò)使用 composition-api 這個(gè) plugin 來(lái)使用這些 api。

state

聲明 state 主要有以下幾種形式。

基礎(chǔ)類型

基礎(chǔ)類型可以通過(guò) ref 這個(gè) api 來(lái)聲明，如下：

import { ref } from "vue";

export default {
setup() {
 const count = ref(0);
 
 function inc() {
  count.value++;
 }
 
 return { count, inc };
}
};

之所以要通過(guò) ref，是因?yàn)?js 中的基礎(chǔ)類型傳值不是引用傳值，因此 vue-next 內(nèi)部會(huì)自動(dòng)將它封裝為一個(gè) ref 對(duì)象，其值指向原始值。當(dāng)然，ref 指向引用類型也是沒(méi)有問(wèn)題的，其 value 指向引用類型變量的引用。

引用類型

引用類型除了可以使用 ref 來(lái)聲明，也可以直接使用 reactive，如下：

import { reactive } from "vue";

export default {
 setup() {
  const state = reactive({
    count: 0
  });
  
  function inc() {
   state.count++;
  }
  
  return { state, inc };
  // 或者通過(guò) toRefs 方法
  // return { ...toRefs(state), inc };
 }
};

這里使用 toRefs 的原因主要是因?yàn)椋绻?reactive 產(chǎn)生的對(duì)象，由于我們要只是保存對(duì)于該 Proxy 對(duì)象的引用，我們無(wú)法使用解構(gòu)來(lái)將它 flat，而 toRefs 會(huì)將每一個(gè)屬性在內(nèi)部包裹為一個(gè) ref 對(duì)象。

props

對(duì)于 prop 可以通過(guò)如下代碼聲明及使用：

export default {
 props: {
  count: Number
 },
 setup(props) {
  watch(() => {
   console.log(\`count is: \` + props.count)
  })
 }
}

這里可以發(fā)現(xiàn)其實(shí)和 vue2 中聲明的方式基本一樣，但值得注意的是，在 vue-next 中，props 的類型聲明不是必須的，如果你使用 typescript，完全可以改寫(xiě)為如下的版本：

interface PropTypesI {
  count: number
}

export default {
 setup(props: PropTypesI) {
  watch(() => {
   console.log(\`count is: \` + props.count)
  })
 }
}

除此之外，還可以直接通過(guò) watch 方法來(lái)觀察某個(gè) prop 的變動(dòng)，這是為什么呢？答案非常簡(jiǎn)單，就是 props 本身在源碼中，也是一個(gè)被 reactive 包裹后的對(duì)象，因此它具有響應(yīng)性，所以在 watch 方法中的回調(diào)函數(shù)會(huì)自動(dòng)收集依賴，之后當(dāng) count 變動(dòng)時(shí)，會(huì)自動(dòng)調(diào)用這些回調(diào)邏輯。

context

在 setup 那一小節(jié)中，我們知道，setup 在調(diào)用時(shí)，組件實(shí)例還未創(chuàng)建，那意味著我們無(wú)法使用 this 訪問(wèn)當(dāng)前實(shí)例，那我想通過(guò) this 在 vue2 中訪問(wèn)一些內(nèi)置屬性，怎么辦？比如 attrs 或者 emit。我們可以通過(guò) setup 的第二個(gè)參數(shù)：

setup(props, context) {
 do anything...
}

這個(gè) context 對(duì)象也是一個(gè) Proxy 對(duì)象，當(dāng)我們通過(guò) context.attrs 訪問(wèn)其屬性時(shí)，本質(zhì)上代理對(duì)象會(huì)將訪問(wèn)指向組件的內(nèi)部實(shí)例（即之間文章中提及的 componentInternalInstance）。

生命周期

每一個(gè) vue2 中的組件生命周期函數(shù)，當(dāng)前都對(duì)應(yīng)一個(gè)生命周期 hook，比如：

import { onMounted, onUpdated, onUnmounted } from "vue";

setup() {
 onMounted(() => { ... });
 onUpdated(() => { ... });
 onUnmounted(() => { ... });
}

這里值得注意的一點(diǎn)在于，對(duì)于 beforeCreate 和 created 生命周期，雖然有響應(yīng)的 hook，但是我覺(jué)的沒(méi)有必要單獨(dú)使用了，因?yàn)檫@些邏輯代碼大部分是一些初始化邏輯的代碼，直接寫(xiě)在 setup 方法中即可。

如何復(fù)用代碼

在這個(gè)基礎(chǔ)上，復(fù)用代碼的方式也不再像 vue2 中的那樣，通過(guò) mixin 或者 HOC 來(lái)達(dá)到復(fù)用代碼的目的，這里稍微說(shuō)一下，這些復(fù)用代碼方式中比較顯著的缺點(diǎn)有：

  • 隱藏了數(shù)據(jù)來(lái)源，主要體現(xiàn)在 mixin 中

  • 會(huì)犧牲一些性能，主要體現(xiàn)在 HOC 中

  • 可能會(huì)遇到命名沖突問(wèn)題，主要體現(xiàn)在 mixin 中

在 vue-next 中，復(fù)用代碼的邏輯本質(zhì)上是利用這些 hook 來(lái)拆分業(yè)務(wù)邏輯與狀態(tài)，如果你比較熟悉 react hooks 的話，應(yīng)該很快就能明白我指的是什么意思。如果我們將邏輯都寫(xiě)在 setup 方法中，很快代碼就會(huì)變得難以維護(hù)，在這方面，我們可以將一些耦合在一起的代碼抽離出來(lái)，同時(shí)以 use 前綴命名，聲明一個(gè)自定義的 hook，如下：

export default {
 setup() {
  const data = useSearch()
  const { sortedData, sort } = useSorting(data)
  return { data, sortedData, sort }
 }
}

function useSearch() { 
  ...fetch data
}

function useSort(data) { 
  ...sort data
}

除了以 inline 的方式來(lái)聲明，還可以將這些自定義的 hook 聲明在單獨(dú)的文件中，直接通過(guò) import 導(dǎo)入即可，比如：

import useSearch from '@hooks/search'
import useSort from '@hooks/sort'

與 react hooks 對(duì)比

vue-next 在這方面借鑒了 react hooks 的設(shè)計(jì)思想，但是從實(shí)現(xiàn)層來(lái)講，它們是不一樣的，主要有以下幾點(diǎn)：

  • vue-next 不依賴于其調(diào)用順序，而 react 依賴

  • vue-next 提供了生命周期方法，而 react 刻意模糊生命周期的概念

  • vue-next 基于響應(yīng)式系統(tǒng)實(shí)現(xiàn)，意味它的依賴不需要顯示聲明（而且是自動(dòng)的），而 react 需要手動(dòng)聲明依賴數(shù)組

以上是“vue-next函數(shù)式api的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：vue-next函數(shù)式api的示例分析-創(chuàng)新互聯(lián)
鏈接分享：http://bm7419.com/article22/dscscc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站收錄、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

小程序開(kāi)發(fā)