在学习vue的过程中，一直没搞懂computed和methods的区别，就根据官网做了个测试
测试1：
计算属性是基于它们的响应式依赖进行缓存的
<template> <div class="hello"> <p>页面初始化时的时间戳：{{ now }}</p> <button @click="showNow">显示computed属性获得的时间戳now</button> <p id="p1"></p> <button @click="showNow2">显示methods方法获得的时间戳now2</button> <p id="p2"></p> </div></template><script>export default { data () { return {} }, computed: { now: function () { return Date.now() } }, methods: { showNow: function () { document.getElementById('p1').innerText = this.now }, showNow2 () { document.getElementById('p2').innerText = this.getNow() }, getNow () { return Date.now() } }}</script>运行结果如下，频繁的调用methods里的showNow2方法时，下面的getNow方法会一直调用，时间戳一直在改变，而调用showNow方法时，获取computed的计算属性now时，显示结果和页面初始化的时候一样
因为now属性不依赖于data中的任何一个数据，所以频繁的调用computed中的now属性不会，返回的值不会改变。
相比之下，每当触发重新渲染时，调用methods中的方法将总会再次执行函数。
测试2：
methods:
打印结果：
当修改其中一个属性其他属性不变时，methods里面的方法都会重新调用一遍
computed：
打印结果：
修改其中一个值的时候，只有与那个值有关的方法才会被调用
结论：
- computed计算属性和methods方法得出的结果都是相同的
- 不同的是，计算属性是基于他们的响应式依赖进行缓存的，只有当响应式依赖改变时，才会重新进行计算，响应式依赖不改变时，调用now会立即返回之前的计算结果。
- 而methods方法则不同，每当触发重新渲染时，调用方法总会再次执行函数，并且是不只是触发与响应式依赖相关的方法。
- 所以，对于任何复杂逻辑，都应当使用计算属性。
