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

vue生命周期及钩子函数理解

2019-03-20 19:42 591 查看

什么是vue？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue钩子函数
1.beforeCreate 创建前执行（data和el都还未初始化）
2.created 完成创建（完成了data数据初始化，el还未初始化）
3.beforeMount 载入前（完成了data和el数据初始化）
4.mounted 载入后html已经渲染(ajax请求可以放在这个函数中)
5.beforeUpdate 更新前状态（view层的数据变化前，不是data中的数据改变前）
6.updated 更新状态后
7.beforeDestroy 销毁前
8.destroyed 销毁后（Dom元素存在，只是不再受vue控制）

下面以具体代码来直观介绍生命周期及钩子函数：

<!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>

上述代码执行后打开f12看生命周期中钩子函数不同时期的不同状态：

update相关
当在控制台输出app.message= ‘yes !! I do’;后可以看到data里的值被修改后，将会触发update的操作

destroy相关
我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

控制台输入app.$destroy();可以看到：

最后上一张比官网稍微详细的图参考：

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

标签：

相关文章推荐

新的分享

章节导航