<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue的生命周期</title>
</head>
<body>
<div id="app">
<h1 id="name">{{name}}</h1>
<h1 id="age">{{age}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.config.productionTip = false
let vm = new Vue({
//指定挂载的容器
//el:'#app',
//指定模块(如果又模板vue 会渲染整个模板 如果没有模板vue 会将el 里面的内容当成模板渲染)
// template: '<div ><h1>{{name}}</h1><h1>{{age}}</h1></div>',
//数据
data: {
name: '张三',
age: 20,
},
//创建之前（数据初始化之前）
beforeCreate() {
console.log('-------------beforeCreate----------')
// 这个生命周期函数基本上不用，除非要设置vue实例
this.__proto__.fn=function(){
alert('哈哈')
}
//vue实例已经创建完成
console.log(this);
// 数据初始化还没有完成
console.log(this.name+" "+this.age);
},
//创建完成（数据初始化完成）
created() {
console.log('-------------created----------');
//这个生命周期函数，通常用于vue管理的数据,比如ajax的请求会放在这里
//vue实例已经创建完成
console.log(this);
// 数据初始化已经完成
console.log(this.name+" "+this.age);
},
// 挂载之前(模板已经成功渲染，但是还没有将内容渲染到页面))
beforeMount() {
console.log('-------------beforeMount----------');
// 这个生命周期函数基本上不用
console.log(this.$el);
document.querySelector('#name').innerHTML="哈哈"
},
// 挂载完成(模板已经成功渲染，并且已经将内容挂载到页面)
mounted() {
console.log('-------------mounted----------');
console.log(this.$el);
document.querySelector('#name').innerHTML="呵呵"
},
// 修改之前(数据已经改了，页面还没有开始重新挂载)
beforeUpdate() {
console.log('-------------beforeUpdate----------');
console.log(this.name+" "+this.age);
console.log(this.$el);
},
// 修改完成(数据已经改了，页面已经开始重新挂载)
updated() {
console.log('-------------updated----------');
console.log(this.name+" "+this.age);
console.log(this.$el);
},
//销毁之前
beforeDestroy() {
console.log('-------------beforeDestroy----------');
// 这个生命周期函数，会用的多一些
console.log(this);
// 对数据做任何的改变，都不会重新渲染
this.name='王五'
},
// 销毁完成
destroyed() {
console.log('-------------beforeDestroy----------');
// 这个生命周期函数几乎不用
console.log(this);
this.name='王五'
},
})
setTimeout(() => {
vm.$mount("#app")
}, 3000);
</script>
</body>
</html>
