Of Stack

Summary of differences between watch computed and methods on Vue

  • 2021-12-04 18:03:17
  • OfStack
Directory 1 Preface 2 Basic Usage 2.1 methods Method 2.2 computed Computation Attributes 2.3 watch Listener 3 Differences between 3 people 3.1 Method VS Computation Attributes
3.2 Evaluate Attributes VS Listener

1 Preface

You can pass in 1 option object when you create 1 Vue instance 


const vm = new Vue({
  data: {
    msg: 'hello'
  } , 
  computed: {},
  methods: {},
  watch: {}
})

This option object can specify a large number of options (or properties), including but not limited to data-related options data , methods , computed, watch Wait

Among them methods , computed , watch All can process or respond to data through functions. These three are different, but they are easy to be confused

2 Basic usage

Use script Introduce vue.js 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 method

methods Option is called a method, and the function defined in the Vue In the process of instantiation, methods Object is blended into the Vue instance and becomes the method of the Vue instance. You can go directly through Vue Instance accesses these methods 


<body>
  <div id="example">
    <!--  Show: 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); //  Object of the console output vm You can see that it has 1 The methods are: plus: ƒ () , ⚠️ Note is the method 
  console.log(vm.plus()); //  Direct through vm Instance access method, output: 1
</script>

Need to call actively methods The function in can be executed, a Does not change the value of the <p>a:{{plus()}}</a> Follow the update

2.2 computed Calculation Attributes

computed Option is called a calculated property, which is defined in the Vue In the process of instantiation, computed Object is blended into the Vue instance and becomes the same name attribute of the Vue instance. 


<body>
  <div id="example">
    <!--  Show: 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); // //  Object of the console output vm You can see that it has 1 The attributes are: plus:1 , ⚠️ Note that it is attributes 
</script>

At first glance, it looks like computed And methods Function 1, it is true that in this example, the two show the same effect

In fact, by printing the vm instance and accessing it, one difference between the two has been reflected:

methods The function in will become vm Method of And computed After calculation, the function in will become vm Property with the same name, and the property value is the evaluation result of the function, that is, the return value

In addition, unlike the method, the computed attribute can be updated responsively with the change of the data it depends on, that is, when a changes, plus Property is also updated

2.3 watch listener

watch The key-value pair in the option is called listener or listener property/listener property, 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.)

In Vue During instantiation, the variables that need to be listened to are recorded, and when these variables change, the corresponding callback function will be executed 


<body>
  <div id="example">
    <!--  Show: a:1 -->
    <p>a:{{ a }}</p>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      a: 0,
    },
    watch: {
      a: function () {
        console.log("a A change has taken place "); //  Because a The value of changes, and the callback function executes 
        console.log(this.a);
      },
    },
  });
  vm.a = 1; //  Change it directly and manually here a Value of 
</script>

The difference between 3 and 3

3.1 Method VS Computation Attributes

In addition to the two differences already mentioned in 2.2, the most important differences are:

Calculated attributes are cached based on their responsive dependencies, as described above a When changes occur, the evaluation function will be retriggered, otherwise multiple calls will evaluate from the cache, which is very useful for expensive calculations and can avoid repeated calculations Method is always re-executed when it is called

The following is a summary of the differences between the two in the form of a table:

methods computed
Vue实例化后成为vm实例的什么 成为vm实例上的方法 成为vm实例上的属性
能否根据依赖的数据进行响应式更新 不能，需要主动调用方法 能
能否缓存 不能，每次调用重新执行 能，依赖的数据不变，会从缓存中取值

3.2 Evaluate Attribute VS Listener

First of all, the most obvious difference is that listeners are named in a fixed way, and they have the same name as whoever they want to listen to. Methods and computed properties can be named arbitrarily Secondly, the listener cannot actively access, while the other two can actively access Use scenarios for calculating properties and listeners:

If a value needs to be calculated from one or more data, the calculation property is used

Listening attribute is mainly to listen to the change of a certain value, and then carry out the required logical processing; In addition, listening properties are useful when you need to perform asynchronous or expensive operations when data changes. For specific examples, see vue document-listeners

Related articles: