vue监听数据：computed与watch

computed计算属性：
与methods的区别：
1.当作属性，调用时不写括号；
2.监听指定数据，当指定数据发生改变时，才会被触发


watch侦听属性：
对象名代表要监听的数据，
对象值为数据改变时要做的操作（处理函数），
监听的数据的最新值会以形参的方式传进这个函数，
仅监听的数据更新时才触发操作

与computed的区别：
1.没有返回值
2.可以写异步代码
3.一个侦听属性只监听一个数据

computed与methods的区别：
每次触发重新渲染时，methods里所有的方法均会被执行一遍；
computed里的属性只在监听的数据发生改变时才会执行对应的操作

<div id="app">
	<!--操作变量count-->
    <button v-on:click="increase()">count+1</button>
    <button v-on:click="de()">count-1</button>
    <p>{
  {count}}</p>
    <p>{
  {result()}}</p>
    <p>{
  {output}}</p>
    
    <!--操作变量count2-->
    <button v-on:click="count2++">count2+1</button>
    <p>{
  {count2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
    
        el: "#app",
        data:{
    
            count:0,
            count2:0
        },
        computed:{
    
            output : function(){
    
                console.log("output");
                return this.count>5 ? "大于5":"小于5"
            }
        }, // 计算属性
        methods:{
    
            increase: function(){
    
                this.count++;
            },
            de:function(){
    
                this.count--;
            },
            result: function(){
    
                console.log("result")
                return this.count>5 ? "大于5":"小于5"
            }
        }
    })
</script>

当点击第一行的两个按钮时，操作count的加减，result()和output均对count做是否大于5的判断，result()为函数，output为计算属性

第三个按钮是操作count2的，点击此按钮时，count2累加，下方数值发生改变，result()与count2无关，但也被执行，输出"result"，而output则不做反应
（如果没有显示count2的数值，即页面没有改变，只有点击"count2+1"按钮的操作，页面没有触发重新渲染，methods里的方法也不会被触发）