Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载
Vue生命周期
每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期，在这个过程中会有一些钩子函数会得到回调
- Vue中能够被网页直接使用的最小单位就是组件，我们经常写的：
var vm = new Vue({
el: '#app',
......
}
是根组件，el指定了它挂载到哪里（id为app的元素包裹的部分）
也可以跟普通组件一样这样写：
var vm = new Vue({
......
}
vm.$mount("#app");
也可以跟普通组件一样在里面定义template属性指定模板，比如
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
methods:{
}
})
根组件里面可使用子组件，并起一个名字：
var vm = new Vue({
......
components: {
'my-components': child
}
}
vm.$mount("#app");
这样就可以在id为app的div中使用名字my-components来引用child组件
div id="app">
......
<my-components :msg="msg1" v-if="show"></my-components>
......
</div>
- beforeCreate:在实例初始化之后，这时候el 和 data 并未初始化
- created：实完成了 data 数据的初始化，但Vue 实例使用的根 DOM 元素el还未初始化
- beforeMount：data和el均已经初始化，el并没有渲染进数据，el的值为“虚拟”的元素节点
- mounted：此时el已经渲染完成并挂载到实例上
使用keeplive缓存组件视图
有时候我们显示页面的时候不需要重新加载，使用上次的缓存页面即可，比如单页面应用使用路由进行页面切换时，再切回来，很多时候并不需要重新加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<keep-alive>
<my-components msg="hello" v-if="show"></my-components>
</keep-alive>
</div>
</body>
<script>
var child = {
template: '<div><input></input></div>',
props: ['msg'],
data: function() {
return {
childMsg: 'child'
};
},
created: function() {
console.log('child reated!');
},
mounted: function() {
console.log('child mounted!');
},
deactivated: function() {
console.log('component deactivated!');
},
activated: function() {
console.log('component activated');
}
};
var app = new Vue({
el: '#app',
data: function() {
return {
message: 'father',
show: true
};
},
components: {
'my-components': child
}
});
</script>
</html>
被keeplive包裹的组件会使用缓存，我们可以在input里输入文字
在控制台控制app.show=false,再app.show=true，可以发现前一次输入的文字还在，说明使用了缓存
deactivated、activated两个方法只在被keeplive包裹的组件中才会回调，deactivated在组件消失时调用，activated在组件显示时调用
综合示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<keep-alive>
<my-components :msg="msg1" v-if="show"></my-components>
</keep-alive>
</div>
</body>
<script>
var child = {
template: '<div>from child: {{childMsg}}</div>',
props: ['msg'],
data: function() {
return {
childMsg: 'child'
}
},
beforeCreate: function() {
debugger;
},
created: function() {
debugger;
},
beforeMount: function() {
debugger;
},
mounted: function() {
debugger;
},
deactivated: function() {
alert("keepAlive停用");
},
activated: function() {
console.log('component activated');
},
beforeDestroy: function() {
console.group('beforeDestroy 销毁前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
destroyed: function() {
console.group('destroyed 销毁完成状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
};
var vm = new Vue({
el: '#app',
data: {
message: 'father',
msg1: "hello",
show: true
},
beforeCreate: function() {
debugger;
},
created: function() {
debugger;
},
beforeMount: function() {
debugger;
},
mounted: function() {
debugger;
},
beforeUpdate: function() {
alert("页面视图更新前");
},
updated: function() {
alert("页面视图更新后");
},
beforeDestroy: function() {
console.group('beforeDestroy 销毁前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
destroyed: function() {
console.group('destroyed 销毁完成状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
components: {
'my-components': child
}
});
</script>
</html>
- debugger用于在chrome中加载时自动断点
- 根组件的调用中：
beforeCreate执行时，data和el均为undefined
created执行时，data已经初始化，el为undefined
beforeMount执行时，data和el均已经初始化，此时el并没有渲染进数据，
此时用console.log(this.$el);打印el，p元素内容还是{{message}}，还没有替换为真实的数据
el指定组件挂载的地方，如果组件没有定义template，vue就会把el对应元素包裹的块拿出来渲染（比如data数据渲染）后再放回去，el对象可以操作里面的各个html子节点，如果指定了template，就会渲染template再挂载到el里面
mounted执行时，此时el已经渲染完成并挂载到实例上 - 加载渲染调用顺序：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->子activated(如果是缓存视图)->父mounted->父activated(如果是缓存视图) - 控制根组件更新
控制台输入vm.msg1 = "123"
数据变化之前会调用beforeUpdate，更新后调用updated,这两个方法只有在更新数据的时候才调用（包括隐藏或显示组件，不管是不是缓存视图） - 控制子组件更新
vm.$children[0].childMsg = "111"
只会调用自己的beforeUpdate和updated，跟父组件无关 - 控制子组件隐藏显示：
隐藏：
父beforeUpdate->子deactivated（如果是缓存视图）->父updated
显示：
父beforeUpdate->子activated（如果是缓存视图）->父updated - 销毁流程
vm.$destroy()
父beforeDestroy->子deactivated（如果是缓存视图）->子beforeDestroy->子destroyed->父destroyed
Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载的更多相关文章
- vue教程2-01 vue生命周期、钩子函数
vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue生命周期、钩子函数
https://segmentfault.com/a/1190000011381906 详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...
- Vue基础进阶 之 Vue生命周期与钩子函数
Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...
- vue生命周期和钩子函数
new Vue 创建vue实例 init events & liftcycle 开始初始化 beforeCreate 组件刚被创建,组件属性计算之前,如data属性等 init injecti ...
- 引入jquery利用Vue生命周期的钩子函数mounted操作DOM
html <div id="app"> <div>{{message}}</div> </div> js var vm = new ...
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- Vue（3）- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
随机推荐
- python爬虫——scrapy的使用
本文中的知识点: 安装scrapy scrapy的基础教程 scrapy使用代理 安装scrapy 由于小哥的系统是win7,所以以下的演示是基于windows系统.linux系统的话,其实命令都一样 ...
- python-review01
# 1.使用while循环输出 1 2 3 4 5 6 8 9 10 count = 0 while count < 10: count += 1 if count == 7: continue ...
- redis 数据类型之字典
1.hset hset(name, key, value) # 参数: # name,redis的name # key,name对应的hash中的key # value,nam ...
- limit_choices_to
# 多对多 老师 teachers = models.ManyToManyField(verbose_name='任课老师', to='UserInfo', related_name="ab ...
- spring-cloud-gateway报错
2019-08-13 09:41:19.216 WARN [-,,,] 10084 --- [ main] ConfigServletWebServerApplicationContext : Exc ...
- 【Flink】Flink作业调度流程分析
1. 概述 当向Flink集群提交用户作业时,从用户角度看,只需要作业处理逻辑正确,输出正确的结果即可:而不用关心作业何时被调度的,作业申请的资源又是如何被分配的以及作业何时会结束:但是了解作业在运行 ...
- python返回值内取出某一段数据的方法
面讲的方法只适用于返回值长度固定的内容,长度不固定,每次取得值就不会一样 比如,我们需要取出“提取码: y3rx ”“:”后面的“y3rx” 目标数据在内容的第5位到第9位,做左侧为第1位,冒号后面有 ...
- ArcGIS10.2安装教程
1,首先要下载Arcgis 10.2软件,很大大约有2个多G.下载后分别全部解压. 2,首先,安装相应的LicenseManager,双击Arcgis 10.2打开安装界面,选择安装. 3,开始安装L ...
- 高阶函数及 map、reduce、filter 的实现
博客地址:https://ainyi.com/85 2020 开年国家经历了不少困难,最为凶猛的局势就是新型冠状病毒的蔓延,国务院最终决定春节假期延长至==2 月 2 号==:公司决定 3 - 7 号 ...
- AS中使用真机调试时出现解析错误的问题
时间:2019/12/8 今天使用usb调试程序时手机上出现了解析错误的问题,其实这个问题很简单,主要可能是你想要调试的程序的最低版本号大于你手机的安卓版本号的原因,只需要修改下面这个地方: buil ...