VUE学习笔记(二) -computed与methods的区别

最近在学习VUE的时候，发现computed与methods的作用很像，而且一些网站上也说这两种可以互相替换使用，但实际上在用的时候，发现其实这两者之间还是有区别的。

computed 计算属性

可用于定义属性的setter和getter方法，一般如果不特意强调的话，申明出来的会被自动当做属性的getter方法调用，也就是说computed中虽然定义的时候，形式和方法很像，其实定义的是属性，可以采用属性的方法去使用，如果采用方法的方式去使用(加上括号)就会报错。

比如：

<div id="app">
	<p>{{message}}</p>
	<p>{{reversemessage}}</p>
</div>

var app = new Vue(
	{
		el:"#app",
		data:{message:"hello world!",
		},
		computed:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		}
	}
);

那如果我们在data中定义一个与reversemessage同名的属性呢，它的显示结果就是data中这个值的数据，就不会调用计算属性中定义的setter和getter方法了。

而methods是方法，他的调用方式遵循方法的调用方式，必须要带个括号才行，否则会报错。但同样能够达到与上述计算属性同样的效果。

<div id="app">
	<p>{{message}}</p>
	<p>{{reversemessage()}}</p>
</div>

var app = new Vue(
	{
		el:"#app",
		data:{message:"hello world!",
		},
		methods:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		}
	}
);

那如果我们同事定义一个同名计算属性和方法会怎样？

比如这样？你会发现这样引用会报错的，只有methods中的方法可用，计算属性就失去意义了。

<div id="app">
	<p>{{message}}</p>
	<p>{{reversemessage}}</p>
</div>

var app = new Vue(
	{
		el:"#app",
		data:{message:"hello world!",
		},
		computed:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		},
       methods:{
			reversemessage:function(){
				return this.message.split('').reverse().join('');
			}
		}
	}
);

他们除了引用方法上不同外，还有一个最大的区别：

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

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

计算属性比较适用于需要消耗很大性能，或者结果依赖于大量数据的数值，比如一个非常复杂的数值A需要经过非常复杂的计算流程和大量数据才能计算出来，我们不希望每次界面重新渲染时都计算一遍A的数值，就可以用计算属性来存储A，这样就可以避免每次被重新计算。

over~

VUE学习笔记(二) -computed与methods的区别

猜你喜欢