Vue2.5笔记：Vue的实例与生命周期

理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步，也是非常必须的，因为实例是它的一个起点，也是它的一个入口，只有我们创建一个 Vue 实例之后，我们才行利用它进行一些列的操作。

首先 Vue 没有完全遵守 MVVM 的架构模式，但是它的设计也受到了该模式的启发，Vue 也就是在该模式中起到 VM（ViewModel） 的作用。如果有对 MVC、MVVM 模式不了解的同学可以参考阮一峰老师的 《MVC，MVP 和 MVVM 的图示》 这篇文章可以对它们有一个简单对了解。

Vue 的实例从创建到使用以及销毁的过程中会有多个生命周期钩子，这些钩子在我们整个的实例过程中起到了非常重要，而且有了这些钩子我们可以很好的去控制我们的整个过程的逻辑。

Vue 借鉴了 MVVM 架构模式，Vue 在整个过程中起到的就是 VM 的作用，如果我们对 MVVM 有过了解，V 即 View（ 视图层）就是我们看到的模版HTML，M 即 Model（数据层）就是我们想要显示出来的数据，Vue 就是负责把 View－Model 连接起来。

创建Vue实例

每个 Vue 实例都是通过 Vue 函数来创建的，在 Vue 中的每一个应用都是会创建一个实例，组件也是一个实例。

当创建一个 vue 实例的时候，我们可以传入一个选项对象，如data、el、methods、生命周期钩子函数等等。

var vm = new Vue({
  el: '#root',
  data: {
    name: 'Modeng'
  },
  methods: {
    handleClick () {
        console.log(123);
    }
  }
})

从上面的图片我们看到我们的实例已经挂在到 DOM 元素上，数据和方法都已经拥有。最后我们就是要把这些数据怎么显示到我们到眼前，这里就需要用到 Vue 另一个知识点 模版了。

<div id="root">
    <div>Hello {
  {name}}</div>
</div>

我们只需要使用 模版的 { {}} 语法将我们的数据绑定到视图上就能显示我们要的结果。

如果你以为仅仅是这么简单那你就太年轻了，我们也就没有使用 Vue 的必要了，当我们创建一个实例时，Vue 会把视图与数据进行连接，当我们修改数据时，视图会自动更新。

有一点值得我们注意的是，我们在使用 Vue 实例时，需要关注下 this，千万不要在含有 this 的函数时，使用箭头函数，因为箭头函数是没有绑定 this 的，所以会出现问题。

实例的属性、方法与 API

除了上面我们所说的数据的属性以外，Vue 给我们暴露了很多的实例与方法，例如： 「 d a t a 」 、 「