对于实现页面逻辑交互等效果，我们必须知晓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的热爱！！哈哈
