Tips for using computed and watch to implement data calculation and monitoring in Vue

Vue.js is a popular JavaScript front-end framework that provides rich data binding and responsive features, allowing us to easily manage the state of web applications. Among them, computed and watch are two important data processing and monitoring tools in Vue.js. This article will introduce how to use them to implement data calculation and monitoring techniques.

1. computed

Computed property is a property that depends on the value of other properties. That is to say, when the value of other properties changes, the computed property will be automatically recalculated. The computed computed property has two main functions:

• It is used to calculate new data, such as displaying the total number of list items or sorting list data.
• Process existing data, such as formatting date or amount, etc.

1.1 Calculate new data

We can define multiple calculated properties in the computed object of the Vue instance. The result returned by a computed property can be used directly in the template, and it will only be recalculated when the dependent property changes. Here is an example:

<template>
  <div>
    <p>商品数量: {{ products.length }}</p>
    <ol>
      <li v-for="(product, index) in sortedProducts" :key="index">
        {{ product.name }} - ${{ product.price }}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: "iPhone 12", price: 799 },
        { name: "MacBook Air", price: 999 },
        { name: "iPad Pro", price: 699 },
        { name: "AirPods Pro", price: 249 },
      ]
    }
  },
  computed: {
    sortedProducts: function() {
      return this.products.sort((a, b) => a.price - b.price);
    }
  }
}
</script>

In the above example, we sort the product list by calculating attributes. The sortedProducts calculated property sorts the prices of products in ascending order, and then returns the sorted results to the v-for directive in the template for rendering.

It should be noted that a calculated property will only be recalculated when the properties it depends on change. So, even if we use this.products in the sortedProducts computed property, sortedProducts will not be recalculated as long as products have not changed.

1.2 Process existing data

Computed properties can not only be used to calculate new data, but also can be used to process existing data, such as formatting dates or amounts, etc. The following is an example:

<template>
  <div>
    <p>订单时间: {{ formattedTime }}</p>
    <button @click="updateTime">更新时间</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderTime: new Date()
    }
  },
  computed: {
    formattedTime: function() {
      return this.orderTime.toLocaleString();
    }
  },
  methods: {
    updateTime: function() {
      this.orderTime = new Date();
    }
  }
}
</script>

In the above example, we format the order time into a local date and time string (toLocaleString) by calculating attributes, and display the formatted result in the template middle. Due to the nature of computed properties, formattedTime will only be recalculated when orderTime changes.

2. watch

watch is a function that deeply monitors unified data sources. Unlike computed, when the data source monitored by watch changes, the template will not be automatically re-rendered, but the operation needs to be performed manually. watch is mainly used to monitor changes in data to trigger corresponding operations. The following is an example:

<template>
  <div>
    <p>剩余字符数: {{ charsLeft }}</p>
    <textarea v-model="text" @keyup="updateChars"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    }
  },
  watch: {
    text: function(val) {
      if (val.length > 10) {
        alert("输入字符数不能超过10个!");
      }
    }
  },
  computed: {
    charsLeft: function() {
      return 10 - this.text.length;
    }
  },
  methods: {
    updateChars: function() {
      this.charsLeft = 10 - this.text.length;
    }
  }
}
</script>

In the above example, we use watch to monitor the text variable in the input box. When the text length exceeds 10 characters, watch will trigger the corresponding operation and pop up a warning box to prevent the user from continuing to input. At the same time, we count the number of remaining characters through the computed calculated attribute. We can see that the calculated attribute charsLeft will only be recalculated when text changes.

It should be noted that the variable monitored by watch is a function and will receive two parameters: new value and old value. We can perform corresponding operations based on these two parameters. watch also provides advanced options such as deep monitoring and immediate execution, which can be configured according to specific needs.

3. Conclusion

computed and watch are essential tools in Vue.js, which are very suitable for complex processing and monitoring of data. We can define multiple computed properties in computed and control the calculation order and update method through dependencies. In watch, we can deeply monitor the data source and respond to changes in the data source in real time. Although computed and watch have certain learning and usage costs, the increase in these costs will help you build more flexible and efficient Vue applications.

The above is the detailed content of Tips for using computed and watch to implement data calculation and monitoring in Vue. For more information, please follow other related articles on the PHP Chinese website!