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 页面销毁后");
});
// 被包含在中的组件，会多出两个生命周期钩子函数
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,
};
},
};
