本文最后更新于2019年5月5日，已超过一年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
学习vue的过程中，有一个重要的知识点，那就是生命周期钩子，vue官方提供了一张生命周期的图示，通过这张图示我们可以很容易的学会生命周期函数。
那么什么是生命周期函数呢？生命周期函数就是vue实例在某一个时间点会自动执行的函数。
我们可以通过以下的代码实例简单的了解一下：
- <div id="app">
- {{msg}}
- </div>
- <script>
- //生命周期函数就是vue实例在某一个时间点会自动执行的函数
- var vm = new Vue({
- el: '#app',
- template: "<div>{{msg}}</div>",
- data: {
- msg: "hello world"
- },
- created: function () {
- console.log("created");
- },
- beforeCreate: function() {
- console.log("beforeCreate");
- },
- beforeMount: function() {
- console.log(this.$el);
- console.log("beforeMount");
- },
- mounted: function () {
- console.log(this.$el);
- console.log("mounted");
- },
- beforeDestroy: function () {
- console.log("beforeDestroy");
- },
- destroyed: function() {
- console.log("beforeDestroy");
- },
- beforeUpdate: function() {
- console.log("beforeUpdate")
- },
- updated: function () {
- console.log("updated")
- }
- })
- </script>
以上的代码执行会在控制台打印函数执行的顺序，需要注意的是其中beforeDestroy函数和destroy函数以及beforeUpdate函数和updated函数需要执行对应的操作才会打印相应的信息。
通过看vue的源码我们可以知道生命周期函数一共有11个，但是本文只说到了其中的8个。
最后生命周期钩子具体有哪些作用呢？目前我也没学到，一起拭目以待吧~
另外
生命周期函数直接定义在vue实例中，不需要单独写在methods当中
完。
微信小程序
互联网开发，终身学习者，欢迎您的关注！
