Vue instance and life cycle

The simplest instance of Vue

// HTML<div id= "app" >  {{message}}</div>//JavaScriptvar  New  Vue ({  ' #app ',  data: {    ' Hello vue! '   }})

Since Vue draws on the idea of MVVM, the string "Hello vue!" is equivalent to the Model,dom equivalent to the View,vue instance "VM", which is the ViewModel that connects Mode and View, so we're able to drive through the data View without needing to care how it is implemented, because Vue has helped us do everything.

The properties and methods built into the Vue instance begin with "$", for example: VMs. $data, VMS, $el, and so on, the option is not equal to the instance, the option is the parameter object passed in when the new Vue () constructor is passed, but the instance can access the value of some options from the exposed interface. For example: Console.log (VM. $data. Message) output "Hello vue!".

Life cycle of an instance

In the process of creating an instance, Vue provides some lifecycle hook functions that allow us to perform some additional operations at a particular stage:

Beforecreate:

After the instance is initialized, the function is called before the data is bound, for example:

// JavaScript var New Vue ({  ' #app ',  data: {    ' Hello vue! '   },   function () {    Console.log (this. message);  // Undefind   }})

There are two points to note: 1, here the "this" point to the Vue instance, namely "VM", 2, the Vue instance also proxies all the properties under "data" in the option, that is, vm.message = = vm. $data. Message = "Hello vue!" , but because at this stage the data is not bound to the Vun instance, the output is "Undefind". Before this data is saved in the VM. $options, if you want to get data at this stage, you can first go through the VM. $options the. Data () method, which returns the "Data" object through the VM. $options. Data (). Message returns the corresponding value.

At this stage, you can do some work that does not require data, such as turning on the global loading effect.

Created

After the instance is created, the function is called after data binding, and Console.log (this.message) outputs the correct value "Hello vue!".

At this stage, the data is initialized to the default value in the option, but the real data is also obtained through AJAX from the backend database, so this phase can be sent back to the request to get the data, and then bind to the corresponding property.

After that, there is no "El" attribute in the Judgment option (as the mount target of the Vue instance, where the ID is the app's div tag), and if not, you need to call the VM manually. $mount (EL) method specifies the target to be mounted;

Then determine whether there is a "template" attribute in the option, if not, use the mount target specified by the "El" attribute directly, and if so, replace the mount target with the string template specified by the "template" attribute, and all content in the Mount Target will be ignored;

Beforemount:

Called before the instance is mounted.

You can remove the global loading effect at this stage.

Mounted:

Called after the instance is mounted.

At this stage the page has been loaded and the DOM can be manipulated.

BeforeUpdate:

Called when the data is updated.

At this stage, you can access the existing DOM before the data is updated.

Updated

Called after the data is updated.

At this stage, the updated DOM can be manipulated.