学习vue有一段时间了,之前一直是简单的使用,看来很多生命周期钩子的介绍,但是还是不太理解,直到自己开始真正的开发时,才真正的理解。希望接下来的介绍,大家看完可以真正的掌握,没有掌握也不要紧,毕竟编程时需要自己真正的使用,掌握的
备注:大家注意引入vue
介绍
看vue开发文档的时候,大家经常看到的图片如下:
也许刚开不了解,但是当你学会了之后,回头会发现,原来图片真的介绍的很好。
上代码
1、第一个生命周期钩子(beforeCreate):
下面是我们这次的基本模板,大家可以自己练习,可以更好的理解:
<!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.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
//闯将vue实例,取得viewModel
var vm=new Vue({
el:"#app",
data:{
msg:'ok'
},
methods:{
show(){
console.log('执行了show方法')
}
},
beforeCeate(){//第一个生命周期钩子,在实例被完全创建之前
console.log(this.msg)
this.show()
}
})
</script>
</body>
</html>
执行上面代码后输出结果:
undefined
this.show() is not a function
2、第二个生命周期钩子create
created(){
console.log(this.msg)
this.show()
}
执行上面代码后输出结果:
ok
执行了show方法
3、beforeMount()
<div id="app">
<h3 id="h3">{{msg}}</h3>
</div>
.....
beforeMount(){
console.log(document.getElementById('h3').innerText)
}
执行上面代码后输出结果:模板在内存中已经编译好了,但还没更新到新的模板中。
{{msg}}
4、mount()
mount(){
console.log(document.getElementById('h3').innerText)
}
执行上面代码后输出结果:页面已经更新了新的模板,此时页面已经被渲染好了,此时如果没有其他操作,此实例就静静的躺在内存中。
ok
5、beforeUpdate和updated
条件:数据发生改变。
beforeUpdate:这是数据被更新,但是模板界面还没有更新。
update:这是数据被更新,但是模板界面已经更新完成。
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{msg}}</h3>
</div>
beforeUpdate(){
console.log('界面上元素的内容:'+document.getElementById('h3').innerText)
console.log('data中msg中的数据是:'+this.msg)
}
执行上面代码后输出结果:记得点击修改按钮,这样才会触发beforeUpdate事件。
界面上元素的内容:No
data中msg中的数据是:ok
updates(){
console.log('界面上元素的内容:'+document.getElementById('h3').innerText)
console.log('data中msg中的数据是:'+this.msg)
}
执行上面代码后输出结果:记得点击修改按钮,这样才会触发beforeUpdate事件。
界面上元素的内容:No
data中msg中的数据是:No
7、beforeDestory和destoryed
beforeDestory执行的时候,实例上所有的data和methods、以及过滤器和指令。。。都处于可用阶段,此时还没有真正的执行销毁过程。
destoryed执行的时候,实例上所有的data和methods、以及过滤器和指令。。。都已经被销毁。