vue computed缓存问题

Question

我看官方文档上说：computed和methods的区别是，computed会基于它们的依赖进行缓存，如果数据没法改变则computed刷新时不会重新执行，而methods则会每次执行。but我写的例子并不是这样(写的是官方的例子)。html：<div id="app">    <div>{{methodsNow()}}</div>    <div>{{computedNow}}</div></div>javascript：new Vue({    el:'#app',    data:{    },    methods:{        methodsNow:function(){            return new Date().toLocaleString();        }    },    computed:{        computedNow:function(){            return new Date().toLocaleString();        }    }});大家来探讨一下，我是不是哪里写错了？

Answer 1

new Date()不是该vm的响应式数据，通俗点就是没有被记录依赖

Answer 2

你的例子对于描述二者不同这点上，没有帮助。给你看这个例子：JSFiddle

<div id="app">

  <!-- 每次点击时，显示的时间都不同 -->

  <button @click="showMethod">methodsNow</button>

  <!-- 每次点击时，显示的时间都相同 -->

  <button @click="showComputed">computedNow</button>

</div>

new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue.js!'

  },

  methods:{

    methodsNow: function(){

      return new Date().toLocaleString();

    },

    showMethod: function() {

         alert(this.methodsNow());

    },

    showComputed: function() {

         alert(this.computedNow);

    }

  },

  computed:{

    computedNow: function(){

      return new Date().toLocaleString();

    }

  }

})