SoFunction
Updated on 2025-04-12

The difference between watch (monitoring attribute) and computed (computed attribute) and implementation cases

Preface

watch and computed are two important properties in vue instance objects. watch is a monitoring property, used to monitor the changes in properties and methods on vue instance objects. Computed is called a computed property, which can calculate the properties in the data object to obtain new properties. Since the watch property monitors the changes in attributes in the data object, it can also get the properties in the data object for calculation. Therefore, there is a question that since both can implement the same function, what is the difference between the two? The following will use this question as a breakthrough point and combine examples to describe the differences between the two;

Watch implementation case

  <!-- Get a container ready-->
    <div >
      surname：<input type="text" v-model="firstName" /> <br /><br />
      name：<input type="text" v-model="lastName" /> <br /><br />
      全name：<span>{{fullName}}</span> <br /><br />
    </div>
  </body>
  <script type="text/javascript">
     = false //Block vue from generating production prompts at startup.    const vm = new Vue({
      el: '#root',
      data: {
        firstName: 'open',
        lastName: 'three',
        fullName: 'Zhang-San',
      },
      watch: {
        firstName(val) {
          setTimeout(() => {
             = val + '-' + 
          }, 1000)
        },
        lastName(val) {
          setTimeout(() => {
             =  + '-' + val
          }, 1000)
        },
      },
    })
  </script>

The above is the change of fullName by monitoring the firstName and lastName in data.

computed implementation case

<body>
    <!-- Get a container ready-->
    <div >
      surname：<input type="text" v-model="firstName" /> <br /><br />
      name：<input type="text" v-model="lastName" /> <br /><br />
      全name：<span>{{fullName}}</span> <br /><br />
    </div>
  </body>
  <script type="text/javascript">
     = false //Block vue from generating production prompts at startup.    const vm = new Vue({
      el: '#root',
      data: {
        firstName: 'open',
        lastName: 'three',
      },
      computed: {
        fullName() {
          return  + '-' + 
        },
      },
    })

The above is to realize the connection between fullName and firstName and lastName through computed calculation properties;

contrast

Through comparison, we can see that both watch and computed can achieve the same functions, but first of all, the case of computed computing attribute implementation is obviously less coded and simpler; however, watch can change the fullName change to asynchronous; therefore, the following summary is made to watch and computed attributes:
1. The functions that can be completed by computed can also be completed by watch
2. The functions that can be completed by watch may not be completed, for example, watch can perform asynchronous operations;
📣 Note:
1. The functions managed by Vue are best written as ordinary functions, so that this pointing is vm or component instance objects.
2. All functions that are not managed by Vue (timer callback functions, ajax callback functions, etc., Promise callback functions) should be written as arrow functions, so that this pointing is vm or component instance objects.

This is the end of this article about the difference between watch (monitoring attribute) and computed (computed attribute). For more information about the difference between watch (monitoring attribute) and computed (computed attribute), please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!