先简单讲下Vue实例：
每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的
当创建一个Vue实例时，你可以传入一个选项对象。
一个Vue应用由一个通过new Vue创建的根Vue实例，以及可选的嵌套的，可复用的组件树组成。
所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）
实例生命周期钩子
每个Vue实例在被创建时都要经过一系列的初始化过程--例如，需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会
生命周期钩子的this上下文指向调用它的Vue实例
不要在选项属性或回调上使用箭头函数，比如：
created: () => console.log(this.a) 或
vm.$watch('a', newValue => this.myMethod())
因为箭头函数是和父级上下文绑定在一起的，this不会是如你预期的Vue实例，经常导致
Uncaught TypeError: Cannot read property of undefined 或
Uncaught TypeError: this.myMethod is not a function 之类的错误
生命周期图示：
生命周期函数就是Vue实例在某一个时间点会自动执行的函数
1，调用new Vue() ，Vue会帮助我们创建一个Vue实例
2，初始化时间和生命周期（init events & lifecycle）
3，Vue会自动执行生命周期函数beforeCreate（初始化时间和生命周期之后就执行）
4，处理外部的注入和双向绑定的一些相关内容（init injections & reactivity）
这一步执行完之后，Vue实例的初始化就基本完成了
5，4步骤之后执行created函数
create在beforeCreate之后执行了
6，询问是否有el这个选项，走Yes这条线
7，再询问是否有template这条线
没有 走 右侧分支
Compile el's outerHTML as template (把el内部的内容或者说整体的内容当做模板)
有 走 左侧分支
Compile template into render function
所以下面两种方式是一样的：
8，在渲染之前 ，执行beforeMount函数（在模板和数据相结合，即将挂载到页面上的一瞬间之前的时间点上）
9，create vm.$el and replace "el" with it
模板和数据结合的元素会被挂载到页面之上
10，执行mounted函数（在页面上挂载之后执行）
说明当beforeMounted函数执行的时候，页面还没有被渲染，当mounted函数执行的时候，页面已经被渲染了
11， when data changes Virtual DOM re-render and patch
beforeUpdate是在数据发生改变但是还没有重新渲染之前执行
updated是在重新渲染之后执行
12，when vm.$destroy() is called Teardown watchers，child components and event listeners
当destroy()函数被调用的时候执行beforeDestroy函数，当组件被完全销毁时，destroyed函数执行
注 ：Vue的生命周期函数不能放在methods里面，单独的放在Vue实例里面就好了