vue3.0組合式api的使用小結(jié)

更新時(shí)間：2022年08月05日 11:28:18 作者：船長(zhǎng)在船上

這篇文章主要介紹了vue3.0組合式api的使用小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1.setup使用

setup函數(shù)是 Composition API（組合API）的入口
setup是啟動(dòng)頁(yè)面后會(huì)自動(dòng)執(zhí)行的一個(gè)函數(shù)
項(xiàng)目中定義的所有變量，方法等都需要在setup中
在setup函數(shù)中定義的變量和方法最后都需要 return 出去，否則無(wú)法在視圖層中使用

setup(){
  console.log('自動(dòng)執(zhí)行')
  const name = '林一'
  const age = 20
  const company = '阿里巴巴'
  
  const btn =  ()=>{
      const res = `我叫${name},今年${age}歲了,在${company}上班`
      console.log(res)
  }
 
  // 計(jì)算屬性
  // 偵聽(tīng)器
  return {name,btn}
 }

2.生命周期函數(shù)

onBeforeMount —— 在掛載開(kāi)始之前被調(diào)用
onMounted —— 組件掛載時(shí)調(diào)用
onBeforeUpdate —— 數(shù)據(jù)更新時(shí)調(diào)用
onUpdated —— 數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染，在這之后會(huì)調(diào)用該鉤子
onBeforeUnmount —— 在卸載組件實(shí)例之前調(diào)用
onErrorCaptured —— 當(dāng)捕獲一個(gè)來(lái)自子孫組件的錯(cuò)誤時(shí)被調(diào)用

Vue應(yīng)用程序中有4個(gè)主要事件

創(chuàng)建 — 在組件創(chuàng)建時(shí)執(zhí)行
掛載 — DOM 被掛載時(shí)執(zhí)行
更新 — 當(dāng)響應(yīng)數(shù)據(jù)被修改時(shí)執(zhí)行
銷(xiāo)毀 — 在元素被銷(xiāo)毀之前立即運(yùn)行

import { onBeforeMount, ....... } from 'vue'

3.vuex

同vue2一致
需要安裝，引入

//安裝
npm install vuex@next --save
//引入
import {useStore} from 'vuex'

4.toRef介紹

toRef也可以創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù)
ref本質(zhì)是拷貝粘貼一份數(shù)據(jù)，脫離了與原數(shù)據(jù)的交互
ref函數(shù)將對(duì)象中的屬性變成響應(yīng)式數(shù)據(jù)，修改響應(yīng)式數(shù)據(jù)是不會(huì)影響到原數(shù)據(jù),但是會(huì)更新視圖層
toRef的本質(zhì)是引用，與原始數(shù)據(jù)有交互，修改響應(yīng)式數(shù)據(jù)會(huì)影響到原數(shù)據(jù),但是不會(huì)更新視圖層
使用需引入

import {toRef} from 'vue'
//toRef接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是要操作的對(duì)象，第二個(gè)參數(shù)是對(duì)象的某個(gè)屬性
const obj = {name:'林一'}
toRef(obj,'name')

setup(){
     
    const obj = {name:'林一',age:40}
    //  const res = ref(obj.name)
    const res = toRef(obj,'name')
    const btn = ()=>{
         res.value = '林二'
         console.log(res)
         console.log(obj)
     }
    return {res,btn}
 }

5.ref介紹

ref 為我們的值創(chuàng)建了一個(gè)響應(yīng)式引用
使用需引用

import {ref} from 'vue'//組合式api
ref('林一')

當(dāng)ref里的值發(fā)生改變時(shí)，視圖層會(huì)自動(dòng)更新
ref可操作基本數(shù)據(jù)類(lèi)型，也可以操作復(fù)雜數(shù)據(jù)類(lèi)型：對(duì)象，數(shù)組
建議：ref用來(lái)操作基本數(shù)據(jù)類(lèi)型：數(shù)字，字符串

setup(){
     const name = ref('林一')
     const age = ref(52)
     const company = ref('阿里巴巴')
    //  對(duì)象類(lèi)型
     const obj = ref({
         taobao:'淘寶',
         tamll:'天貓'
     })
    //  數(shù)組類(lèi)型
    const arr = ref([
        {
            xiami:'林二',
            huabei:'京東'
        }
    ])
     const btn = ()=>{
        //  響應(yīng)對(duì)象類(lèi)型
        //  name.value = '林三'
        //  obj.value.taobao = '淘寶000'
        //  console.log(obj)
        // 響應(yīng)數(shù)組類(lèi)型
        arr.value[0].xiami = '京東000'
        console.log(arr)
     }
     return {name,age,company,btn,obj,arr}
 }

6.組件傳值

//第一種：進(jìn)入頁(yè)面即刻傳值（祖孫傳值）
const p1 = reactive({name:'林一',age:52})
provide('p',p1)//祖?zhèn)?
 
const res = inject('p')//孫收
 
//第二種：點(diǎn)擊傳值
<Vue ref="val"/>//引入子組件，使用ref調(diào)用該子組件
const val = ref()
const p1 = reactive({name:'林一',age:52})
function btn(){
    val.value.receive(p1)
}

7.shallowRef和shallowReactive

shallowRef只處理基本類(lèi)型數(shù)據(jù)
shallowReactive只處理第一層數(shù)據(jù)
使用需引入

import { shallowReactive,shallowRef } from 'vue'

