vue3.0組合式api的使用小結

Posted on by

vue2開發缺點和vue3開發優點

  • vue2代碼冗餘，雜亂
  • vue3則可以把相關的功能代碼抽離分割在一起，方便開發者快速閱讀

1.setup使用

  • setup函數是 Composition API（組合API）的入口
  • setup是啟動頁面後會自動執行的一個函數
  • 項目中定義的所有變量，方法等都需要在setup中
  • 在setup函數中定義的變量和方法最後都需要 return 出去， 否則無法在視圖層中使用
setup(){
  console.log('自動執行')
  const name = '林一'
  const age = 20
  const company = '阿裡巴巴'
  
  const btn =  ()=>{
      const res = `我叫${name},今年${age}歲瞭,在${company}上班`
      console.log(res)
  }
 
  // 計算屬性
  // 偵聽器
  return {name,btn}
 }

2.生命周期函數

  • onBeforeMount —— 在掛載開始之前被調用
  • onMounted —— 組件掛載時調用
  • onBeforeUpdate —— 數據更新時調用
  • onUpdated —— 數據更改導致的虛擬 DOM 重新渲染，在這之後會調用該鉤子
  • onBeforeUnmount —— 在卸載組件實例之前調用
  • onErrorCaptured —— 當捕獲一個來自子孫組件的錯誤時被調用

Vue應用程序中有4個主要事件

  • 創建 — 在組件創建時執行
  • 掛載 — DOM 被掛載時執行
  • 更新 — 當響應數據被修改時執行
  • 銷毀 — 在元素被銷毀之前立即運行
import { onBeforeMount, ....... } from 'vue'

3.vuex

  • 同vue2一致
  • 需要安裝，引入
//安裝
npm install vuex@next --save
//引入
import {useStore} from 'vuex'

4.toRef介紹

  • toRef也可以創建一個響應式數據
  • ref本質是拷貝粘貼一份數據，脫離瞭與原數據的交互
  • ref函數將對象中的屬性變成響應式數據，修改響應式數據是不會影響到原數據,但是會更新視圖層
  • toRef的本質是引用，與原始數據有交互，修改響應式數據會影響到原數據,但是不會更新視圖層
  • 使用需引入
import {toRef} from 'vue'
//toRef接收兩個參數，第一個參數是要操作的對象，第二個參數是對象的某個屬性
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 為我們的值創建瞭一個響應式引用
  • 使用需引用
import {ref} from 'vue'//組合式api
ref('林一')
  • 當ref裡的值發生改變時，視圖層會自動更新
  • ref可操作基本數據類型，也可以操作復雜數據類型：對象，數組
  • 建議：ref用來操作基本數據類型：數字，字符串
setup(){
     const name = ref('林一')
     const age = ref(52)
     const company = ref('阿裡巴巴')
    //  對象類型
     const obj = ref({
         taobao:'淘寶',
         tamll:'天貓'
     })
    //  數組類型
    const arr = ref([
        {
            xiami:'林二',
            huabei:'京東'
        }
    ])
     const btn = ()=>{
        //  響應對象類型
        //  name.value = '林三'
        //  obj.value.taobao = '淘寶000'
        //  console.log(obj)
        // 響應數組類型
        arr.value[0].xiami = '京東000'
        console.log(arr)
     }
     return {name,age,company,btn,obj,arr}
 }

6.組件傳值

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

7.shallowRef和shallowReactive

  • shallowRef隻處理基本類型數據
  • shallowReactive隻處理第一層數據
  • 使用需引入
import { shallowReactive,shallowRef } from 'vue'
setup() {
        //shallowReactive:隻處理第一層的數據
        const p1 = shallowReactive({
            name:'林一',
            product:{
                taobao:5
            }
        })
        // shallowRef:隻處理基本類型數據
        const p2 = shallowRef({
            val:1
        })
        console.log(p2)
        return{...toRefs(p1),p2}
    },

8.watchEffect

  • watchEffect 如果存在的話，在組件初始化的時候就會執行一次用以收集依賴
  • watch 可以獲取到新值與舊值（更新前的值），而  watchEffect是拿不到的 
  •  watchEffect不需要指定監聽的屬性，他會自動的收集依賴， 隻要我們回調中引用到瞭 響應式的屬性， 那麼當這些屬性變更的時候，這個回調都會執行，而 watchEffect 隻能監聽指定的屬性而做出變更
  • 使用需引入
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('進入頁面我就執行')
        })
        S()//停止監聽
        return {p1,p2,p3}
    },

9.watch偵聽器

  • 與vue2一致，均是用來偵聽數據變化的
  • 使用需引入
import { watch } from 'vue'
setup() {
        const p1 = ref(0)
        const p2 = ref(1)
        const p3 = reactive({
            name:'林一',
            age:50,
            product:{
                wx:14
            }
        })
        // 一：偵聽ref的基本數據
        // watch(p1,(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // },{immediate:true})//{immediate:true}立即偵聽
 
        // 二：偵聽多個ref響應數據
        // watch([p1,p2],(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // })
 
        // 三：偵聽整個reactive定義的數據:隻能監聽到最新的結果，之前的結果監聽不到
        // watch(p3,(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // })
        
        // 四：偵聽reactive定義的數據中的某一個值:可以監聽到,無論層級有多深
        watch(()=>p3.product.wx,(newVal,oldVal)=>{
            console.log(newVal,oldVal)
        })
        return {p1,p2,p3}
    },

10.computed

  • 與vue2一致，均是用來監聽數據變化
  • 使用需引入
import { computed } from 'vue'
setup() {
 
    const mayun = ''
    const huateng = ''
    const res = reactive({linyi,liner})
 
    // 計算年齡總和
    const sum = computed({
        get(){
            return res.linyi + res.liner
        },
        set(val){
            console.log(val)
        }
    })
     
    return {...toRefs(res),sum}
}

11.reactive介紹

  • reactive同樣為我們的值創建瞭一個響應式引用
  • 定義基本普通類型數據不能用reactive，用ref
  • reactive主要定義復雜數據類型，比如數組，對象
  • reactive可響應深層次的數據，比如多維數組
  • reactive返回一個響應式的proxy對象
  • 使用需引入
import { reactive } from 'vue'
reactive({name:'林一'})
setup(){
    //  const name = reactive({name:'林一'})
    //  const age = reactive({age:20})
    //  const company = reactive({company:'阿裡巴巴'})
    // //  深層次響應式
    //  const pro = reactive({
    //      a:'淘寶',
    //      b:'天貓',
    //      c:{
    //          d:'京東',
    //          e:'順豐'
    //      }
    //  })
     const btn = ()=>{
    //    name.name = '林二'
    //    age.age = 40
    //    pro.c.d = '京東0000'
          res.name = '林三'
     }
    // 共用一個reactive
    const name = '林四'
    const age = 52
    const company = '阿裡巴巴'
    const res = reactive({name,age,company})
 
 
     return {res,btn}
 }

12.toRefs介紹

  • 用於批量設置多個數據為響應式數據
  • toRefs與原始數據有交互，修改響應式數據會影響到原數據,但是不會更新視圖層
  • toRefs還可以與其他響應式函數交互，更加方便處理視圖層數據
  • 使用需引入
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}
 }

到此這篇關於vue3.0組合式api的使用小結的文章就介紹到這瞭,更多相關vue3組合式api使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：