2018-08-22 分类：VUE 作者：管理员 阅读（841）
生命周期：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项目目录结构
下一篇：微信相关常用的网址
一个搬砖仔而已@_@
评：交换数组里任一两个的位置专业程序员？
评：交换数组里任一两个的位置移动端 vue项目的话，可以参考 https://juejin.im/post/5e6c28...
评：picker-card - 移动端多层级树结构数据展示方法和选择的最佳解决方法选择后的，你所选择的对象返回给你了的，就是来获取 选择的 id 去请求，这样的需要考虑到了的
评：picker-card - 移动端多层级树结构数据展示方法和选择的最佳解决方法选择后的数据可以回显吗？实际使用中（如编辑页面）要用到。
评：picker-card - 移动端多层级树结构数据展示方法和选择的最佳解决方法能用在vue上么？
评：picker-card - 移动端多层级树结构数据展示方法和选择的最佳解决方法
共有 0 条评论 - vue2.0笔记-生命周期