vue2.x生命周期以及keep-alive

1. vue2.x有哪些生命周期

系统自带：

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestory

destoryed

2. 一旦进入页面或者组件，会执行哪些生命周期，顺序是什么

beforeCreate

created

beforeMount

mounted

3. 在哪个阶段有$el，在哪个阶段有$data

beforeCreate 什么也没有

created 有$data，没有$el

beforeMount 有$data，没有$el

mounted 有$data，有$el

在这之后，都有$data，有$el

beforeCreate() {console.log("beforeCreate", this.$data, this.$el);
},
created() {console.log("created", this.$data, this.$el);
},
beforeMount() {console.log("beforeMount", this.$data, this.$el);
},
mounted() {console.log("mounted", this.$data, this.$el);
},

4. 如果加入了keep-alive，第二次或第N次进入组件会执行哪些生命周期

加入了keep-alive会多两个生命周期（actived、deactived），只执行一个生命周期：activated

（1）keep-alive是什么？

vue系统自带的一个组件

功能：是用来缓存组件，保存组件状态的

可以提升性能，避免重复渲染

（2）使用场景

缓存组件，提升项目的性能

比如：首页进入到详情页，如果用户在首页每次点击都是相同的，那么详情页就没必要请求N次了，直接缓存起来就可以了，如果点击的不是同一个，那就请求；减少了发送请求的场景

如果遇到二级路由访问页面

如图所示，我们从财经新闻点击了社会，然后又想回到财经新闻

使用了keep-alive，在组件内activated表示组件激活，deactivated表示组件停止

deactivated() {let url = this.$route.path; // 这样写保存的路径是不对的
}
activated() {this.$router.push(url);
}

这样写保存的路径是不对的，因为当我们点击社会的时候，这个url就变成社会的路径了

解决方法：

beforeRouteLeave() {let url = this.$route.path; // 这样写保存的就是财经新闻的路径
}
activated() {this.$router.push(url);
}

vue2.x生命周期以及keep-alive相关推荐

vue2.0生命周期数据共享
3.1 组件的生命周期 1.概念 (1)生命周期:是指一个组件从创建.运行.销毁的整个阶段,强调的是一个时间段 (2)生命周期函数:是由vue框架提供的内置函数,会伴随组件的生命周期,自动按次序执行 ...
vue1.0和vue2.0生命周期----整理一
## 1. 作用域区别 1.x 随意的定义作用域 2.x 不允许body 或者html 元素 ## 2. 生命周期 1.x: created 实例已经创建 beforeCompile 在编译之前 co ...
KSO - Vue2的生命周期的个人理解
观察代码data:(){ return { name:"", age:"", city:""} }, created :(){ this.n ...
Vue2.和Vue3.生命周期的区别，对比。详解生命周期中的每个钩子函数，setup,
文章目录 #1.Vue2.的生命周期与Vue3.的生命周期对比图 #1.1白色背景图是Vue2.的生命周期,黑色背景图是Vue3.的生命周期. #2.Vue2.与Vue3.的生命周期函数的不同 #2. ...
onmounted vue3_Vue3.x 生命周期和 Composition API 核心语法理解
1 Vue2.x 生命周期回顾 beforeCreate,在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用. created,在实例创建完 ...
Vue选项式 API 的生命周期选项和组合式 API
Vue2.Vue3 生命周期的变化正好在看Vue的官方文档,也正好比对一下,做一下笔记选项式 API 的生命周期选项的变化这里我们会发现Vue3对Vue2的生命周期钩子似乎没有做大的调整修改 ...
Vue3 composition-apisetup 生命周期
一. setup简单介绍 setup是组合Composition API中的入口函数,也是第一个要使用的函数.setup只在初始化时执行一次,所有的Composition API函数都在此使用.Com ...
vue生命周期（渲染与机制）
备注:vue.3.0的生命周期与渲染等机制有变化,这里仅是适用vue2.0 一.vue2.0生命周期 beforeCreate(创建前).created(创建后) beforeMount(载入前).m ...
Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...

vue2.x生命周期以及keep-alive

vue2.x生命周期以及keep-alive相关推荐

最新文章

热门文章