The constructor and life cycle that must be learned every day.

Constructor

Each Vue.js application starts by creating a root instance of Vue through the constructor Vue:

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

A Vue instance is actually the ViewModel described in MVVM mode - so the variable name vm is often used in documents.

When instantiating Vue, you need to pass in an option object, which can contain options such as data, templates, mount elements, methods, life cycle hooks, etc. All options can be viewed in the API documentation.

The Vue constructor can be extended to create reusable component constructors with predefined options:

 var MyComponent = Vue.extend({ // Extension Options})// All `MyComponent` instances will be created with predefined extension options var myComponentInstance = new MyComponent()

Although extension instances can be created imperatively, in most cases the component constructor is registered as a custom element and then used declaratively in the template. We will explain the component system in detail later. Now you just need to know that all Vue.js components are actually extended Vue instances.

Properties and methods

Each Vue instance will proxy all properties in its data object:

 var data = { a: 1 }var vm = new Vue({ data: data})vm.a === data.a // -> true// Setting properties will also affect the original data vm.a = 2data.a // -> 2// ... vice versa data.a = 3vm.a // -> 3

Note that only these proxy attributes are responsive. If a new property is added to the instance after the instance is created, it does not trigger a view update. We will discuss the response system in detail later.

In addition to these data attributes, Vue instances expose some useful instance attributes and methods. These properties and methods have prefix $ to distinguish from the proxy's data attributes. For example:

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

Refer to the API documentation to view all instance properties and methods.

Instance Lifecycle

A Vue instance has a series of initialization steps when it is created - for example, it requires establishing data observations, compiling templates, and creating the necessary data bindings. In the process, it will also call some lifecycle hooks, providing a run opportunity for the custom logic. For example, the created hook is called after the instance is 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"

There are also some other hooks called at different stages of the instance life cycle, such as compiled, ready, destroyed. This hook points to the Vue instance that calls it. Some users may ask if Vue.js has the concept of "controller"? The answer is, no. The custom logic of the component can be split into these hooks.

Life cycle diagram

The following figure illustrates the life cycle of the instance. You don't need to figure everything out right away, but it will help in the future.

This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.

The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.