Create a Vue instance

Each Vue application starts by creating a new Vue instance with the Vue function:

var vm = new Vue({
  / / options
})
Copy the code

While not entirely following the MVVM model, the design of Vue was inspired by it. Therefore, the variable name VM (short for ViewModel) is often used to represent Vue instances in documentation.

When creating a Vue instance, you can pass in an option object. This tutorial describes how to use these options to create the behavior you want. For reference, you can also browse the full list of options in the API documentation.

A Vue application consists of a root Vue instance created through New Vue, and an optional nested, reusable component tree. For example, a component tree for a Todo application might look like this:

├─ ├─ bass exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises TodoListStatisticsCopy the code

We will expand on this later in the component Systems section. For now, however, you just need to understand that all Vue components are Vue instances and accept the same option objects (with the exception of some options specific to the root instance).

Data and Methods

When a Vue instance is created, it adds all the attributes found in its data object to the Vue’s reactive system. When the values of these properties change, the view generates a “response,” that is, the match is updated to the new value.

// Our data object
var data = { a: 1 }

// The object is added to a Vue instance
var vm = new Vue({
  data: data
})

// They refer to the same object!
vm.a === data.a // => true

// Setting properties also affects raw data
vm.a = 2
data.a / / = > 2

/ /... And vice versa
data.a = 3
vm.a / / = > 3
Copy the code

When this data changes, the view is rerendered. Note that properties that exist in data are reactive only when the instance is created. That is, if you add a new attribute, such as:

vm.b = 'hi'
Copy the code

Changes to B will not trigger any view updates. If you know you’ll need an attribute later, but it’s empty or nonexistent at first, you just need to set some initial values. Such as:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}
Copy the code

The only exception here is the use of Object.freeze(), which prevents modification of existing attributes and means that the response system can no longer track the changes.

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data () {
    return {
      obj
    }
  }
})
Copy the code
<div id="app"> <p>{{ obj.foo }}</p> <! -- here 'obj.foo' will not be updated! --> <button @click="obj.foo = 'baz'">Change it</button> </div>Copy the code

In addition to data attributes, Vue instances expose some useful instance attributes and methods. They are prefixed with $to distinguish them from user-defined attributes. Such as:

var data = { a: 1 } var vm = new Vue({ el: '#example', data: $data === data // => true vm.$el === document.getelementById ('example') // => true // $watch is an instance method $watch('a', function (newValue, oldValue) {// This callback will be called after 'vm.a' changes})Copy the code

You can refer to the full list of instance properties and methods in the API Reference later.

Instance lifecycle hooks

Each Vue instance goes through a series of initialization procedures when it is created — for example, you need to set up data listeners, compile templates, mount the instance to the DOM, update the DOM when the data changes, and so on. Functions called lifecycle hooks are also run along the way, giving users the opportunity to add their own code at different stages.

For example, the Created hook can be used to execute code after an instance is created:

New Vue({data: {a: 1}, created: function () {// 'this' points to vm instance console.log('a is:' + this.a)}})Copy the code

Other hooks, such as Mounted, updated, and destroyed, are called at various points in the instance lifecycle. The this context of the lifecycle hook points to the Vue instance calling it.

Do not use arrow functions on option properties or callbacks, such as

Created: () => console.log(this.a) or vm.$watch(‘a’, newValue => this.myMethod()). Because the arrow function is bound to the parent context, this will not be the Vue instance you might expect, often resulting

Uncaught TypeError: Cannot read property of undefined or

Uncaught TypeError: This. MyMethod is not a function.

Life cycle diagram

The following figure shows the life cycle of the instance. You don’t have to understand everything immediately, but it will become more valuable as you learn and use it.