【Vue实例】

---

使用过一段时间的vue1.0,现在vue已经更新了很多版本了，语法在很多地方也有了变化。在此记录一下重新学习的过程以及对vue的一些自己的理解。vue的介绍就直接连接到官网了，官网介绍很详细了【Vue介绍】

1. 构造函数

在使用之前我们首先需要构建vue实例

var vm = new Vue({

    })

以上代码是通过 new 构建了一个vue实例，构造函数中是一个对象，上面代码我用了一个空的对象，对象中可以包含 数据、模板、挂载元素、方法、生命周期钩子等选项。

【我们可以通过extend对vue构造器进行扩展】

var MyComponent = Vue.extend({
  // 扩展选项
})

// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

以上代码中通过extend进行了vue构造函数的扩展，我们使用 MyComponent 生成的每一个实例都将拥有扩展中的属性。

---

2. 属性与方法

我们上面在创建实例的时候传入的是一个空的对象，实际使用中这个对象中是有属性的。

let data = {
    name: "blue"
}

let vm = new Vue({
    data
})

vm.name === data.name;  //true

data.name = "Crazy";
vm.name;    // Crazy

vm.name = "Pink";
data.name;  //Pink

上面代码使用的是ES6的语法，应该能懂。上面代码中Vue实例 【vm】在创建的过程中加入了一个data属性，我们可以通过【vm】实例访问到 name 属性，说明vue实例会对data对象中的每一个属性进行【代理】（也就是托管），所以我们不管是更改【对象data】还是更改【实例vm】属性都会同步name属性。

let data = {
    name: "blue"
}

let vm = new Vue({
    data
})

vm.$data;

我们可以通过上面一种方式访问到整个实例的【data属性】对象，还有一些暴露在实例中的属性和方法，他们都是用$为前缀。这儿就不多说了参考手册里有详细的说明。【API参考手册】

---

3. Vue实例的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 【生命周期钩子】（一些实例方法，用于生命周期中我们更愿意叫他们为钩子函数） ，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用：

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分布在这些钩子中。

---

4. Vue生命周期图示

下面这张图是官方给出的生命周期图示，我只是把它翻译成中文了