数据变化的监控经常使用，我们可以先来看一个简单的数据变化监控的例子。例如天气预报的穿衣指数，它主要是根据温度来进行提示的，当然还有其它的，咱们就不考虑了。
一、看一个监控变化的案例
温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服。
先来模拟一个温度变化的情况：我们使用按钮来加减温度。
<div id="app">
<p>今日温度：{{temperature}}°C</p>
<p>穿衣建议:{{this.suggestion}}</p>
<p>
<button @click="add">添加温度</button>
<button @click="reduce">减少温度</button>
</p>
</div>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:{
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];
}
}
}
})二、用实例属性写watch监控
有些时候我们会用实例属性的形式来写watch监控。也就是把我们watch卸载构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。
|
1
|
app
.
$
watch
(
'xxx'
,
function
(
)
{
}
)
|
还是上边的案例我们改成实例方法的模式。
|
1
2
3
4
5
6
7
8
9
10
11
|
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
]
;
}
}
)
|
效果和上面是一样的。