vue学习五

十一 生命周期

详细：生命周期选项 | Vue.js

组合式

生命周期钩子	解释
setup	优先于所有生命周期。
onMounted	注册一个回调函数，在组件挂载完成后执行。
onUpdated	注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
onUnmounted	注册一个回调函数，在组件实例被卸载之后调用。
onBeforeMount	注册一个钩子，在组件被挂载之前被调用。
onBeforeUpdate	注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
onBeforeUnmount	注册一个钩子，在组件实例被卸载之前调用。
onErrorCaptured	注册一个钩子，在捕获了后代组件传递的错误时调用。
onActivated	注册一个回调函数，若组件实例是<keep-alive>缓存树的一部分，当组件被插入到 DOM 中时调用。
onDeactivated	注册一个回调函数，若组件实例是<keep-alive>缓存树的一部分，当组件从 DOM 中被移除时调用。

示例

父组件

<script lang="ts" setup name="test6">
import { ref,reactive,onErrorCaptured } from 'vue';
import View5 from '@/components/View5.vue';let showview5 = ref(true);
let showview5_1 = ref(true);
function showviewfun(){showview5.value = !showview5.value;
}
function showviewfun2(){showview5_1.value = !showview5_1.value;
}
onErrorCaptured((error)=>{console.error(error)
})
</script>
<template><p>View6</p><p><button @click="showviewfun">show view5 keep-alive</button>&nbsp;<button @click="showviewfun2">show view5</button></p><View5  v-if="showview5"/><keep-alive><View5  v-if="showview5_1"/></keep-alive>
</template>

 引用两次子组件，一次是在<keep-alive>中，为了触发onActivated和onDeactivated生命周期方法。

在子组件上设置v-if 触发子组件销毁。

 子组件

<script lang="ts" setup name="test5">
import {ref, onMounted,onUpdated,onUnmounted,onBeforeMount,onBeforeUpdate,onBeforeUnmount,onErrorCaptured,onActivated,onDeactivated} from 'vue';
console.log("1 test5 setup")
const emit = defineEmits(['error-occurred']);
onMounted(()=>{console.log("3 test5 onMounted")
})
onUpdated(()=>{console.log("5 test5 onUpdated")
})
onUnmounted(()=>{console.log("7 test5 onUnmounted")
})
onBeforeMount(()=>{console.log("2 test5 onBeforeMount")
})
onBeforeUpdate(()=>{console.log("4 test5 onBeforeUpdate")
})
onBeforeUnmount(()=>{console.log("6 test5 onBeforeUnmount")
})
onActivated(()=>{console.log("test5 onActivated")
})
onDeactivated(()=>{console.log("test5 onDeactivated")
})
function showerror(){throw new Error('test5 error mag')
}
let str = ref("test5");
function changestr(){str.value = str.value + ".";
}
</script>
<template>
<p>View5</p>  
<p>{{ str }}</p>
<p><button @click="showerror">show error</button>&nbsp;<button @click="changestr">change str</button>
</p>   
</template>

设置throw抛出异常，为了触发onErrorCaptured。

设置页面修改内容，为了触发onBeforeUpdate和onUpdated。

执行顺序

页面刷新输出

View5.vue:3 1 test5 setup
View5.vue:15 2 test5 onBeforeMount
View5.vue:3 1 test5 setup
View5.vue:15 2 test5 onBeforeMount
2View5.vue:6 3 test5 onMounted
View5.vue:24 test5 onActivated

 组件被挂载两次，<keep-alive>中的组件执行一次onActivated。

非<keep-alive>中的子组件被取消挂载和再次挂载后输出

取消挂载
View5.vue:21 6 test5 onBeforeUnmount
View5.vue:12 7 test5 onUnmounted再次挂载
View5.vue:3 1 test5 setup
View5.vue:15 2 test5 onBeforeMount
View5.vue:6 3 test5 onMounted

<keep-alive>中的子组件被取消挂载和再次挂载后输出

取消挂载
View5.vue:27 test5 onDeactivated再次挂载
View5.vue:24 test5 onActivated

