助你快速简单了解computed和methods区别

先瞅一眼代码吧

一个简单的小demo，划水之余写的，可能有点粗心，有不对的地方请指正

<template>
<div id="app">

    <div> {{ aaa }} </div>        <!-- 3 -->
    <div> {{ bbb() }} </div>        <!-- 3 -->

</div>
</template>


       new Vue({
		  el: '#app',
		  data: {
			a:1,
			b:2,
		  },
		  computed: {
			aaa: function () {
			  return this.a + this.b
			}
		  },
		  methods:{
			  bbb: function () {
				  return this.a + this.b
			  }
		  }
		})

 aaa() 和 bbb() 都是为了计算 a+b 的结果是多少，得出来的值也是一样的，那他们的区别在哪呢？

computed     计算属性是基于他们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。  // 官网原话，

简单来说，就是a 和 b，只有data中的 a和b发生了变化，他的响应式依赖发生了变化， aaa函数才会再次执行。如果数据a  b没有发生改变，多次访问aaa 会立即返回之前的计算结果，而不需要在执行一次函数。

aaa是计算属性，计算属性调用的时候可以不用带括号  {{ aaa }}

methods    方法，每当触发重新渲染时，bbb() 将总会再次执行，

bbb是方法，必须带括号  {{ bbb() }}