欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3 Composition API的使用簡介

 更新時間:2021年03月25日 08:57:06   作者:Abiel  
這篇文章主要介紹了Vue3 Composition API的使用簡介,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下

vue3.0在7月發(fā)布了rc版本,vue-cli4.5后也支持選擇vue3作為備選版本可以體驗了,vue3的正式版本相必也不遠(yuǎn)了。學(xué)不動了呀!!!!
相比vue2.0版本(Option API),Composition API(組合API)算是3.0的重大變更之一了。

概述

Composition API 主要靈感來源于React Hooks,目的是通過一組低侵入式的、函數(shù)式的 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等參數(shù),通過引入的ref、onMounted等方法實現(xiàn)數(shù)據(jù)的雙向綁定、生命周期函數(shù)的執(zhí)行。

為什么需要

1.在組件比較復(fù)雜的情況下,可以將邏輯代碼合到一起去,而不會被option強(qiáng)行分隔。這提高了代碼質(zhì)量的上限,同時也拉低了代碼質(zhì)量的下限。來自官方的一張對比圖:

2.更好的進(jìn)行復(fù)用。

在vue2中,想要復(fù)用部分邏輯的代碼,都是通過mixin進(jìn)去。但mixin進(jìn)去的內(nèi)容實際上很不直觀,而且相同命名會被覆蓋。而通過composition API,因為所有的方法都是引入的,可以將單獨(dú)某個邏輯進(jìn)行封裝。例如對發(fā)送驗證碼倒計時功能進(jìn)行封裝。

<template>
 <input type="number" placeholder="請輸入驗證碼">
 <button v-if="count">{{count}}秒后可重新發(fā)送</button>
 <button v-else @click="startCount">發(fā)送驗證碼</button>
</template>

<script lang="ts">
import { defineComponent, ref, 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原型上添加很多內(nèi)容,而是通過引入的方式,類型定義會更清晰。

setup

setup是vue新增的一個選項,它是組件內(nèi)使用Composition API的入口。setup是在創(chuàng)建vue組件實例并完成props的初始化之后執(zhí)行。因為setup會在option api解析之前被調(diào)用,所以setup中的this會與options中得完全不一樣。為了避免混亂,在setup中不使用this。同時setup返回的值,可以在模板和其他option中使用。從設(shè)計上來說,vue官方是將所有的事情在setup里完成。setup返回值連接的是template模板與方法。

ref、reactive

既然不在傳入data,那么將數(shù)據(jù)創(chuàng)建和監(jiān)聽響應(yīng)式就需要通過vue暴露出來的功能 ref或reactive。兩者有所區(qū)別,ref用于基礎(chǔ)賦值類型的數(shù)據(jù),而reactive用于引用類型的數(shù)據(jù)。

其中基礎(chǔ)賦值類型的值,在setup方法中,需要用 .value的方式進(jìn)行獲取和修改。因為賦值類型的值如果return出去返回值,就失去了數(shù)據(jù)的雙綁定。但是在template中,可以進(jìn)行直接訪問。

<template>
 <div>{{count}}
  <button @click="changeCount">添加</button>
 </div>
 <div>學(xué)生的姓名是:{{student.name}}</div>
 <div>學(xué)生的年齡是:{{student.age}}
  <button @click="changeStudentAge(20)">添加</button>
 </div>
</template>

<script lang="ts">
import { defineComponent, ref, 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,
   changeStudentAge
  }
 }
});
</script>

computed與watch

<template>
 <div>{{count}}</div>
 <div>{{doubleCount}}</div>
 <button @click="addCount">添加</button>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watchEffect, watch } from 'vue';

export default defineComponent({
 name: 'App',
 setup () {
  const count = ref(0)
  watch(count, () => { // 如多個則用數(shù)組的方式傳入[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會立馬執(zhí)行,執(zhí)行中被讀取的響應(yīng)式 數(shù)據(jù)會被觀測。而watch只有在watch對象有變化時才會執(zhí)行。

生命周期

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

以上就是Vue3 Composition API的使用簡介的詳細(xì)內(nèi)容,更多關(guān)于Vue3 Composition API的使用的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Vue使用el-table實現(xiàn)表格跨頁多選

    Vue使用el-table實現(xiàn)表格跨頁多選

    在我們?nèi)粘m椖块_發(fā)中,經(jīng)常會有表格跨頁多選的需求,接下來讓我們用?el-table示例一步步來實現(xiàn)這個需求,文中有詳細(xì)的代碼講解,對我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2023-08-08
  • vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)

    vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)

    這篇文章主要介紹了vue中響應(yīng)式布局如何將字體大小改成自適應(yīng),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報錯問題

    如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報錯問題

    這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報錯問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue2.0+elementui實現(xiàn)一個上門取件時間組件

    vue2.0+elementui實現(xiàn)一個上門取件時間組件

    這篇文章主要給大家介紹了關(guān)于vue2.0+elementui實現(xiàn)一個上門取件時間組件的相關(guān)資料,用于預(yù)約上門服務(wù)時間 看到網(wǎng)上有很多亂七八糟的代碼,看著頭疼,于是自己寫了一個簡單的,需要的朋友可以參考下
    2024-02-02
  • Vue項目優(yōu)化打包詳解

    Vue項目優(yōu)化打包詳解

    這篇文章主要為大家介紹了Vue項目的優(yōu)化打包,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • 淺談vue的幾種綁定變量的值 防止其改變的方法

    淺談vue的幾種綁定變量的值 防止其改變的方法

    下面小編就為大家分享一篇淺談vue的幾種綁定變量的值 防止其改變的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue和element上傳圖片以及進(jìn)行拖拽圖片排序問題

    vue和element上傳圖片以及進(jìn)行拖拽圖片排序問題

    這篇文章主要介紹了vue和element上傳圖片以及進(jìn)行拖拽圖片排序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • Vue導(dǎo)入excel文件的兩種方式(form表單和el-upload)

    Vue導(dǎo)入excel文件的兩種方式(form表單和el-upload)

    最近開發(fā)遇到一個點(diǎn)擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入的需求,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)入excel文件的兩種方式,分別是form表單和el-upload兩種方法,需要的朋友可以參考下
    2022-11-11
  • 在 Vue 中編寫 SVG 圖標(biāo)組件的方法

    在 Vue 中編寫 SVG 圖標(biāo)組件的方法

    這篇文章主要介紹了在 Vue 中編寫 SVG 圖標(biāo)組件的方法,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • 詳解基于Vue,Nginx的前后端不分離部署教程

    詳解基于Vue,Nginx的前后端不分離部署教程

    這篇文章主要介紹了詳解基于Vue,Nginx的前后端不分離部署教程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12

最新評論