vue刚接触时写了个博客网站放github上,顺便让优秀的学长面试了一波,了解到好多知识漏洞。补当时笔记:
A.生命周期和钩子函数
经典图如下:
从vue2.0钩子函数回忆:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
beforeCreated: 此时 el 和 data 都没开始加载
created: el没开始加载,data加载完毕
beforMount: el加载,data加载完毕,但标签内应用数据为成功加载
mounted: 全部加载完毕
beforeUpdate: 数据发生改变,还没渲染之前,控制台输入信息修改message,beforeUpdate和updated显示同样的message改变后的值和标签内改变后的值
updated: 数据发生改变,还没渲染之后,控制台输入信息修改message,beforeUpdate和updated显示同样的message改变后的值和标签内改变后的值
正常调用时是看不到页面摧毁事件钩子执行的,这时手动输入
app.$destroy();
beforeDestroyed: 摧毁事件中值和mouted钩子里的el data 值一样,但是进行页面摧毁后再次改变页面值,页面不会再次响应
destroyed: 摧毁事件中值和mouted钩子里的el data 值一样,但是进行页面摧毁后再次改变页面值,页面不会再次响应 ,原来dom结构保留。
keep-alive
独有的生命周期
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗
activated配合keep-alive才可实现从其他页面跳转到某个页面时会请求数据,当从下级页面返回这个页面时不会重新请求数据
activated: <keep-alive>组件被激活调用。
deactivated:<keep-alive>组件被移除时调用。
用 keep-alive
包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated
钩子函数,命中缓存渲染后会执行 actived
钩子函数。
思否里大佬总结的具体使用总结,蛮实用的,记一下:
beforecreate
: 可以在这加个loading事件created
:在这结束loading,还做一些初始化,实现函数自执行mounted
: 在这发起后端请求,拿回数据,配合路由钩子做一些事情beforeDestroy
: 你确认删除XX吗?移除事件、定时器,防止内存泄漏以及各种组件销毁操作
destroyed :当前组件已被删除,清空相关内容后会调用改钩子函数。
补图: