阐述Vue 中 computed 和 methods 的区别 ?

computedmethods 都是 Vue 中用于定义函数的选项,但它们的使用场景和行为有所不同:

  1. computed:计算属性是基于它们的依赖关系缓存的。一个计算属性只有在它的相关依赖发生改变时才会重新求值。这意味着只要依赖属性还没变,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。

    计算属性适用于:当依赖的值发生改变时,需要执行一些计算或处理返回新的值。

    例如,如果你有一个购物车组件,你可能想要计算购物车中的商品总价。你可以创建一个计算属性,它依赖于购物车中的商品价格和数量。当任何商品的价格或数量改变时,总价就会重新计算。

  2. methods:方法是一种常规的 JavaScript 函数,它们不会缓存结果。每次调用方法时,它都会执行一次。

    方法适用于:你不需要缓存结果,每次访问都需要执行函数的情况。

    例如,你可能有一个方法来格式化日期。每次调用这个方法时,你都希望它返回当前的格式化日期,即使日期没有改变。

总的来说,如果你需要一个属性值,它依赖于一些数据,并且你不希望在这些数据没有改变的情况下重复计算,那么应该使用计算属性。如果你需要执行一个函数,而不关心它是否有返回值或者是否需要缓存,那么应该使用方法。

发表评论

后才能评论