Vue 实例

构造函数

每个 Vue.js 应用都是通过使用 Vue 构造函数创建一个 **根 Vue 实例** 来引导的

var vm = new Vue({
  // options
})

Vue 实例本质上是 **ViewModel**，如 MVVM 模式中所定义，因此您将在文档中看到变量名 vm。

当您实例化一个 Vue 实例时，您需要传入一个 **选项对象**，其中可以包含数据、模板、要挂载的元素、方法、生命周期回调等选项。完整的选项列表可以在 API 参考中找到。

Vue 构造函数可以扩展以创建具有预定义选项的可重用 **组件构造函数**

var MyComponent = Vue.extend({
  // extension options
})
// all instances of `MyComponent` are created with
// the pre-defined extension options
var myComponentInstance = new MyComponent()

虽然您可以以命令式的方式创建扩展实例，但在大多数情况下，您将注册组件构造函数作为自定义元素，并在模板中以声明式的方式组合它们。我们将在后面详细讨论组件系统。现在，您只需要知道所有 Vue.js 组件本质上都是扩展的 Vue 实例。

属性和方法

每个 Vue 实例都 **代理** 其 data 对象中找到的所有属性

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// setting the property also affects original data
vm.a = 2
data.a // -> 2
// ... and vice-versa
data.a = 3
vm.a // -> 3

需要注意的是，只有这些代理属性是 **响应式** 的。如果您在实例创建后向实例附加一个新属性，它不会触发任何视图更新。我们将在后面详细讨论响应式系统。

除了数据属性之外，Vue 实例还公开了一些有用的实例属性和方法。这些属性和方法以 $ 为前缀，以区别于代理数据属性。例如

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch is an instance method
vm.$watch('a', function (newVal, oldVal) {
  // this callback will be called when `vm.a` changes
})

请参阅 API 参考获取完整的实例属性和方法列表。

实例生命周期

每个 Vue 实例在创建时都会经历一系列初始化步骤 - 例如，它需要设置数据观察、编译模板以及创建必要的绑定。在此过程中，它还会调用一些 **生命周期钩子**，这使我们有机会执行自定义逻辑。例如，created 钩子在实例创建后被调用

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` points to the vm instance
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

还有一些其他钩子，它们将在实例生命周期的不同阶段被调用，例如 compiled、ready 和 destroyed。所有生命周期钩子都以其 this 上下文指向调用它的 Vue 实例的方式被调用。一些用户可能想知道“控制器”的概念在 Vue.js 世界中的位置，答案是：Vue.js 中没有控制器。您对组件的自定义逻辑将分布在这些生命周期钩子中。

生命周期图

以下是实例生命周期的图示。您现在不必完全理解所有内容，但这张图在将来会很有帮助。

Lifecycle

← 概述数据绑定语法 →

指南 2.0 1.0 0.12 0.11

Vue 实例

构造函数

属性和方法

实例生命周期

生命周期图

指南