SOURCE

new Vue({
  el:"#app",
  data:{
    count:0,
    count2:0,
    output2:""
  }, 
  //计算属性
  computed:{
      output:function(){
        console.log("output")
        return this.count > 5 ? "大于五了" :"小于五了"
      }
    },
  watch:{
    //watch是一个对象，它里边的内容写成键值对的形式
    //watch会返回一个参数，这个参数就是实时更新的count，这里使用val来接收这个值
    //绑定的属性名（要监听的数据），属性值（） 
    //只要count改变就触发这个方法；并将改变后的count值传回来，我们需要写一个变量来接收
    count:function(val){
      console.log(val)
      this.output2=val > 5 ? "大于五":"小于五";
      var vm=this;
      window.setTimeout(function(){
        vm.count=0;
      },2000)
    }
  },
  methods:{
    result:function(){
      console.log("加油！")
      return this.count >5 ? "大于五哦":"小于五哦"
    },
    increase: function(){
      this.count++
    },
    decrease: function(){
      this.count--
    }
  }
})
// 注：计算属性与watch的一个主要区别是：
// watch可以实现异步（可以使用计时器）

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 
函数的特点：只要页面中的任何内容发生更改，都要重新渲染页面、执行一次函数（不论更改的内容是否与函数的执行相关）——造成性能的耗费。
计算属性：解决上述问题，只有计算属性中相关内容发生变更，才执行。
-->
<div id="app">
  <button v-on:click="increase">加一</button>
  <button v-on:click="decrease">减一</button>
  <button v-on:click="count2++">count2加一</button>
  <p>{{count}}</p> 
  <p>{{count2}}</p>
  <p>{{result()}}| {{output}} |{{output2}}</p>
  <!--
出现问题：
点击“加一”和“减一”按键count值会对应更改，并会调用result()方法，来显示count值是否大于五。
但是，若点击count2按钮时即使没有涉及到count，但是也需要调用result()。此种情况会大大耗费性能。
所以，使用计算属性来提升性能。
此时，不用写方法名，调用写法和指令名一致，直接写output而不是output()。
-->
<!--vue中提供的第二种监听数据的方法：watch-->
</div>

/*
总结：computed与watch的区别：
computed是同步操作，而watch可以是异步操作。
根据以上几讲课可知，使用较多的指令：
v-on:简写@
v-bind:简写:
*/