SOURCE

new Vue({
  el:'#app',
  
  data:{
    count:0,
    count1:0
  },
//  计算属性
  computed:{
    output:function(){
       console.log('in');
      return this.count>5 ? '大于5' : '小于5';
    }
  },
        
  methods:{
    getCount:function(){
      console.log('in');
      return this.count>5 ? '大于5' : '小于5';
    },
    countIncrease:function(){
      this.count++;
    },
    countDe:function(){
      this.count--;
    }
  }
  
})

<!-- 引入：调用getCount()函数来输出的时候会发现，count1++的时候函数也会被调用，尽管这个函数跟count1没什么关系
     但是，很奇怪的是，如果不通过script引入Vue，而是在下边的Javascript栏中选择Vue时，除了Vue(edge)版本外，貌似都没有这个问题
-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <button @click='countIncrease'>count + 1</button>
  <button @click='countDe'>count - 1</button>
  <button @click='count1++'>count1 + 1</button>
  <p>count: {{ count }}</p>
  <p>count1: {{ count1 }}</p>
  <!-- <p>{{ getCount() }}</p> -->
  <!-- 通过使用计算属性可以避免这个问题，提高性能，计算属性的调用方法与data中的数据一样，不包括（） -->
  <p>{{ output }}</p> 
</div>