What is uniapp computed

What is uniapp computed

In uniapp, we often need to format, calculate, filter and other operations on the data in the data. In order to facilitate the use and management of developers, uniapp provides computed (calculated attribute) this characteristic.

Computed is a method of calculating new attribute values ​​from existing attributes in data. It uses functions to calculate some attributes and dynamically returns the calculation results. computed can cache calculation results, improve performance and make them more readable.

Computed usage scenarios

We can usually use computed to format some data that needs to be calculated or filter it according to certain rules. For example, we have a product list page, and our raw data is obtained from the backend, which contains the price and quantity of each product. We need to display the total volume of currently available products on the page, then we can handle it through computed.

In this example, we need to calculate the new attribute value based on the data in data, which is the total volume of the products available for sale. We can define a calculated attribute computed:

computed: {
    totalVolume: function() {
        let total = 0;
        for (let i = 0; i < this.products.length; i++) {
            if (this.products[i].isOnSale) {
                total += this.products[i].price * this.products[i].quantity;
            }
        }
        return total;
    }
}

In this calculated attribute, we use a for loop to traverse all the products in the data. If the product is available for sale, then we get the price and quantity calculates the total volume occupied by the product, and finally adds up the total accumulation of all sellable products to get the total volume. This calculation is completed through a function, and the final result will be displayed on the page.

Computed caching mechanism

When the attribute value that computed depends on changes, the calculated attribute will be recalculated. When the attribute value that computed depends on has not changed, the calculation result in the cache will be returned. This can improve calculation efficiency and avoid repeated calculations.

Notes on computed

1. Computed properties must have a return value, which will dynamically change as the data in data changes.
2. Computed properties can use the data in data, but they cannot directly modify the data in data, but by changing the values ​​of the properties they depend on.
3. Computed properties can be bound in the template, but only when the value of the dependent property changes, the update will be triggered and the data in the page will be updated.
4. Computed properties are cached based on its dependencies. It will only be recalculated when one of its dependencies changes. If you try to access a dependency on a computed property and its value has not changed, the value will be returned from the cache rather than recalculated.

This article introduces the computed computing attribute in uniapp, which can easily process the data in data, improve our development efficiency and code maintainability, and the caching mechanism can also improve computing efficiency. . For uniapp developers, computed is a very useful feature that needs to be used wisely.

The above is the detailed content of What is uniapp computed. For more information, please follow other related articles on the PHP Chinese website!