Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of the life cycle in Vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The simplest instance of Vue

/ / html {{message}} / / javascriptvar vm = new Vue ({el:'# app', data: {message: 'Hello visitors'}})

Because Vue borrows the idea of MVVM, the string "Hello Vue!" Model,DOM is equivalent to View,Vue instance "vm" is the ViewModel that connects Mode and View, so we can drive the view through data without worrying about how it is implemented, because Vue has done everything for us.

The built-in properties and methods of the Vue instance all start with "$", such as vm.$data, vm.$el, etc., and the option is not equal to the instance. The option is the parameter object passed in through the new Vue () constructor, but the instance can access the values of some options from the exposed interface, for example: console.log (vm.$data.message) outputs "Hello Vue!".

The life cycle of the 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:

This function is called after the instance is initialized and before data binding, for example:

/ / javascriptvar vm = new Vue ({el:'# app', data: {message: 'Hello visitors'}, beforeCreate: function () {console.log (this.message); / / undefind}})

There are two points to be noted: 1. The "this" here points to the Vue instance, that is, "vm". 2. The Vue instance also proxies all the attributes under "data" in the option, that is, vm.message = = vm.$data.message = = "Hello Vue!", but because the data is not bound to the Vun instance at this stage, it outputs "undefind". Before that, the data will be saved in vm.$options. If you want to get the data at this stage, you can first return the "data" object through the vm.$options.data () method, and return the corresponding value through vm.$options.data (). Message.

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

Created:

This function is called after the instance is created and the data is bound, and console.log (this.message) outputs the correct value "Hello Vue!".

At this stage, the data has been initialized to the default value in the option, but the real data is also obtained from the backend database through ajax, so you can send a request to the backend to get the data and bind it to the corresponding attribute.

Then determine whether there is a "el" attribute in the option (as the mount target of the Vue instance, in this case, the div tag where id is app). If not, you need to manually call the vm.$mount (el) method to specify the mount target.

Then determine whether there is a "template" attribute in the option. If not, directly use the mount target specified by the "el" attribute. If so, replace the mount target with the string template specified by the "template" attribute, and all the contents in the mount target will be ignored.

BeforeMount:

Called before the instance is mounted.

The global loading effect can be removed at this stage.

Mounted:

Called after the instance is mounted.

At this stage, the page is loaded and you can manipulate the DOM.

BeforeUpdate:

Called when data is updated.

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

Updated:

Called after the data is updated.

The updated DOM can be manipulated at this stage.

This is the end of this article on "sample analysis of life cycle in Vue". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.