beforeCreate(){
// 组件创建之前
},
created(){
// 组件创建之后
// 使用该组件,就会触发以上的钩子函数,created中可以操作数据,发送ajax,实现vue页面的影响 应用:发送ajax请求
},
beforeMount(){
// 装载数据到DOM之前会调用
console.log(document.getElementById('app'));
},
mounted(){
// 这个地方可以操作DOM
// 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素,vue操作以后的DOM
console.log(document.getElementById('app'));
},
beforeUpdate(){
// 在更新之前,调用此钩子,应用:获取原始的DOM
console.log(document.getElementById('app').innerHTML);
},
updated(){
// 在更新之前,调用此钩子,应用:获取最新的DOM
console.log(document.getElementById('app').innerHTML);
},
beforeDestroy(){
//组件摧毁之前
console.log('beforeDestroy');
},
destroyed(){
//组件摧毁时调用
console.log('destroyed');
},
activated(){
console.log('组件被激活了');
},
deactivated(){
console.log('组件被停用了');
}
生命周期实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<button @click="destoryvm">删除</button>
<p v-show="IsShow"> 测试文本 </p>
</div>
<script src="https://vuejs.org/js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
IsShow:true,
timer:''
},
created(){
//创建时调用
console.log('创建实例成功!')
},
mounted(){
//初始化显示之后立即调用
this.timer = setInterval( () => {
console.log('正在执行定时器!')
this.IsShow = !this.IsShow
},1000)
},
beforeDestroy(){
//实例死亡前调用
clearInterval(this.timer)
},
computed:{
},
methods:{
destoryvm(){
// 干掉view model
this.$destroy()
}
}
})
</script>
</body>
</html>