对于实现页面逻辑交互等效果，我们必须知晓vue的生命周期，才能愉快的玩耍，知道我们写的东西应该挂载到哪里，vue官方给出的api讲解的那叫一个简单啊，如下：

所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此this与你期待的 Vue 实例不同，this.fetchTodos的行为未定义。

下面附加一张生命周期图示

那么接下来一个一个来，一起揭开生命周期以及钩子函数的神秘面纱

1、beforeCreated

在实例创建之前，数据还没有初始化，dom结构还没有挂载

2、created

实例已经创建完成之后被调用，完成了属性和方法的运算，初始化完毕，dom结构依然没有挂载

在这个钩子里面可以执行一些函数自调用和一些数据的初始化

3、beforeMount

在挂载开始之前被调用，初始化完毕，dom结构依然没有挂载

4、mounted

在挂载完成之后被调用，初始化完毕，dom结构已经挂载

在这个钩子里面可以进行一些数据的交互，dom结构的操作

5、beforeUpdate，updated

更新时调用  以及  更新完成时调用 这个放在一起来看，当然这里面我们添加一个事件，用来更改dom结构中的文字

但是在log中我们看到更新前和更新后的dom中的msg显示的都是更新后的数据，这里我不知道为什么，可能是更新之后beforeUpdate的数据又是更新前的数据了

以上是对钩子函数的个人理解，目前一直在用vue写东西，都是在自己一边探索一边写，一切都是源自对大前端的热爱和对Vue的热爱！！哈哈

作者：一本正经的胡说八道LV
链接：https://www.jianshu.com/p/e672df55d643