vue ——Vue实例

VUE  实例

构造器：每个vue.js应用都是通过构造函数Vue创建一个 Vue的根实例启动的。

var vm = new Vue({
//选项
})

在实例化Vue时，需要传入一个选项对象，他可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

可以跨站Vue 构造器，从而用预定义选项创建可复用的组件构造器；

var MyComponent = Vue.extend({
 //扩展选项
})
//搜有的'MyComponent'实例都讲以预定义的选项被创建
var myComponentInstance = new MyComponent();

尽管可以命令式地创建扩展实例，不过在多数情况下建议将组建构造器注册为一个自定义元素，然后声明式地用在模板中。

所有的Vue.js组件其实都是被扩展的Vue实例。

属性和方法：

 每个Vue实例都会代理其data对象里所有的属性：

var data = { a : 1 }
var vm = new Vue({
   data : data
})
vm.a === data.a // true
//设置属性也会影响到原始数据
vm.a = 2;
data.a // 2
//反之亦然
data.a = 3;
vm.a // 3

注意：只有被这些代理的属性是相应的。如果在实例创建之后添加新的属性到实例上，它不会触发试图更新。

除了data属性，Vue实例暴露了一些有用的实例属性与方法。这些属性和方法都有前缀$,以便与代理的data属性区分。例如：

var data = { a : 1 }
var vm = new Vue({
    el : '#example',
    data : data
})
vm.$data === data // true
vm.$el === document.getElementById('example') // true
// $watch 是一个实例的方法
vm.$watch( 'a' , function ( newVal , oldVal ) {
//这个回电将在vm.a 改变后调用
})

注意：不要在实例属性或者回调函数中使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是Vue实例，而是 this.myMethod 未被定义。

实例的生命周期：

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

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

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

生命周期图示：