您的位置：首页 > Web前端 > Vue.js

vue知识点(一）—— 生命周期和钩子函数

2019-04-13 15:54 801 查看

vue刚接触时写了个博客网站放github上，顺便让优秀的学长面试了一波，了解到好多知识漏洞。补当时笔记：

A.生命周期和钩子函数

经典图如下：

从vue2.0钩子函数回忆：

[code]<!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改变后的值和标签内改变后的值

正常调用时是看不到页面摧毁事件钩子执行的，这时手动输入

[code]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 ：当前组件已被删除，清空相关内容后会调用改钩子函数。

补图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航