vue dikira isu caching - Limpahan Tindanan

Question

Saya membaca dokumen rasmi berkata:

computed和methods的区别是，computed会基于它们的依赖进行缓存，如果数据没法改变则computed刷新时不会重新执行，而methods akan dilaksanakan setiap kali.

Tetapi contoh yang saya tulis tidak seperti ini (contoh yang saya tulis adalah contoh rasmi).

html:

<p id="app">
    <p>{{methodsNow()}}</p>
    <p>{{computedNow}}</p>
</p>

javascript:

new Vue({
    el:'#app',
    data:{

    },
    methods:{
        methodsNow:function(){
            return new Date().toLocaleString();
        }
    },
    computed:{
        computedNow:function(){
            return new Date().toLocaleString();
        }
    }
});

Mari kita bincang, adakah saya menulis sesuatu yang salah di suatu tempat?

Answer 1

Contoh anda tidak membantu dalam menerangkan perbezaan antara keduanya. Tunjukkan kepada anda contoh ini: JSFiddle

<p id="app">
  <!-- 每次点击时，显示的时间都不同 -->
  <button @click="showMethod">methodsNow</button>

  <!-- 每次点击时，显示的时间都相同 -->
  <button @click="showComputed">computedNow</button>
</p>

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

Answer 2

Anda akan faham selepas mengujinya seperti ini
html:

<p id="app">
    <p>{{methodsNow()}}</p>
    <p>{{computedNow}}</p>
    <p>{{methodsNow()}}</p>
    <p>{{computedNow}}</p>
</p>

javascript:

new Vue({
    el:'#app',
    data () {
      return {
        mData: 1,
        cData: 2
      }
    },
    methods: {
      methodsNow: function () {
        console.log('methods')
        return this.mData
      }
    },
    computed: {
      computedNow: function () {
        console.log('computed')
        return this.cData
      }
    }
});

Akibatnya, anda mendapati bahawa computedNow dilaksanakan sekali dan methodNow dilaksanakan dua kali