vue 计算属性computed与methods

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

 <div id="nav">
        <h1>{{msg}}</h1>
        <p class="test1">{{mTime()}}</p>
        <p class="test2-1">{{mTime()}}</p>
        <p class="test2-2">{{mTime()}}</p>
        <p class="test2-3">{{mTime()}}</p>
        <p class="test3-1">{{timeNow}}</p>
        <p class="test3-2">{{timeNow}}</p>
        <p @click="getCLick">点击我</p>
    </div>

var nav = new Vue({
      el:'#nav',
      data:{
        msg:'我是测试数据。。。'
      },
      computed: {
        timeNow(){
            console.log('%ctime。。。', 'color: green;')
            return this.msg+'computed'
        }
      },
      methods:{
        mTime(){
            console.log('%ctime。。。', 'color: red;')
            return this.msg+'methods'
        },
        getCLick(){
            this.msg='我变了'
            console.log('触发点击')
        }
      },
    });

 如图，methods会执行四次，而计算属性只执行一次。当点击改变msg的值时，同样的结果，methods执行四次，计算属性执行一次。