vue实例

创建一个vue实例

每个vue应用都是通过用vue函数创建一个新的vue实例开始的：

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

虽然没有完全遵循mvvm模型，但是vue的设计也受到了它的启发。因此在文档中经常会使用vm（ViewModel的缩写）这边变量名表示vue实例。

当创建一个vue实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的的行为。作为参考，你也可以在api文档中浏览完整的选项列表。

一个vue应用由一个通过new vue创建的根vue实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个todo应用的组件树可以是这样的：

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

所有的vue组件都是vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）。

数据与方法

当一个vue实例被创建时，它将data对象中的所有属性加入到vue的响应式系统中。当这些属性的指发生改变时，视图将产生“响应”，及匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时data中存在的属性才是响应式的。

这里唯一的例外是使用Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

实例生命周期钩子

每个vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到dom并在数据变化时更新dom等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如created钩子可以用来在一个实例被创建之后执行代码：

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

也有一些其他的钩子，在实例生命周期的不同阶段被调用，如mounted、updated和destroyed。生命周期钩子的this上下文指向它的vue实例。

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到位置，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。