Shulou(Shulou.com)05/31 Report--

This article mainly explains "what is the use of created method in vue.js". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what is the use of created method in vue.js"?

Instance life cycle

Each Vue instance goes through a series of initialization processes before it is created. For example, the instance needs to configure data observation (data observer), compile the template, mount the instance to DOM, and then update the DOM when the data changes. In the process, the instance also calls some lifecycle hooks, which gives us the opportunity to execute 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 vm instance console.log ('an is:'+ this.a)}}) / /-> "an is: 1"

There are also other hooks that are called at different stages of the instance life cycle, such as mounted, updated, destroyed. The this of the hook points to the Vue instance that called it. Some users may ask Vue.js if there is a concept of "controller"? The answer is no. The custom logic of the component can be distributed among 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 later.

Add:

The difference between mounted and created in Vue Lifecycle

What is the life cycle?

In popular language, it is a series of processes from the creation to the elimination of instances or components in Vue. Although not very rigorous, it is basically understandable.

Through a series of practices, now sort out all the problems encountered, and record the difference between created and mounted today:

Second, the difference between created and mounted?

The official illustration is as follows:

Let's look at two nodes in the figure:

Created: called before the template is rendered to html, that is, some property values are usually initialized and then rendered into a view.

Mounted: called after the template is rendered to html, usually after the initialization page is completed, and then perform some necessary operations on the dom node of the html.

In fact, the two are easy to understand. Created is usually used many times, while mounted is usually operated in the use of some plug-ins or components, such as the use of plug-in chart.js: var ctx = document.getElementById (ID) There is usually this step, but if you write to the component, you will find that you cannot initialize chart in created. You must wait for the html to be rendered, so mounted is the best choice. Let's look at an example (using components).

III. Examples

Vue.component ("demo1", {data:function () {return {name: ", age:", city: ""}, template: "{{name}} {{age}} {{city}}" Created:function () {this.name= "Tang Haoyi" this.age = "12" this.city = "Hangzhou" var x = document.getElementById ("name") / / the first command desk error console.log (x [XSS _ clean]) }, mounted:function () {var x = document.getElementById ("name") / / the result output from the second command station console.log (x [XSS _ clean]);}}); var vm = new Vue ({el: "# example1"})

You can see that the output is as follows:

You can see that all are rendered successfully with the initial value given by created.

But at the same time, watch console as follows:

You can see that the first error was reported because the id,getElementById (ID) was not found and the element was not found for the following reasons:

In created, the html in the view is not rendered, so if you directly manipulate the dom node of html, you will not be able to find the relevant elements

In mounted, since the html has been rendered at this time, you can directly manipulate the dom node, so the result "Tang Haoyi" is output.

At this point, I believe you have a deeper understanding of "what is the use of the created method in vue.js?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.