Describes how to use the instance TodoList and computedtodolist for Vue computed (computing attribute ).

Describes how to use the instance TodoList and computedtodolist for Vue computed (computing attribute ).

Vue has been around for a while recently, which is a bit confusing.methodsAndcomputedThe difference between these two attributes, so I tried to write the TodoList demo (good soil escape ~);

1. methods

Methods is similar to the react component method. The difference is that vue uses html binding events.

Example

/* Html */<input type = "button" value = "click" v-on: click = 'handlclick' id = "app">

 /*js*/ var app = new Vue({    el:'#app',    methods:{      handlClick:function(){        alert('succeed!');      },    }  })

Bind the handlClick event by using the vue command v-on in the input tag, while the handlClick event is written in the methods attribute.

2. computed

/*html*/<div id="app2">{{even}}</div>

/* Js */var app2 = new Vue ({el: '# app2', data: {message: [1, 2, 3, 4, 5, 6]}, computed: {even: function () {// filter even return this. message. filter (function (item) {return item % 2 = 0 ;});},},});

We can see that the even numbers in the message are filtered out. Now we can print the message in the console.

We can see that the message has not changed, but it is still the original message. Then try to modify the message in the console,

After modification, I did not manually trigger any function, and the display on the left is changed to an even number of new arrays.

3. Differences

Methods is an interactive method that usually writes user interaction actions in methods. computed is a data conversion ing between modules in mvc and views when data changes.

To put it simply, methods needs to be manually triggered, while computed is automatically triggered when data changes are detected. Another point is the difference in performance consumption, which is a good explanation.

First, methods is the method. After method calculation, the garbage collection mechanism recycles the variables, so the variable will be de-evaluated again next time when an even number is to be filtered. Computed depends on data. Just like a closure, the memory occupied by data is not reclaimed by garbage collection. Therefore, you can filter even sets again, instead of re-calculation, the last calculated value is returned. The re-calculation is performed only when the data in the data changes. In short, methods is a one-time computing without caching, and computed is a cache computing.

4. Example of TodoList

After reading the todo example on the official Vue website, it seems that there is no filtering function, so I wrote an example of the filtering function. In the code below, @ click refers to the abbreviation of v-on = 'click', which means v-bind: 'class' =.

<! Doctype html> 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.