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]; } }) ~~~