watch选项监控数据 · web前端

数据变化的监控经常使用，我们可以先来看一个简单的数据变化监控的例子。例如天气预报的穿衣指数，它主要是根据温度来进行提示的，当然还有其它的，咱们就不考虑了 # 一个监控变化的案例温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服。先来模拟一个温度变化的情况：我们使用按钮来加减温度 ~~~ <body> <div id="app"> <p>今天温度:{{temperature}}</p> <p>穿衣建议:{{this.suggestion}}</p> <p> <button @click="add">添加温度</button> <button @click="reduce">减少温度</button> </p> </div> </body> <script type="text/javascript"> var suggestion = ['T恤短袖', '夹克长裙', '棉衣羽绒服']; var app = new Vue({ el: '#app', data: { temperature: 14, suggestion: '夹克', }, methods: { add: function () { this.temperature += 5; }, reduce: function () { this.temperature -= 5; }, }, watch: { //newVal就是变化后的值,oldVal就是老的值 temperature: function (newVal, oldVal) { if (newVal >= 26) { this.suggestion = suggestion[0]; } else if (newVal < 26 && newVal >= 0) { this.suggestion = suggestion[1]; } else { this.suggestion = suggestion[2]; } } } }); </script> ~~~ # 用实例属性写watch监控有些时候我们会用实例属性的形式来写watch监控。也就是把我们watch卸载构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。 ~~~ app.$watch('xxx',function(){}) ~~~ 还是上边的案例我们改成实例方法的模式 ~~~ app.$watch('temperature',function(newVal,oldVal){ if(newVal>=26){ this.suggestion=suggestion[0]; }else if(newVal<26 && newVal >=0) { this.suggestion=suggestion[1]; }else{ this.suggestion=suggestion[2]; } }) ~~~