setup() {
        //shallowReactive:只處理第一層的數(shù)據(jù)
        const p1 = shallowReactive({
            name:'林一',
            product:{
                taobao:5
            }
        })
        // shallowRef:只處理基本類(lèi)型數(shù)據(jù)
        const p2 = shallowRef({
            val:1
        })
        console.log(p2)
        return{...toRefs(p1),p2}
    },

8.watchEffect

watchEffect 如果存在的話，在組件初始化的時(shí)候就會(huì)執(zhí)行一次用以收集依賴
watch 可以獲取到新值與舊值（更新前的值），而 watchEffect是拿不到的
watchEffect不需要指定監(jiān)聽(tīng)的屬性，他會(huì)自動(dòng)的收集依賴，只要我們回調(diào)中引用到了響應(yīng)式的屬性，那么當(dāng)這些屬性變更的時(shí)候，這個(gè)回調(diào)都會(huì)執(zhí)行，而 watchEffect 只能監(jiān)聽(tīng)指定的屬性而做出變更
使用需引入

import { watchEffect } from 'vue'

setup() {
        const p1 = ref(0)
        const p2 = ref(1)
        const p3 = reactive({
            name:'林一',
            age:50,
            product:{
                wx:14
            }
        })
       const S =  watchEffect(()=>{
            const a = p1.value
            const b = p2.value
            console.log('進(jìn)入頁(yè)面我就執(zhí)行')
        })
        S()//停止監(jiān)聽(tīng)
        return {p1,p2,p3}
    },

9.watch偵聽(tīng)器

與vue2一致，均是用來(lái)偵聽(tīng)數(shù)據(jù)變化的
使用需引入

import { watch } from 'vue'

setup() {
        const p1 = ref(0)
        const p2 = ref(1)
        const p3 = reactive({
            name:'林一',
            age:50,
            product:{
                wx:14
            }
        })
        // 一：偵聽(tīng)ref的基本數(shù)據(jù)
        // watch(p1,(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // },{immediate:true})//{immediate:true}立即偵聽(tīng)
 
        // 二：偵聽(tīng)多個(gè)ref響應(yīng)數(shù)據(jù)
        // watch([p1,p2],(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // })
 
        // 三：偵聽(tīng)整個(gè)reactive定義的數(shù)據(jù):只能監(jiān)聽(tīng)到最新的結(jié)果，之前的結(jié)果監(jiān)聽(tīng)不到
        // watch(p3,(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // })
        
        // 四：偵聽(tīng)reactive定義的數(shù)據(jù)中的某一個(gè)值:可以監(jiān)聽(tīng)到,無(wú)論層級(jí)有多深
        watch(()=>p3.product.wx,(newVal,oldVal)=>{
            console.log(newVal,oldVal)
        })
        return {p1,p2,p3}
    },

10.computed

與vue2一致，均是用來(lái)監(jiān)聽(tīng)數(shù)據(jù)變化
使用需引入

import { computed } from 'vue'

setup() {
 
    const mayun = ''
    const huateng = ''
    const res = reactive({linyi,liner})
 
    // 計(jì)算年齡總和
    const sum = computed({
        get(){
            return res.linyi + res.liner
        },
        set(val){
            console.log(val)
        }
    })
     
    return {...toRefs(res),sum}
}

11.reactive介紹

reactive同樣為我們的值創(chuàng)建了一個(gè)響應(yīng)式引用
定義基本普通類(lèi)型數(shù)據(jù)不能用reactive，用ref
reactive主要定義復(fù)雜數(shù)據(jù)類(lèi)型，比如數(shù)組，對(duì)象
reactive可響應(yīng)深層次的數(shù)據(jù)，比如多維數(shù)組
reactive返回一個(gè)響應(yīng)式的proxy對(duì)象
使用需引入

import { reactive } from 'vue'
reactive({name:'林一'})

setup(){
    //  const name = reactive({name:'林一'})
    //  const age = reactive({age:20})
    //  const company = reactive({company:'阿里巴巴'})
    // //  深層次響應(yīng)式
    //  const pro = reactive({
    //      a:'淘寶',
    //      b:'天貓',
    //      c:{
    //          d:'京東',
    //          e:'順豐'
    //      }
    //  })
     const btn = ()=>{
    //    name.name = '林二'
    //    age.age = 40
    //    pro.c.d = '京東0000'
          res.name = '林三'
     }
    // 共用一個(gè)reactive
    const name = '林四'
    const age = 52
    const company = '阿里巴巴'
    const res = reactive({name,age,company})
 
 
     return {res,btn}
 }

12.toRefs介紹

用于批量設(shè)置多個(gè)數(shù)據(jù)為響應(yīng)式數(shù)據(jù)
toRefs與原始數(shù)據(jù)有交互，修改響應(yīng)式數(shù)據(jù)會(huì)影響到原數(shù)據(jù),但是不會(huì)更新視圖層
toRefs還可以與其他響應(yīng)式函數(shù)交互，更加方便處理視圖層數(shù)據(jù)
使用需引入

import {toRefs} from 'vue'
toRefs(obj)

setup(){
    const obj = {name:'林一',age:40}
    const refs = reactive(obj)
    // const res = toRefs(refs)
     const btn = ()=>{
        //  res.name.value = '林三'
        //  console.log(res)
         console.log(refs)
         refs.name = '林二'
         console.log(refs)
         console.log(obj)
     }
     return {...toRefs(refs),btn}
 }

到此這篇關(guān)于vue3.0組合式api的使用小結(jié)的文章就介紹到這了,更多相關(guān)vue3組合式api使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: