<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的生命周期</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app" ref="app">
{{ name }}
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
name: "python",
},
beforeCreate() {
//这里的代码执行时,vm对象尚未创建,所有data中的属性是无法操作的
console.log("vm对象创建前：");
console.log(this.name); //此时找不到this.name
this.name = 'java'; //此时设置this对象的属性不会生效
console.log(this.$el);
console.log(this.$data);
},
created() {
//这里的代码执行时,vm对象已经创建完成,但是还没有把数据和视图模板进行绑定
//这里可以用于写从后端获取数据的代码
console.log("vm对象创建完成：");
console.log(this.$el);
console.log(this.$data);
},
beforeMount() {
//这里的代码执行时,已经绑定了视图,但是没有更新视图中的数据
console.log("挂载前：");
console.log(this.$el.innerHTML);
console.log(this.$data);
},
mounted() {
//这里的代码执行时,已经把data中的数据替换了模板中对应的内容了
//注意: 此时页面还没有显示
console.log("挂载后：");
console.log(this.$el.innerHTML);
console.log(this.$data);
},
beforeUpdate() {
//当data的中数据发生变化时,执行beforeUpdate()和updated()
//此时data中的数据还没有发生变化
console.log('更新数据前:');
let name = this.$el.innerHTML;
console.log('name:' + name);
},
updated() {
//此时data中的数据已经改变
console.log('更新数据后:');
let name = this.$el.innerHTML;
console.log('name:' + name);
},
beforeDestory() {
console.log("vm对象销毁前");
},
destoryed() {
console.log("vm对象销毁后");
}
});
</script>
</html>