目錄

1.setup使用

2.生命周期函數

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

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開發缺點和vue3開發優點

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

1.setup使用

• setup函數是 Composition API（組合API）的入口
• setup是啟動頁面后會自動執行的一個函數
• 項目中定義的所有變量，方法等都需要在setup中
• 在setup函數中定義的變量和方法最后都需要 return 出去， 否則無法在視圖層中使用

setup(){console.log('自動執行')const name = '林一'const age = 20const 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.valueconst b = p2.valueconsole.log('進入頁面我就執行')})S()//停止監聽return {p1,p2,p3}},

9.watch偵聽器

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

mport { 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一致，均是用來監聽數據變化
• 是根據依賴關系進行緩存的計算，只有在它的相關依賴發生改變時才會進行更新
• 不能再data中出現同樣的名字
• 使用需引入

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 = '林三'}// 共用一個reactiveconst name = '林四'const age = 52const 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}}

13.Fragment

- 在Vue2中: 組件必須有一個根標簽

- 在Vue3中: 組件可以沒有根標簽, 內部會將多個標簽包含在一個Fragment虛擬元素中

- 好處: 減少標簽層級, 減小內存占用

14.Teleport

?`Teleport` 是一種能夠將我們的<strong style="color:#DD5145">組件html結構</strong>移動到指定位置的技術。

<teleport to="移動位置"><div v-if="isShow" class="mask"><div class="dialog"><h3>我是一個彈窗</h3><button @click="isShow = false">關閉彈窗</button></div></div></teleport>

15.Suspense

- 等待異步組件時渲染一些額外內容，讓應用有更好的用戶體驗

- 使用步驟：

??- 異步引入組件

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>

?

?????? ?作者：船長在船上
🚩🚩🚩 ?主頁：來訪地址船長在船上的博客
🔨🔨🔨 ?簡介：CSDN前端領域博客專家，CSDN前端領域優質創作者，資深前端開發工程師，專注web前端領域開發，在CSDN分享工作中遇到的問題以及問題解決方法和對項目開發的實際案例總結以及新技術的認識。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。