Vue中methods和computed的区别

最新推荐文章于 2024-04-02 05:16:35 发布

BigFatStar

最新推荐文章于 2024-04-02 05:16:35 发布

阅读量339

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43843191/article/details/120288434

版权

1 篇文章 0 订阅

订阅专栏

提出问题

在使用vue时，经常会用到methods和computed这两个方法，两者都可以用在模板中，可以实现一近乎一样的效果。然后，他们也是有区别的，具体区别，下面来分析。

methods可以定义vue中的方法，使用方法如下：

方法的定义

methods() {
	//示例方法
    handleClick() {
      ...
    }
  }

方法的调用

//模板中
<button @click="handleClick"></button>
<div>{{customMethods()}}</div>
//其他方法或者声明周期函数中
created(){
	this.customMethods();
}

示例

computed(){
	//自定义属性
	prop1(){
		return this.prop++;	//组件中data中的属性
	}
}

computed中的属性是依赖于响应式缓存的，就是说，依赖于组件中data里的属性，computed中的属性依赖于组件中data中的属性，那么，只要data中的相应属性没有发生变化，那么计算属性就不会重复求值，而是会重复使用原来的值，如果不依赖于响应式属性,如：

computed(){
	prop2() {
		return Date.now();	//Date.now()并不是data中的属性
	}

假设我们有一个性能开销比较大的计算属性 list，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 list。如果没有缓存，我们将不可避免的多次执行 list 的 getter！如果你不希望有缓存，请用 method 来替代。

关注