目錄

1.setup使用

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

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

3.vuex

4.toRef介紹

5.ref介紹

6.組件傳值

7.shallowRef和shallowReactive

8.watchEffect

9.watch偵聽器

10.computed

11.reactive介紹

12.toRefs介紹

13.Fragment

14.Teleport

15.Suspense

vue2開發(fā)缺點(diǎn)和vue3開發(fā)優(yōu)點(diǎn)

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

1.setup使用

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

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

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

• onBeforeMount —— 在掛載開始之前被調(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è)來自子孫組件的錯(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í)行
• 銷毀 — 在元素被銷毀之前立即運(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ù)類型，也可以操作復(fù)雜數(shù)據(jù)類型：對(duì)象，數(shù)組
• 建議：ref用來操作基本數(shù)據(jù)類型：數(shù)字，字符串

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

6.組件傳值

//第一種：進(jìn)入頁面即刻傳值（祖孫傳值） const p1 = reactive({name:'林一',age:52}) provide('p',p1)//祖?zhèn)鱟onst 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只處理基本類型數(shù)據(jù)
• shallowReactive只處理第一層數(shù)據(jù)
• 使用需引入

import { shallowReactive,shallowRef } from 'vue' setup() {//shallowReactive:只處理第一層的數(shù)據(jù)const p1 = shallowReactive({name:'林一',product:{taobao:5}})// shallowRef:只處理基本類型數(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)聽的屬性，他會(huì)自動(dòng)的收集依賴， 只要我們回調(diào)中引用到了 響應(yīng)式的屬性， 那么當(dāng)這些屬性變更的時(shí)候，這個(gè)回調(diào)都會(huì)執(zhí)行，而?watchEffect?只能監(jiān)聽指定的屬性而做出變更
• 使用需引入

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.valueconst b = p2.valueconsole.log('進(jìn)入頁面我就執(zhí)行')})S()//停止監(jiān)聽return {p1,p2,p3}},

9.watch偵聽器

• 與vue2一致，均是用來偵聽數(shù)據(jù)變化的，沒有緩存，可監(jiān)聽data中數(shù)據(jù)，支持異步
• 使用需引入

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

10.computed

• 與vue2一致，均是用來監(jiān)聽數(shù)據(jù)變化
• 是根據(jù)依賴關(guān)系進(jìn)行緩存的計(jì)算，只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)進(jìn)行更新
• 不能再data中出現(xiàn)同樣的名字
• 使用需引入

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)式引用
• 定義基本普通類型數(shù)據(jù)不能用reactive，用ref
• reactive主要定義復(fù)雜數(shù)據(jù)類型，比如數(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è)reactiveconst name = '林四'const age = 52const 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}}

13.Fragment

- 在Vue2中: 組件必須有一個(gè)根標(biāo)簽

- 在Vue3中: 組件可以沒有根標(biāo)簽, 內(nèi)部會(huì)將多個(gè)標(biāo)簽包含在一個(gè)Fragment虛擬元素中

- 好處: 減少標(biāo)簽層級(jí), 減小內(nèi)存占用

14.Teleport

?`Teleport` 是一種能夠?qū)⑽覀兊?lt;strong style="color:#DD5145">組件html結(jié)構(gòu)</strong>移動(dòng)到指定位置的技術(shù)。

<teleport to="移動(dòng)位置"><div v-if="isShow" class="mask"><div class="dialog"><h3>我是一個(gè)彈窗</h3><button @click="isShow = false">關(guān)閉彈窗</button></div></div></teleport>

15.Suspense

- 等待異步組件時(shí)渲染一些額外內(nèi)容，讓應(yīng)用有更好的用戶體驗(yàn)

- 使用步驟：

??- 異步引入組件

import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

使用```Suspense```包裹組件，并配置好```default``` 與 ```fallback```

<template><div class="app"><h3>我是App組件</h3><Suspense><template v-slot:default><Child/></template><template v-slot:fallback><h3>加載中.....</h3></template></Suspense></div> </template>

?

?????? ?作者：船長(zhǎng)在船上
🚩🚩🚩 ?主頁：來訪地址船長(zhǎng)在船上的博客
🔨🔨🔨 ?簡(jiǎn)介：CSDN前端領(lǐng)域博客專家，CSDN前端領(lǐng)域優(yōu)質(zhì)創(chuàng)作者，資深前端開發(fā)工程師，專注web前端領(lǐng)域開發(fā)，在CSDN分享工作中遇到的問題以及問題解決方法和對(duì)項(xiàng)目開發(fā)的實(shí)際案例總結(jié)以及新技術(shù)的認(rèn)識(shí)。

總結(jié)

以上是生活随笔為你收集整理的vue3.0组合式api语法使用总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。