Vue中使用computed與watch結合實現數據變化監聽

目的：當數據變化時，為其中重要數據增加邊框，實現閃爍以達到提醒目的。數據格式如下，只有在未處理火警/故障時增加閃爍邊框。可以使用watch進行深度監聽。數據格式已定，也非常明確要監聽的數據是有兩個。既然這樣就沒有必要進行深度監聽。可以結合computed實現返回需要監聽的數據，只進行普通監聽即可。

數據格式：

data:[

{
type:0,
title:'火警',
alarmData:210,
modules:[

{
color:"red",
icon:"<i class='layui-icon layui-icon-fire'></i>",
style:'solid',
bcolor:'white',
url:'',
title:'實時火警',
children:[{
name:"火警未處理",
value:0
},{
name:"今日處理",
value:5
}]
},{
color:"blue",
icon:"<i class='layui-icon layui-icon-set-fill'></i>",
style:'solid',
bcolor:'white',
url:'',
title:'實時故障',
children:[{
name:"故障未處理",
value:20
},{
name:"今日處理",
value:12
}]
}

]
},{
type:1,
title:'巡檢',
modules:[]
},{
type:2,
title:'視頻',
modules:[]
}

]

vue實例代碼片段

var vm = new Vue({
el:"#real_info",
data:data,
watch: {
　　fireValue: {
　　　　handler:function(newValue, oldValue) {
                 //判斷數據實現具體代碼
　　　　}
　　},
faultValue:{
    handler:function(newValue, oldValue) {
       //同上
    }
}
},
computed: {
fireValue:function(){//未處理
return this.items[0].modules[0].children[0].value;
},
faultValue:function(){//未處理
return this.items[0].modules[1].children[0].value;
}
}

})