vue3.0組合式api的使用小結
更新時間：2022年08月05日 11:28:18 作者：船長在船上
這篇文章主要介紹了vue3.0組合式api的使用小結,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
vue2開發(fā)缺點和vue3開發(fā)優(yōu)點
- vue2代碼冗余，雜亂
- vue3則可以把相關的功能代碼抽離分割在一起，方便開發(fā)者快速閱讀
1.setup使用
- setup函數(shù)是 Composition API（組合API）的入口
- setup是啟動頁面后會自動執(zhí)行的一個函數(shù)
- 項目中定義的所有變量，方法等都需要在setup中
- 在setup函數(shù)中定義的變量和方法最后都需要 return 出去， 否則無法在視圖層中使用
setup(){
console.log('自動執(zhí)行')
const name = '林一'
const age = 20
const company = '阿里巴巴'
const btn = ()=>{
const res = `我叫${name},今年${age}歲了,在${company}上班`
console.log(res)
}
// 計算屬性
// 偵聽器
return {name,btn}
}2.生命周期函數(shù)
- onBeforeMount —— 在掛載開始之前被調用
- onMounted —— 組件掛載時調用
- onBeforeUpdate —— 數(shù)據(jù)更新時調用
- onUpdated —— 數(shù)據(jù)更改導致的虛擬 DOM 重新渲染，在這之后會調用該鉤子
- onBeforeUnmount —— 在卸載組件實例之前調用
- onErrorCaptured —— 當捕獲一個來自子孫組件的錯誤時被調用
Vue應用程序中有4個主要事件
- 創(chuàng)建 — 在組件創(chuàng)建時執(zhí)行
- 掛載 — DOM 被掛載時執(zhí)行
- 更新 — 當響應數(shù)據(jù)被修改時執(zhí)行
- 銷毀 — 在元素被銷毀之前立即運行
import { onBeforeMount, ....... } from 'vue'3.vuex
- 同vue2一致
- 需要安裝，引入
//安裝
npm install vuex@next --save
//引入
import {useStore} from 'vuex'4.toRef介紹
- toRef也可以創(chuàng)建一個響應式數(shù)據(jù)
- ref本質是拷貝粘貼一份數(shù)據(jù)，脫離了與原數(shù)據(jù)的交互
- ref函數(shù)將對象中的屬性變成響應式數(shù)據(jù)，修改響應式數(shù)據(jù)是不會影響到原數(shù)據(jù),但是會更新視圖層
- toRef的本質是引用，與原始數(shù)據(jù)有交互，修改響應式數(shù)據(jù)會影響到原數(shù)據(jù),但是不會更新視圖層
- 使用需引入
import {toRef} from 'vue'
//toRef接收兩個參數(shù)，第一個參數(shù)是要操作的對象，第二個參數(shù)是對象的某個屬性
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)建了一個響應式引用
- 使用需引用
import {ref} from 'vue'//組合式api
ref('林一')- 當ref里的值發(fā)生改變時，視圖層會自動更新
- ref可操作基本數(shù)據(jù)類型，也可以操作復雜數(shù)據(jù)類型：對象，數(shù)組
- 建議：ref用來操作基本數(shù)據(jù)類型：數(shù)字，字符串
setup(){
const name = ref('林一')
const age = ref(52)
const company = ref('阿里巴巴')
// 對象類型
const obj = ref({
taobao:'淘寶',
tamll:'天貓'
})
// 數(shù)組類型
const arr = ref([
{
xiami:'林二',
huabei:'京東'
}
])
const btn = ()=>{
// 響應對象類型
// name.value = '林三'
// obj.value.taobao = '淘寶000'
// console.log(obj)
// 響應數(shù)組類型
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)//祖?zhèn)?
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只處理基本類型數(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 如果存在的話，在組件初始化的時候就會執(zhí)行一次用以收集依賴
- watch 可以獲取到新值與舊值（更新前的值），而 watchEffect是拿不到的
- watchEffect不需要指定監(jiān)聽的屬性，他會自動的收集依賴， 只要我們回調中引用到了 響應式的屬性， 那么當這些屬性變更的時候，這個回調都會執(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.value
const b = p2.value
console.log('進入頁面我就執(zhí)行')
})
S()//停止監(jiān)聽
return {p1,p2,p3}
},9.watch偵聽器
- 與vue2一致，均是用來偵聽數(shù)據(jù)變化的
- 使用需引入
import { 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}立即偵聽
// 二：偵聽多個ref響應數(shù)據(jù)
// watch([p1,p2],(newVal,oldVal)=>{
// console.log(newVal,oldVal)
// })
// 三：偵聽整個reactive定義的數(shù)據(jù):只能監(jiān)聽到最新的結果，之前的結果監(jiān)聽不到
// watch(p3,(newVal,oldVal)=>{
// console.log(newVal,oldVal)
// })
// 四：偵聽reactive定義的數(shù)據(jù)中的某一個值:可以監(jiān)聽到,無論層級有多深
watch(()=>p3.product.wx,(newVal,oldVal)=>{
console.log(newVal,oldVal)
})
return {p1,p2,p3}
},10.computed
- 與vue2一致，均是用來監(jiān)聽數(shù)據(jù)變化
- 使用需引入
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同樣為我們的值創(chuàng)建了一個響應式引用
- 定義基本普通類型數(shù)據(jù)不能用reactive，用ref
- reactive主要定義復雜數(shù)據(jù)類型，比如數(shù)組，對象
- reactive可響應深層次的數(shù)據(jù)，比如多維數(shù)組
- 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介紹
- 用于批量設置多個數(shù)據(jù)為響應式數(shù)據(jù)
- toRefs與原始數(shù)據(jù)有交互，修改響應式數(shù)據(jù)會影響到原數(shù)據(jù),但是不會更新視圖層
- toRefs還可以與其他響應式函數(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}
}到此這篇關于vue3.0組合式api的使用小結的文章就介紹到這了,更多相關vue3組合式api使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue3 自定義loading的操作方法,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要為大家介紹了Vue3插槽Slot實現(xiàn)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本文主要介紹了vue項目中路由懶加載的三種方式,主要包括vue異步組件,組件懶加載,webpack的require.ensure(),具有一定的參考價值,感興趣的可以了解一下2024-01-01
最近工作中遇到了element表單校驗失敗的情況,通過查找相關資料終于解決了,所以下面這篇文章主要給大家介紹了關于element表單使用校驗之校驗失效問題的相關資料,需要的朋友可以參考下2022-10-10
better scroll可以實現(xiàn)輪播圖和頁面滾動，是移動端滾動插件，這篇文章主要介紹了vue better scroll 無法滾動的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要介紹了vue.js的手腳架vue-cli項目搭建的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
使用vue-element-admin框架調用后端接口及跨域的問題
這篇文章主要介紹了使用vue-element-admin框架調用后端接口及跨域的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue-cli3 karma單元測試的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
下面小編就為大家分享一篇vue中實現(xiàn)移動端的scroll滾動方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue開發(fā)中的動態(tài)組件與緩存組件及異步組件的使用教程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-09-09