Watch和coomputed的区别

 

侦听器watch：当数据变化时才会执行。适用于一对多的场景，牵一发而动全身，监听关键因素的变化。

计算属性computed：用来做大量复杂的计算。适用于多对一的场景。会将计算结果缓存起来，方便下次使用。在下次使用时，如果原始数据没有发生变化，就从缓存中读取上次的计算结果直接返回，以此提升性能。

（函数：和普通js代码中的函数没有区别，相对计算属性来说，没有缓存，调用几次就执行几次，性能不如计算属性。）

代码演示：

  <div id="app">
        <input type="text" v-model="age">
        <p>{{msg}}</p>
        <span>还有{{year}}年</span>
    </div>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                age:20,
                total:100,
                msg:''
            },
            computed:{
                //计算属性   是对数据的计算  然后重新返回一个类似data的数据   我们可以直接当作data属性值 进行使用   
                year(){
                    return this.total-this.age
                }
            },
            watch:{
                //监听  则是对数据的监听  这个函数名 就是  数据的名字   当数据发生变化  我们可以让他  产生数据变化以后的事件  
                age(){
                    if(this.age==100){
                        console.warn('完！');
                    }
                }
            }
        })
    </script>