javascript - vue computed缓存问题-PHP中文网问答

文章专题学习下载问答编程词典手游最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

javascript - vue computed缓存问题

三叔 2017-06-12 09:31:36

843

我看官方文档上说：

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

but我写的例子并不是这样(写的是官方的例子)。

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

大家来探讨一下，我是不是哪里写错了？

三叔

全部回复(2)

三叔2017-06-12 09:33:36 2 楼

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

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

点赞 +0

添加回复

扔个三星炸死你2017-06-12 09:33:36 1 楼

你这样测试下就明白了
html：


    
{{methodsNow()}}
    {{computedNow}}
    {{methodsNow()}}
    {{computedNow}}

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

结果你发现computedNow执行了一次，methodsNow执行了两次

点赞 +0

添加回复