<template>
<div id="home">
<div>{
{ readersNumber }}</div>
<div>{
{ data.name }}</div>
<div>{
{ name }}</div>
<button @click="change">改变</button>
</div>
</template>
<script>
import {
ref, //ref() 函数用来根据给定的值创建一个(响应式的数据对象),传入的为基本数据类型,例如字符串、数字、boolean 等,返回值是一个对象,这个对象上只包含一个 value 属性
reactive, //传入的为引用类型,例如数组、对象等(响应式的数据对象)
toRefs, //toRefs() 函数可以将 reactive() 创建出来的(响应式对象),转换为普通的对象,相当于变成一个个的ref()
onBeforeMount, //组件挂在到页面之前执行
onMounted, //组件挂在到页面之后执行
onBeforeUpdate, //在组件更新之前执行
onUpdated, //在组件更新之后执行
onBeforeUnmount, //在组件卸载之前执行
onUnmounted, //在组件卸载之后执行
onActivated, 被激活时执行 ;被包含在<keep-alive>中的组件,会多出两个生命周期钩子函数(onActivated,onDeactivated)。
onDeactivated, //在组件切换中老组件消失的时候执行(比如从 A 组件,切换到 B 组件,A 组件消失时执行)
onRenderTriggered, //状态触发,它不会跟踪每一个值,而是给你变化值的信息,并且新值和旧值都会给你明确的展示出来
onRenderTracked, //状态跟踪,它会跟踪页面上所有响应式变量和方法的状态,也就是我们用return返回去的值,他都会跟踪。只要页面有update的情况,他就会跟踪,然后生成一个event对象,我们通过event对象来查找程序的问题所在
// onErrorCaptured,//当捕获一个来自子孙组件的异常时激活钩子函数
} from "vue";
export default {
name: "Home",
components:{
},
setup() {
const readersNumber = ref(0);
const data = reactive({
name: "张三",
obj: ["王二麻子", "李白", "王五", "小秋秋"],
arr: [0, 1, 2, 3],
fn: () => {
return 100;
},
});
const reData = toRefs(data);
function change() {
readersNumber.value += 1;
if (readersNumber.value > 3) readersNumber.value = 0;
data.name = data.obj[readersNumber.value];
}
console.log("1...setup()组件创建之中");
onBeforeMount(() => {
console.log("2...onBeforeMount()组件挂在到页面之前执行");
});
onMounted(() => {
console.log("3...onMounted()组件挂在到页面之后执行");
});
onBeforeUpdate(() => {
console.log("4...onBeforeUpdate()在组件更新之前执行");
});
onUpdated(() => {
console.log("5...onUpdated()在组件更新之后执行");
});
onBeforeUnmount(() => {
console.log("6...onBeforeUnmount()在组件卸载之前执行");
});
onUnmounted(() => {
console.log("7...onUnmounted()在组件卸载之后执行");
});
onActivated(() => {
console.log("8...onActivated缓存激活");
});
onDeactivated(() => {
console.log("9...onDeactivated()在组件切换中老组件消失的时候执行");
});
onRenderTriggered((event) => {
console.log("10...onRenderTriggered跟踪变化的下信息,返回新值和旧值", event);
});
onRenderTracked((event) => {
console.log("11...onRenderTracked:跟踪页面上所有响应式变量和方法的状态并且返回新值", event);
});
return {
readersNumber,
data,
...reData,
change
};
},
};
</script>
vue3.0生命周期挂钩
猜你喜欢
转载自blog.csdn.net/weixin_49666910/article/details/114122375
今日推荐
周排行