Vue中的methods属性和computed属性的区别

Vue 中的 methods 属性和 computed 属性都是用于组件中定义数据的属性。它们的区别在于,methods 属性用于定义一些计算属性,而 computed 属性则用于定义一些具有缓存特性的计算属性。

具体地说,methods 属性用于定义一些需要进行复杂计算的属性值,这些属性值不具备缓存特性,每次访问时都会重新计算。例如:

export default {data() {return {width: 100,height: 150}},methods: {getArea() {return this.width * this.height;}}
}

在此示例中,getArea() 方法用于计算组件的面积,其中 widthheight 属性的值可能会随时改变。每次调用 getArea() 方法时都会重新计算面积,因此它不具备缓存特性。

相比之下,computed 属性用于定义一些具有缓存特性的计算属性,这些属性值只有在其依赖的数据发生改变时才会重新计算,并且可以通过缓存机制来提高性能。例如:

export default {data() {return {width: 100,height: 150}},computed: {area() {return this.width * this.height;}}
}

在此示例中,area 属性被定义为一个计算属性,它依赖于 widthheight 属性的值。每次访问 area 属性时,只要 widthheight 的值没有改变,就会从缓存中返回上一次计算的结果,而不必重新计算。这可以提高性能并减少不必要的计算。还需要注意的是,对于具有缓存特性的计算属性,不能使用函数方式进行调用,而应该直接通过属性名来访问其值,例如:this.area

既然说直接用属性名来访问,那么有一个问题:computed属性中的函数能传参吗?

有办法实现:
 

export default {data() {return {width: 100,height: 150}},computed: {area() {return (factor) => this.width * this.height * factor;}}
}

 

在这个示例中,我们将 area 定义为一个函数,它接受一个 factor 参数,并返回计算结果。然后,在组件的模板中,可以使用 area(factor) 的方式来调用计算属性,并传递所需的参数值。例如:


这样,每次调用 area(2) 时,它会计算出基于当前的 widthheight 属性值的面积,并乘以传入的 factor 值,最终返回结果。需要注意的是,由于计算属性是具有缓存特性的,因此只有当 widthheight 的值发生改变时,才会重新计算该属性的值。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright www.122dh.com Rights Reserved.