2018-08-22 分类：VUE 作者：管理员 阅读（27）
生命周期：Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期，各个阶段有相对应的事件钩子
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
<!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>vue生命周期学习</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
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>
</html>
控制台输出如下图:
由上图得知:
* 1.beforeCrete: 此时,$el和data都为undefined,没有初始化
* 2.created: 创建后data初始化了,而$el没有
* 3.brforeMount: 挂在之前,$el和data都初始化了,但是message的还没有同步到页面的{{message}}里
* 4.mounted: Vue实例挂载完成了,{{message}}成功变成 "Vue的生命周期"
el : undefined data : undefined message: undefined
el : undefined data : [object Object] message: hi
el : [object HTMLDivElement]
<div id="app"><p>{{ message }}</p></div>
data : [object Object]
message: Vue的生命周期
el : [object HTMLDivElement] <div id="app"><p>hi</p></div> data : [object Object] message: Vue的生命周期
在控制台里输入vm.message = '数据更新了'
*当一个数据发生改变时，你的视图也将随之改变，整个更新的过程是：数据改变——导致虚拟DOM的改变——调用这两个生命钩子去改变视图
*这个数据只有和模版中的数据绑定了才会发生更新
*在beferoDestory生命钩子调用之前，所有实例都可以用
*但是当调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
推荐一篇对vue生命周期诠释的比较好的文章:vue 生命周期深入
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
感谢您让我添加个鸡腿！
支付宝
微信
上一篇：Vue.js项目目录结构
下一篇：微信相关常用的网址
干洗博主分享了
评：算法相关加油，学习！ 😉
评：九宫格抽奖案列很有用的分享，感谢
评：微信公众号开发总结过来踩踩 ➡
评：博客介绍学习 :redface:
评：常用方法总结朋友 交换链接吗
评：promise用例场景收集
共有 0 条评论 - vue2.0笔记-生命周期