1.生命周期

vue2中的寫法，在vue3中依然可以這么寫。

注意beforeDestroy在vue3變成了beforeUnmount，destroyed變成了unmounted

export default {/*data() {return {count: 1,};},beforeCreate() {console.log('beforeCreate');},created() {// 到了這個階段，數(shù)據(jù)已經(jīng)準備好了console.log('created');},beforeMount() {console.log('beforeMount');},mounted() {// 到了這個階段，頁面已經(jīng)掛載完成了console.log('mounted');},beforeUpdate() {console.log('beforeUpdate');},updated() {// 到了這個階段，數(shù)據(jù)修改了并且頁面重新掛載完成了console.log('updated');},beforeUnmount() {console.log('beforeUnmount');},unmounted() {// 到了這個階段，組件卸載完畢console.log('unmounted');},*/ }

在組合式api(setup)中使用生命周期

setup可以當成：beforeCreate 和 created，所以setup本身也可以當成一個生命周期函數(shù)，并且

setup的執(zhí)行時機在 beforeCreate 之前。?

注意：如果即寫了組合式API生命周期函數(shù)，又寫了傳統(tǒng)的生命周期函數(shù)，那么組合式API生命周

期函數(shù)會先執(zhí)行。

setup() {onBeforeMount(()=>{console.log('onBeforeMount');})onMounted(()=>{console.log('onMounted');})onBeforeUpdate(()=>{console.log('onBeforeUpdate');})onUpdated(()=>{console.log('onUpdated');})onBeforeUnmount(()=>{console.log('onBeforeUnmount');})onUnmounted(()=>{console.log('onUnmounted');})}

2.Hook函數(shù)

vue3的hook函數(shù)有點類似vue2的mixin,兩者都能提高代碼的可復用性，讓我們不需要一種業(yè)務重復

寫很多次，但是vue3的hook是函數(shù)，能夠讓我們在想要的組件中使用時可以直接引入并使用，代

碼來源更加清晰，修改起來也更加方便。

這是許多業(yè)務代碼寫在一起，雖然比起vue2一個業(yè)務被拆分成許多塊不同，它的業(yè)務可以寫在一

起，方便修改，但是卻顯得很臃腫。

