uni-app computed是什么意思

uniapp computed是什么

在uniapp中，我们经常需要对data中的数据进行格式化、计算、过滤等操作，为了方便开发者的使用和管理，uniapp提供了computed（计算属性）这一特性。

computed是一种从data中已有属性计算出新属性值的方法。它使用函数对一些属性进行计算，动态返回计算结果。computed可以缓存计算结果，提高性能并且可读性更好。

computed的使用场景

我们通常可以使用computed来对一些需要计算的数据进行格式化或者按照某些规则过滤。例如，我们有一个产品列表页面，我们的原始数据是从后端获取的，其中包含了每个产品的价格和数量。我们需要在页面上显示当前可售产品的总体积，那么我们可以通过computed来处理。

在这个例子中，我们需要根据data中的数据计算出新的属性值，也就是可售产品的总体积。我们可以定义一个计算属性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;
    }
}

在这个计算属性中，我们使用了for循环来遍历数据中的所有产品，如果产品是可售的，那么我们就从该产品的price和quantity计算出该产品占据的总体积，最后再将所有可售产品的总体积累加起来得到总体积。而这个计算是通过一个函数来完成的，最后的结果会在页面中进行显示。

computed的缓存机制

当computed所依赖的属性值发生改变时，计算属性才会重新计算。而当computed所依赖的属性值未发生改变时，则会返回缓存中的计算结果。这样可以提高计算效率，同时避免了重复计算。

computed的注意事项

1. 计算属性必须有一个返回值，它会动态地随着data中的数据变化而改变。
2. 计算属性可以使用data中的数据，但是不能直接修改data中的数据，而是通过改变其所依赖的属性的值。
3. 计算属性可以在模板中进行绑定，但是只有当所依赖的属性值发生改变时，才会触发更新并更新页面中的数据。
4. 计算属性是基于它的依赖缓存的。只有当它的某一个依赖发生改变才会重新计算。如果你试图访问计算属性的某个依赖，但其值却没有改变，则该值会从缓存中返回，而不是重新计算。

本文介绍了uniapp中的computed计算属性，它可以方便地对data中的数据进行处理，提高我们的开发效率和代码可维护性，同时缓存机制也可以提高计算效率。对于uniapp的开发人员来说，computed是一种非常有用的特性，需要合理使用。

这篇好文章是转载于：学新通技术网