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;
}
}

})                                                

 

转载于:https://www.cnblogs.com/xiaoqiuzhang/p/10640763.html