Vue .js 2.0 instance

Vue2.0 instance

Constructor

Each Vue .js is launched by creating a root instance of Vue from the constructor Vue:

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

Although the MVVM pattern is not fully followed, Vue's design was undoubtedly inspired by it. Therefore, the variable name vm is often used in documents to represent Vue instances.

When instantiation of Vue, you need to pass in an option object that contains options such as data, templates, mount elements, methods, lifecycle hooks, and so on. All options can be viewed in the API documentation.

You can extend the Vue constructor to create reusable component constructors with predefined options:

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

Although you can create an extension instance in a command-based style, in most cases it is recommended that the component constructor be registered as a custom element and then used in a declaratory form in the template. W e'll explain this in more detail later in "Component Systems." Now all you need to know is that .js Vue components are actually extended Vue instances.

Properties and methods

Each Vue instance represents all the properties in its data object:

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

Note that only these proxy properties are responsive. I f you add a new property to an instance after it is created, it does not trigger a view update. We'll discuss the response system in more detail later.

In addition to the data property, the Vue instance exposes some useful instance properties and methods. B oth these properties and methods have a prefix of $to distinguish them from the agent's data property. For example:

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`  改变后调用
})

Note that you should not use arrow functions in instance properties or callback functions such as vm.$watch ('a', newVal, this.myMethod()). Because the arrow function binds the parent context, this is not a Vue instance as expected, but this.myMethod is not defined.

Look for API references in the full list of instance properties and methods.

The instance lifecycle

Each Vue instance 100 is subjected to a series of initialization processes before it is created. F or example, an instance needs to configure data observer, compile a template, mount an instance to the DOM, and then update the DOM as the data changes. I n this process, the instance also calls some lifecycle hooks, which gives us the opportunity to execute custom logic. For example, the hook is called after the instance is created:

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

There are also other hooks that are called at different stages of the instance lifecycle, such as mounted, updated, destroyed. T his of the hook points to the Vue instance that called it. S ome users may ask Vue if .js "controller" concept? T he answer is, no. The custom logic of the components can be distributed across these hooks.

Life cycle illustration

The following illustration illustrates the life cycle of an instance. You don't need to figure everything out right now, but it will help later.