1 Preface
When you create a Vue instance, you can pass in an option object
const vm = new Vue({
data: {
msg: 'hello'
}，
computed: {},
methods: {},
watch: {}
})This option object can specify many options (or attributes). Data related options include but are not limited to data, methods, computed, watch, etc
Among them, methods, computed and watch can process or respond to data through functions, which are different, but they are easy to be confused
2 basic usage
Use script to introduce vue.js, and the following code runs in the following html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Methods</title>
<!-- introduce vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
</body>
<script>
</script>
</html>
2.1 methods
The functions defined in the methods option are called methods. During Vue instantiation, the methods in the methods object will be mixed into the Vue instance and become the methods of the Vue instance. These methods can be accessed directly through Vue instances
<body>
<div id="example">
<!-- Display: a:1 -->
<p>a:{{ plus() }}</p>
</div>
</body>
<script>
const vm = new Vue({
el: "#example",
data: {
a: 0,
},
methods: {
plus: function () {
return this.a + 1;
},
},
});
console.log(vm); // Look at the vm output from the console. You can see that there is a method: plus: ƒ (), ⚠️ Attention is the method
console.log(vm.plus()); // Access the method directly through the vm instance, output: 1
</script>You need to actively call the function in methods to execute. The change of the value of a does not update < p > A: {{plus()} < / a > in the page
2.2 computed attribute
The functions defined in the calculated option are called calculation properties. During Vue instantiation, the calculation properties in the calculated object will be mixed into the Vue instance and become the properties with the same name of the Vue instance.
<body>
<div id="example">
<!-- Display: a:1 -->
<p>a:{{ plus }}</p>
</div>
</body>
<script>
const vm = new Vue({
el: "#example",
data: {
a: 0,
},
computed: {
plus: function () {
return this.a + 1;
},
},
});
console.log(vm); // //Look at the vm output from the console. You can see that it has a property: plus:1, ⚠️ Note that this is an attribute
</script>At first glance, it seems that the functions of calculated and methods are the same. Indeed, in this example, they show the same effect
In fact, one difference between the two has been reflected by printing vm instances and access methods:
- The functions in methods become vm methods
- After calculation, the function in calculated will become an attribute with the same name of vm, and the attribute value is the calculation result of the function, that is, the return value
In addition, different from the method, the calculation attribute can be updated in response to the change of the data it depends on, that is, when a changes, the plus attribute will also be updated
2.3 watch listener
The key values in the watch option are symmetrical as listeners or listening properties / listening properties. The key is the expression to be observed, and the value is the corresponding callback function (the value can also be in other forms, which will not be expanded here)
During Vue instantiation, these variables to listen on will be recorded. When these variables change, the corresponding callback function will be executed
<body>
<div id="example">
<!-- Display: a:1 -->
<p>a:{{ a }}</p>
</div>
</body>
<script>
const vm = new Vue({
el: "#example",
data: {
a: 0,
},
watch: {
a: function () {
console.log("a Has changed"); // Because the value of a changes, the callback function executes
console.log(this.a);
},
},
});
vm.a = 1; // Here, change the value of a directly and manually
</script>3 the difference between the three
3.1 method VS calculation attribute
In addition to the two differences mentioned in 2.2, the most important differences are:
Computed properties are cached based on their responsive dependencies
That is, the evaluation function will be triggered again when the a in the above changes, otherwise multiple calls will be evaluated from the cache
This is very useful for expensive calculations and can avoid repeated calculations
- Method is always re executed when called
The differences between the two are summarized in the form of tables below:
| methods | computed | |
|---|---|---|
| What will Vue become a vm instance after instantiation | Become a method on a vm instance | Become an attribute on the vm instance |
| Can I make responsive updates based on dependent data | No, you need to actively call the method | can |
| Can I cache | No, re execute each call | Yes, the dependent data remains unchanged and will be fetched from the cache |
3.2 compute properties VS listeners
- First of all, the most obvious difference is that the listener's naming method is fixed. Whoever wants to listen, it has the same name as whoever. Methods and calculation properties can be named arbitrarily
- Second, the listener cannot actively access, while the other two can actively access
Usage scenarios for calculating properties and listeners:
If a value needs to be calculated from one or more data, the calculation attribute is used
Listening attribute is mainly used to listen for the change of a value, and then carry out the required logical processing; In addition, listening properties are useful when asynchronous or expensive operations need to be performed when data changes. See specific examples vue document - listener
Official account [front end]