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();    }  }})