1、App.vue代码如下：<template><component:is="tabComponent"></component><button@click="change">切换组件</button></template><script>importChild1from"./view/Child1.vue"importChi

1、App.vue代码如下：<template><div><h3>主页面</h3><button@click="change">改变</button></div></template><script>exportdefault{beforeCreate(){console.log('beforeCreate&#

两个新的生命周期钩子​ 缓存路由组件和定时器一起使用时，如果进行了路由跳转，本应触发在beforeDestroy钩子中清除定时器方法，但因为缓存了路由组件，就导致原来的路由组件的beforeDestroy钩子不会被触发，定时器也就不会清除作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

如果页面上有很多定时器，可以在data选项中创建一个对象timer，给每个定时器取个名字一一映射在对象timer中，在beforeDestroy构造函数中清除，beforeDestroy(){ for(letkinthis.timer){ clearInterval(k) }}如果页面只有单个定时器，可以这么做consttimer=setInterv

Vue生命周期Vue生命周期指的是Vue实例从创建到销毁整个过程Vue生命周期函数Vue生命周期函数（或生命周期回调函数、生命周期钩子）指的是在Vue生命周期的特定关键时间点被Vue自动调用的一些特殊函数注意事项生命周期函数的名字不可更改，但函数的具体内容是程序员根据需

vue中hook的两点使用1.在同一个组件中例如：在mounted中添加一个监听需要在beforeDistroy中移除这个监听，考虑到某些原因你不想再写个beforeDistroy去实现，这时候绿巨人hook就该登场了mounted(){window.addEventListener('online',this.handleOnline)this.$once('hook:be

exportdefault{methods:{fun1(){consttimer=setInterval(()=>{//需要做的事情},1000);//通过$once来监听定时器，在beforeDestroy钩子可以被清除。this.$once('hook:beforeDestroy',()=>{clearInterval(timer);

参考https://juejin.cn/post/6995015040805896200在utils文件夹中创建bus.js文件importVuefrom'vue';exportconstBus=newVue();在需要的地方使用//Fisr

绝大多数人清除定时器的方法<script>exportdefault{data(){return{timer:null}},mounted(){this.timer=setInterval(()=>{

Vue项目中定时器的问题...比如说我们现在在a页面写一个定时，让他每秒钟处理操作，比如：每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的

挂载阶段父beforecreated->父created->父beforemounted->子beforecreated->子created->子beforemounted->子mounted->父mounted更新阶段父beforeUpdate->子beforeUpda

Vue生命周期常用生命周期钩子：mounted：发送ajax请求，启动定时器、绑定自定义事件、订阅消息等初始化操作beforeDestroy：清除定时器，解绑自定义事件、取消订阅消息等收尾工