<template>
<div class="home">
<input type="text" v-model="states.value" name="" id="" />
<nav-Headers
@changeval="changevals"
:numActive="states.value"
/><!-- 父传子 子传父 -->
<span> {{ states.getnum }}</span>
<span @click="about"> 跳转</span>
</div>
</template>
<script>
import router from "@/router/index.js";
import navHeaders from "../components/Home/navHeaders.vue";
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
onActivated,
onDeactivated,
onErrorCaptured,
onRenderTracked,
onRenderTriggered,
} from "vue";
import { reactive } from "vue";
export default {
components: {
navHeaders,
},
name: "Home",
setup() {
const states = reactive({
value: 1,
num: 11,
getnum: "",
});
// 父接受子
const changevals = (val) => {
states.getnum = val;
console.log(val);
};
let about = () => {
router.push({
name: "about",
params:{
id:1,
name:'xiaoming'
}
});
};
onBeforeMount(() => {
console.log("onBeforeMount-->beforeMount 模板渲染未挂载到页面中去");
});
onMounted(() => {
console.log("onMounted-->mounted 真实dom已经生成");
});
onBeforeUpdate(() => {
console.log("onBeforeUpdate-->beforeUpdate 数据更新之前");
});
onUpdated(() => {
console.log("onUpdated-->updated 数据更新之后");
});
onBeforeUnmount(() => {
console.log("onBeforeUnmount-->beforeDestroy 页面销毁前");
});
onUnmounted(() => {
console.log("onUnmounted-->destroyed 页面销毁后");
});
// 被包含在<keep-alive>中的组件,会多出两个生命周期钩子函数
onActivated(() => {
console.log("onActivated-->activited keep-alive 缓存的组件激活时调用");
});
onDeactivated(() => {
console.log("onDeactivated-->deactivated keep-alive 缓存的组件停用时调用");
});
onErrorCaptured(() => {
console.log("onErrorCaptured-->errorCaptured 当捕获一个来自子孙组件的异常时激活钩子函数");
});
// 调试用
onRenderTracked(() => {
console.log("onRenderTracked 状态跟踪,它会跟踪页面上所有响应式变量和方法的状态,也就是我们用return返回去的值,他都会跟踪。只要页面有update的情况,他就会跟踪,然后生成一个event对象,我们通过event对象来查找程序的问题所在");
});
onRenderTriggered(() => {
console.log("onRenderTriggered 状态触发,它不会跟踪每一个值,而是给你变化值的信息,并且新值和旧值都会给你明确的展示出来");
});
return {
states,
changevals,
about,
};
},
};
</script>
03-31
01-28
690
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
01-02
1万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)