vue中methods和computed的区别

先来一段代码：

<div id="app">
	<p>methods的值:{{f1()}}---computed的值:{{f2}}</p>
	<p>methods的值:{{f1()}}---computed的值:{{f2}}</p>
	<p>methods的值:{{f1()}}---computed的值:{{f2}}</p>
</div>
<script type="text/javascript">
	var i = 0;		//这里的i如果像n一样放到data里然后用methods里的f1函数自增会进入死循环
	var vm = new Vue({
		el:'#app',
		data:{
			n:0
		},
		methods:{
			f1:function () {
				i++;
				return i;
			}
		},
		computed:{
			f2:function () {
				this.n ++;
				return this.n
			}
		}
	})
</script>

结果

当我们只调用一次或每次调用依赖值都发生改变时可以使用 methods 来替代 computed，效果上两个都是一样的。

但我们多次调用，并且依赖值没有发生改变methods和computed就会带来不同的结果。

原因是：
methods：只要用一次，函数代码就执行一次，于是每次返回值都不一样。
computed：第一次会执行代码，得到一个值，这个值会作为f2的属性值，因为 vm 对象没有发生改变，于是界面渲染就直接用这个值，不再重复执行代码。只有相关依赖发生改变时才会重新取值。