import {computed, ref} from 'vue' export default {setup() {//手機相關(guān)業(yè)務const phoneName = ref('小米')const phonePrice = ref(8000)const phoneZkPrice = computed(()=>{return (phonePrice.value*0.8).toFixed(2)})const updatePhoneName = ()=>{phoneName.value = '華為'}const updatePhonePrice = ()=>{phonePrice.value = 6000}//汽車相關(guān)業(yè)務const carName = ref('寶馬')const carPrice = ref(30)const carZkPrice = computed(()=>{return (carPrice.value*0.8).toFixed(2)})const updateCarName = ()=>{carName.value = '奔馳'}const updateCarPrice = ()=>{carPrice.value = 40}//飛機相關(guān)業(yè)務const planeName = ref('F747')const planePrice = ref(300)const planeZkPrice = computed(()=>{return (planePrice.value*0.8).toFixed(2)})const updatePlaneName = ()=>{planeName.value = 'F404'}const updatePlanePrice = ()=>{planePrice.value = 400}return {phoneName,phonePrice,phoneZkPrice,updatePhoneName,updatePhonePrice,carName,carPrice,carZkPrice,updateCarName,updateCarPrice,planeName,planePrice,planeZkPrice,updatePlaneName,updatePlanePrice}} }

這是用hook函數(shù)寫的，很明顯結(jié)構(gòu)很清晰，后期也很好維護。

car模塊

import {ref,computed} from 'vue' export default function(){//汽車相關(guān)業(yè)務const carName = ref('寶馬')const carPrice = ref(30)const carZkPrice = computed(()=>{return (carPrice.value*0.8).toFixed(2)})const updateCarName = ()=>{carName.value = '奔馳'}const updateCarPrice = ()=>{carPrice.value = 40}return {carName,carPrice,carZkPrice,updateCarName,updateCarPrice} }

?phone模塊

import {ref,computed} from 'vue' export default function(){//手機相關(guān)業(yè)務const phoneName = ref('小米')const phonePrice = ref(8000)const phoneZkPrice = computed(()=>{return (phonePrice.value*0.8).toFixed(2)})const updatePhoneName = ()=>{phoneName.value = '華為'}const updatePhonePrice = ()=>{phonePrice.value = 6000}return {phoneName,phonePrice,phoneZkPrice,updatePhoneName,updatePhonePrice} }

plane模塊

import {ref,computed} from 'vue' export default function(){//飛機相關(guān)業(yè)務const planeName = ref('F747')const planePrice = ref(300)const planeZkPrice = computed(()=>{return (planePrice.value*0.8).toFixed(2)})const updatePlaneName = ()=>{planeName.value = 'F404'}const updatePlanePrice = ()=>{planePrice.value = 400}return {planeName,planePrice,planeZkPrice,updatePlaneName,updatePlanePrice} }

導入hook函數(shù)并使用

// 導入相關(guān)業(yè)務的hook函數(shù) import useCar from "@/use/useCar" import usePhone from "@/use/usePhone" import usePlane from "@/use/usePlane" export default {setup() {return {// 展開usePhone函數(shù)返回的對象...usePhone(),...useCar(),...usePlane()}}

3.toRef和toRefs

import { reactive,toRef,toRefs } from 'vue' export default {setup() {// 定義數(shù)據(jù)let stuData = reactive({name:'張三',age:20,car:{name:'大眾',price:'20W'}})return{// toRef()函數(shù)，可以用來為一個 reactive 對象的屬性創(chuàng)建一個 ref// 這樣做的好處是，簡化了模板中的表達式。// toRef()函數(shù)，需要傳兩個參數(shù)：1.reactive 對象，2.具體的屬性名// name:toRef(stuData,'name'),// age:toRef(stuData,'age'),// car:toRef(stuData,'car')// 假如 reactive 對象中，有100個屬性，上面的操作要寫100次，所以，一般都直接用toRefs函數(shù)// toRefs函數(shù)，把一個響應式對象轉(zhuǎn)換成普通對象，該普通對象的每個 屬性 都是一個 ref ...toRefs(stuData)}} }

4.其他的組合式API

readonly函數(shù)：用于定義只讀的代理對象，?注意：只讀是深層次的，對象本身不能改，對象里面的

屬性也不能改。

const car = readonly({no:'1001',name:'大眾',color:'白色',price:30,type:{name:'SUV',level:'中級'}})

shallowRef函數(shù)：用于定義一個淺響應式的ref對象。 shallowRef() 返回的對象 value 屬性值是

object對象(普通對象)，不再具備任何響應式了。

const stu2 = shallowRef({name:'小明',age:20})const updateStu2 = ()=>{// 直接修改value是具備響應式的stu2.value = {name:'小芳',age:30}}const updateStu2Name = ()=>{// 修改value里面的具體屬性值是不具備響應式stu2.value.name = '小紅'}

?shallowReactive函數(shù)：返回一個淺層的響應式代理，只對對象的第一層屬性創(chuàng)建響應式

const stu2 = shallowReactive({name:'小米',age:22,friend:{name:'BY2',age:20,car:{name:'奔馳',price:20}}})

shallowReadonly函數(shù)： 用于定義淺只讀對象，不能修改對象的第一層屬性，可以修改對象的深層

次屬性，注意：修改深層次屬性后不會報錯，但是不具備響應式效果

const stu3 = shallowReadonly({name:'李四',age:22,friend:{name:'王五',age:23}})

isRef函數(shù)：判斷一個對象是否是ref對象

isReactive函數(shù)：檢查一個對象是否是由 reactive 創(chuàng)建的響應式代理

isReadonly函數(shù)：檢查一個對象是否是由 readonly 創(chuàng)建的只讀代理

isProxy函數(shù) ：檢查一個對象是否是由 reactive 或者 readonly 方法創(chuàng)建的代理

toRaw函數(shù)：將代理對象轉(zhuǎn)為一個普通對象返回

// obj是一個普通對象let obj = {name: "張三",age: 20,};// 通過reactive方法，給obj返回一個代理對象const stu1 = reactive(obj);// toRaw方法，將一個代理對象轉(zhuǎn)為一個普通對象// 這個普通對象，就是被代理的對象const stu2 = toRaw(stu1);

markRaw函數(shù)：包裝過后的對象，再也不能成為響應式對象，原理是：markRaw方法，會給源對

象添加一個 __v_skip: true屬性

總結(jié)

以上是生活随笔為你收集整理的三、vue3--生命周期、Hook函数、 toRef和toRefs、其他的组合式API的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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