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的时候学过 ...
随机推荐
- android:整理drawable（余下的）（三）
前言 随着bitmapDrawabe.nithpatchDrawable 与 shapeDrawable 的整理,接下的就更加需要自己的想象设计一些东西. LayerDrawable 意思是层级性的, ...
- Python第一个请求接口
1.普通get请求 import requests import json login_res=requests.post(url='http://joy.web.com:8090/login',da ...
- SSM框架整合中，不报错，数据库只能存ID进去问题解决
嗯,这个错误其实不能算错误,是粗心造成的,在配置文件中对于传递的参数没有写#字符,直接写的的属性名.居然错了两次,哎!!! 嗯,还有一个问题,在动态SQL中,if标签中test属性中判断时,不能用大写 ...
- Python入门小建议
"java从心"正式更名"KEN DO EVERTHING".Ken(Can) Do Everything,无所不能 Believe youseft then ...
- 推荐几个高质量图片网站,再也不怕没图装X了
这几个图片网站都是高质量的图片网站,建议收藏! 找个高逼格的图片发票圈,不再难了. Unsplash 网址:https://unsplash.com Unsplash是一个免费高质量照片的网站,照片都 ...
- 20191211 HNOI2017模拟赛 C题
题目: 分析: 开始觉得是神仙题... 然后发现n最多有2个质因子 这说明sm呢... 学过物理的小朋友们知道,当一个物体受多个不同方向相同的力时,只有相邻力的夹角相等,受力就会平衡 于是拆扇叶相当于 ...
- Python3.6在win7中无法正常运行的问题
Python3.6在启动时报缺少api-ms-win-crt-runtime-l1-1-0.dll解决靠谱方法:1.到正常的机器,或者就在开发环境,去搜索api-ms-win-crt-runtime- ...
- 简述java的ArrayList
java的ArrayList 基础知识: ArrayList集合长度可以发生改变 泛型 自动装箱和自动拆箱 部分常用的接口方法 boolean add(E obj) E add(int index,E ...
- SpringBoot任务篇Ⅴ --- 异步任务、定时任务、邮件任务
Java的任务在项目中需要用到的地方很多,比如,每月月末的财务报表给财务部门,定时给领导发个邮件短信等等.这时候我们就需要用到任务了,任务调度本身涉及到多线程并发.运行时间规则制定和解析.场景保持与恢 ...
- RAID磁盘冗余阵列
RAID阵列分类 **一.RAID 0** 1.优点: 充分利用 I/O 总线性能使其带宽翻倍,读/写速度翻倍: 充分利用磁盘空间,利用率为 100%.2.缺点: 不提供数据冗余: 无数据检验,不能保 ...