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的时候学过 ...
随机推荐
- git 工作中实用 多人协同开发
多人协同开发 .克隆分支 git clone -b dev1. url .创建并关联远程分支 git checkout -b dev_wt origin/dev_wt 情况一获取其它分支的代码,并合并 ...
- 7.Java帝国的诞生
1972年,C诞生,而Java是1995年诞生的.它贴近硬件,有汇编语言的特性,运行极快,效率极高.早期,用在操作系统.编译器.数据库.网络系统等.但它有两把沉重的枷锁一直在程序员身上,那就是指针和内 ...
- 第二次作业hzw
第二次作业 | GIT地址 | 地址链接 | |--|--| |GIT用户名 | BRYANT333 | |学号后五位|24240| |博客地址|我的博客| |作业链接|第二次作业地址| 一.环境配置 ...
- 用VLC搭建流媒体服务器
用vlc搭建简单流媒体服务器(UDP和TCP方式) 这段时间用到了流媒体数据传输的TCP和UDP方式,感觉vlc可以做这方面的demo,这里总结下,也方便我以后查阅. 简介 VLC主页:http:// ...
- mybatis generator cmd 终端命令 生成dao model mapper
mybatis generator cmd 终端命令 生成dao model mapper 文件包下载 mybatis-generator-core-1.3.2.jar 下载地址:https://gi ...
- http--->http缓存机制系统梳理
http缓存 HTTP请求的过程 从在浏览器地址栏敲入域名-DNS解析-实际IP-(中间可能多个代理服务器分发)- 源服务器,请求抵达源服务器后,在服务器上找到请求的资源,再通过代理服务器一层层的返回 ...
- JVM源码分析-JVM源码编译与调试
要分析JVM的源码,结合资料直接阅读是一种方式,但是遇到一些想不通的场景,必须要结合调试,查看执行路径以及参数具体的值,才能搞得明白.所以我们先来把JVM的源码进行编译,并能够使用GDB进行调试. 编 ...
- screen配置窗口显示
screen的下方不显示,可以复制如下的代码 cd /root && vim .screenrc 贴上如下内容 hardstatus on hardstatus alwayslastl ...
- MySQL Router单点隐患通过Keepalived实现
目录 一.介绍 二.环境准备 三.安装步骤 3.1下载软件包,解压 3.2源码安装 3.3配置keepalived 3.4修改keepalived配置文件 3.5启动keepalived 3.6查看V ...
- 2019年，我花了3个月时间备考PMP
经过几个月的准备,终于在2019年12月7日完成了PMP的考试,并于1月21日查到了成绩,喜获5A,意料之中.总结这次考试的具体情况:涉及题型虽然都没有超出大纲的范围,但是原题出现的概率似乎不高, ...