有声小说,欢乐颂小说txt

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

Vue3CompositionAPI

示例

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、興縣ssl等。為上千多家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的興縣網(wǎng)站制作公司

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
  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   
  
  
      }   
  
  
    }   
  
  
  });

Composition API顧名思義就是不再傳入data、mounted等參數(shù)，通過(guò)引入的ref、onMounted等方法實(shí)現(xiàn)數(shù)據(jù)的雙向綁定、生命周期函數(shù)的執(zhí)行。

為什么需要
在組件比較復(fù)雜的情況下，可以將邏輯代碼合到一起去，而不會(huì)被option強(qiáng)行分隔。這提高了代碼質(zhì)量的上限，同時(shí)也拉低了代碼質(zhì)量的下限。來(lái)自官方的一張對(duì)比圖：

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

在vue2中，想要復(fù)用部分邏輯的代碼，都是通過(guò)mixin進(jìn)去。但mixin進(jìn)去的內(nèi)容實(shí)際上很不直觀，而且相同命名會(huì)被覆蓋。而通過(guò)composition API，因?yàn)樗械姆椒ǘ际且氲模梢詫为?dú)某個(gè)邏輯進(jìn)行封裝。例如對(duì)發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能進(jìn)行封裝。

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
  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 }   
  
  
    }   
  
  
  });

3.更好的typescript支持。不會(huì)再往vue原型上添加很多內(nèi)容，而是通過(guò)引入的方式，類型定義會(huì)更清晰。

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

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

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

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
  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   
  
  
      }   
  
  
    }   
  
  
  });

computed與watch

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
  import { defineComponent, ref, computed, watchEffect, watch } from 'vue';   
  
  
     
  
  
  export default defineComponent({   
  
  
    name: 'App',   
  
  
    setup () {   
  
  
      const count = ref(0)   
  
  
      watch(count, () => { // 如多個(gè)則用數(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   
  
  
      }   
  
  
    }   
  
  
  });

watch與watchEffect的差別是，watchEffect會(huì)立馬執(zhí)行，執(zhí)行中被讀取的響應(yīng)式數(shù)據(jù)會(huì)被觀測(cè)。而watch只有在watch對(duì)象有變化時(shí)才會(huì)執(zhí)行。

生命周期

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

本文名稱：Vue3CompositionAPI
本文來(lái)源：http://www.fisionsoft.com.cn/article/copddsh.html

新聞中心

其他資訊