点击页面内容修改输出：

View5.vue:27 4 test5 onBeforeUpdate
View5.vue:18 5 test5 onUpdated

点击报错输出：

test6 error: test5 error mag

非<keep-alive>中组件生命周期

1. setup
2. onBeforeMount
3. onMounted
4. onBeforeUpdate
5. onUpdated
6. onBeforeUnmount
7. onUnmounted

<keep-alive>中组件生命周期

1. setup
2. onActivated
3. onBeforeUpdate
4. onUpdated
5. onDeactivated

子组件抛出异常

1. onErrorCaptured

选项式

生命周期函数	解释
beforeCreate	在组件实例初始化完成之后立即调用
created	在组件实例处理完所有与状态相关的选项后调用。
beforeMount	在组件被挂载之前调用。
mounted	在组件被挂载之后调用。
beforeUpdate	在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
updated	在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
beforeUnmount	在一个组件实例被卸载之前调用。
unmounted	在一个组件实例被卸载之后调用。
errorCaptured	在捕获了后代组件传递的错误时调用。
activated	若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。 这个钩子在服务端渲染时不会被调用。
deactivated	若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。 这个钩子在服务端渲染时不会被调用。

 /(ㄒoㄒ)/~~太麻烦了 有兴趣可以自己测试

执行顺序

 非<keep-alive>中组件生命周期

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeUnmount
8. unmounted

<keep-alive>中组件生命周期

1. beforeCreate
2. created
3. activated
4. beforeUpdate
5. updated
6. deactivated

子组件抛出异常

1. errorCaptured

十二 自定义hooks

封装相同业务的变量和方法到js文件，组件引入该js文件，模块化开发。

比如会员页面，有交会费和积分兑换两个业务。

业务一：会费支付

service_life 服务时间增加1

//支付会费
import { ref } from 'vue'
export default function(){function paymoney(userinfo){userinfo.service_life+=1return userinfo.service_life} return {paymoney} 
}

业务二：积分兑换

定义可兑换商品和用户已兑换商品，处理用户兑换操作。

//积分兑换
import { reactive } from "vue";
export default function(){let goods = reactive([{name:'test1',num:1,points:1},{name:'test2',num:2,points:1},])let user_goods = reactive([]);function point_exchange(index,userinfo){if(!goods[index]){throw new Error("无产品信息");}let item = goods[index]if(item.num<=0){throw new Error("商品数量不足");}if(userinfo.points<item.points){throw new Error("用户积分不足");}goods[index].num-=1;userinfo.points-=item.points;user_goods.push(goods[index])}return {point_exchange,goods,user_goods}
}

页面调用

<script lang="ts" name="userinfo" setup>
import { onErrorCaptured, ref } from 'vue';
import business1 from '@/hooks/paymoney'
import business2 from '@/hooks/pointexchange'
const {paymoney} = business1();
const {goods,point_exchange,user_goods} = business2();
let userinfo = ref({name:"test7",service_life:1,points:100
})
</script>
<template><p v-for="(value,key) in userinfo" :key="key">{{key}}:{{value}}</p><hr><button @click="paymoney(userinfo)">pay money</button><hr><p v-for="(value,key) in goods" :key="key">{{key}}:{{value}}&nbsp; <button @click="point_exchange(key,userinfo)">exchange</button></p><hr><p v-for="(value,key) in user_goods" :key="key">{{key}}:{{value}}</p>
</template>

捕获报错

main.js文件中定义全局的报错捕获。

由于是单页面，没有子组件所以onErrorCaptured没被触发。

// import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'const app = createApp(App)
const pinia = createPinia()app.use(pinia)
app.use(router)
app.mount('#app')//捕获报错代码app.config.errorHandler = (err, instance, info) => {console.error('全局错误处理器捕获到错误:', err, instance, info);alert(err.message)};

 重点：

1. hooks文件定义export default function(){}，并返回定义的变量或方法
2. 调用时引入文件，再解构const {value,function} = hooks();