The usage and differences between computed and watch in Vue

How vue computed is implemented

Vue'scomputedThe attribute implements a responsive computed property. When the responsive variable on which the computed attribute depends changes, the computed attribute will automatically recalculate its value.

Vue is used internally()Method to implementcomputedproperty. Specifically, Vue creates a new computed attribute descriptor object that containsgetandsetMethod, then call()Method binds computed properties to Vue instance.

existgetIn the method, Vue will collect the responsive variables that the computed attribute depends on and establish a dependency graph. In this way, when the responsive variable changes, Vue can know which computed properties need to be recalculated.

existsetIn the method, Vue can perform some additional logic, such as checking whether the computed properties can be set. But usually,setMethods are not required because the computed properties are read-only.

Anyway, Vue'scomputedAttributes utilize attribute descriptors and responsive principles in JavaScript to implement a convenient, efficient and easy-to-use computing attribute system.

computed demo

Here is a simple implementation example of Vue Computed:

// Create a Vue instanceconst vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe',
  },
  computed: {
    fullName: function () {
      return  + ' ' + ;
    },
  },
});
// Access the computed properties(); // "John Doe"

In the above example, the Vue instancevmDefine adataObject and onecomputedObject. existcomputedIn the object, we define afullNamefunction, it returnsfirstNameandlastNameCombination of attributes.

When we visitVue will be called automatically whenfullNamefunction and cache its results. If subsequent visits,andfirstNameorlastNameNo changes occur, Vue will return the previously cached results directly without recalculating.

This is how Vue Computed works. By defining a compute property, you can easily implement the calculation and cache of data. This not only improves performance, but also makes the code more concise and easy to read.

How is vue's watch implemented

ofwatchIt is through use()Function implementation. When you define a Vue instancewatchWhen Vue adds it as a property to the instance object and uses()Convert this property to the getter/setter form. In this way, when the monitored property changes, Vue will call the corresponding callback function to perform the corresponding operation. At the same time, Vue also provides deep listening and immediate callback triggering, etc.

watch demo

Here is a simple Vue example that demonstrates how to use itwatchTo observe the changes in the data:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      increment() {
        ++;
      },
    },
    watch: {
      count(newVal, oldVal) {
        (`count changed from ${oldVal} to ${newVal}`);
      },
    },
  };
</script>

This example defines a namecountresponsive data and display it in the template. Also definedincrementMethod, increment the counter when the button is clicked. In addition, awatchOption to print a message when the data changes.

When you run the example in your browser, Vue detects each time you click the "Increment" buttoncountThe value ofwatchFunctions defined in the options. The function output will be similar to the following:

count changed from 0 to 1
count changed from 1 to 2
count changed from 2 to 3
...

This is the end of this article about the usage and differences between computed and watch in Vue. For more related contents of Vue computed and watch, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!