每个 Vue 实例在被创建时都要经过一系列的初始化过程
生命周期分为三大阶段：初始化显示、更新显示、销毁Vue实例
-
初始化阶段的钩子函数：
beforeCreate() 实例创建前：数据和模板均未获取到 created() 实例创建后: 最早可访问到 data 数据，但模板未获取到 beforeMount() 数据挂载前：模板已获取到，但是数据未挂载到模板上。 mounted() 数据挂载后：数据已挂载到模板中 -
更新阶段的钩子函数：
beforeUpdate() 模板更新前：data 改变后，更新数据模板前调用 updated() 模板更新后：将 data 渲染到数据模板中 -
销毁阶段的钩子函数：
beforeDestroy() 实例销毁前 destroyed() 实例销毁后
<div id='app'>
<App></App>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
Vue.component('Test',{
data(){
return {
msg:"hello world",
data:{}
}
},
template:`
<div>
<div>{{msg}}</div>
<button @click = 'changerHanlder'>改变</button>
</div>
`,
methods:{
changerHanlder(){
this.msg = this.msg +'尴尬';
}
},
beforeCreate:function(){
// 组件创建之前
console.log(this.msg); //undefine
},
created:function(){
//
// $.ajax({
// url:''
// methods:'get',
// success:(data)=>{
// this.data = data;
// }
// })
//组件创建之后
console.log(this.msg);
//使用该组件，就会调用created方法
// 在created这个方法中可以操作后端的数据 数据驱动视图
// 应用： 发起ajax请求
},
beforeMount:function(){
// 挂载数据到 DOM之前会调用
console.log(document.getElementById('app'));
},
mounted:function(){
// 挂载数据到 DOM之后会调用 Vue作用以后的DOM 操作DOM
console.log(document.getElementById('app'));
},
beforeUpdate:function(){
// 在更新DOM之前 调用该钩子，应用：可以获取原始的DOM
console.log(document.getElementById('app').innerHTML);
},
updated:function(){
// 在更新DOM之后调用该钩子，应用：可以获取最新的DOM
console.log(document.getElementById('app').innerHTML);
},
beforeDestroy:function(){
console.log('beforeDestroy');
},
destroyed:function(){
console.log('destroyed');
},
activated:function(){
console.log('组件被激活了');
},
deactivated:function(){
console.log('组件被停用了');
}
})
var App = {
data(){
return {
isShow:true
}
},
// vue内置组件<keep-alive></keep-alive> 能在组件的切换过程中将状态保留在内存中。防止重复渲染DOM
template:`
<div class = 'app'>
<keep-alive>
<Test v-if ='isShow'/>
</keep-alive>
<button @click = 'isShow =!isShow'>改变生死</button>
</div>
`
}
new Vue({
el: '#app',
data() {
return {
}
},
components: {
App
}
});
</script>
