vue 函数路由跳转_Vue实例的生命周期

以你之姓@ 2023-01-03 04:57 194阅读 0赞

Vue实例生命周期钩子函数与React非常相似，最明显的区别在于，它多了一个实例创建阶段。

Vue实例和Vue组件有着同样的生命周期函数。

参考官网的图：

![a32f5e8f48a310d37afd0f9a4a228f83.png][]

先罗列出生命周期然后一个一个讲解

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

beforeCreate

实例组件刚创建，元素DOM和数据都还没有初始化，暂时不知道能在这个周期里面进行生命操作。

created

数据data已经初始化完成，方法也已经可以调用，但是DOM为渲染。在这个周期里面如果进行请求是可以改变数据并渲染，由于DOM未挂载，请求过多或者占用时间过长会导致页面线上空白。

beforeMount

DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示\{ \{\}\}，这是因为Vue采用了Virtual DOM(虚拟Dom)技术。先占住了一个坑。

mounted

数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。一般请求会放在这个地方，因为这边请求改变数据之后刚好能渲染。

beforeUpdate

只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。

updated

只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。

beforeDestroy

这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。

Destroyed

说实在的，我还真的不知道这个周期跟beforeDestroy有什么区别，我在这个周期里面调用data的数据和methods的方法都能调用，所以我会觉得跟beforeDestroy是一样的。

[a32f5e8f48a310d37afd0f9a4a228f83.png]: /images/20221119/6a871cafa6304b56a94681f81e98771e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 路由跳转

文章目录前言路由基础子路由路由传参 query 传参 path 静态传参动态传参

我就是我/ 2023年10月13日 10:39/ 0 赞/ 22 阅读

相关 vue 函数路由跳转_Vue实例的生命周期

Vue实例生命周期钩子函数与React非常相似，最明显的区别在于，它多了一个实例创建阶段。 Vue实例和Vue组件有着同样的生命周期函数。参考官网的图： ![a32f5

以你之姓@/ 2023年01月03日 04:57/ 0 赞/ 195 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 275 阅读

相关 Vue 3路由跳转

import { useRouter } from 'vue-router'; export default { setup() {

ゝ一纸荒年。/ 2022年10月09日 02:43/ 0 赞/ 299 阅读

相关 vue中的路由跳转

https://blog.csdn.net/weixin\_42981560/article/details/94378469 ![在这里插入图片描述][watermark

绝地灬酷狼/ 2022年09月15日 11:45/ 0 赞/ 251 阅读

相关 Vue之路由跳转

所谓的router就是动态的往根里面挂载组件，而不是手动挂载。 vue路由配置的步骤： https://router.vuejs.org/ 1.安

亦凉/ 2022年03月17日 05:17/ 0 赞/ 345 阅读

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 504 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 482 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 657 阅读

相关 uniapp生命周期/路由跳转

应用生命周期（仅可在App.vue中监听）（1）onLaunch ：当uni-app 初始化完成时触发（全局只触发一次） App.vue里的onLaunch中opt

矫情吗；*/ 2021年09月13日 15:52/ 0 赞/ 935 阅读