在使用Vue构建Web应用程序时，有时需要在页面上实时显示一些数据。Vue提供了几个方式来实现这个目的，常见的方法是在数据变化时使用Vue提供的watchAPI来监视数据变化。

//定义一个对象data
data:{
message:'Hello Vue.js!'
},
//观察data对象的变化
watch:{
message:function(){
console.log('数据已经发生变化');
}
}

使用watchAPI监视数据变化会带来一些问题，比如难以管理多个监视器、代码结构混乱，同时如果数据变化的频繁度很高，会影响页面的性能表现。

Vue提供了computedAPI来解决这个问题。通过computedAPI，我们可以直接声明一个计算属性，将变化的数据作为其依赖项，做到实时响应变化的效果。

//定义一个对象data
data:{
firstName:'Jing',
lastName:'Zhao'
},
//定义一个计算属性，通过get函数返回数据
computed:{
fullName:function(){
return this.firstName + ' ' + this.lastName;
}
}

在使用computedAPI时，需要注意的一点是，计算属性的结果会被Vue缓存，也就是说，如果计算属性所依赖的数据没有发生变化，那么它的值不会重新计算而是从缓存中读取。这样不仅可以提高性能，还可以避免计算过程中的重复计算。

但是，在某些情况下，数据实时变化的需求还是会出现。针对这种情况，Vue提供了wathc与computedAPI的结合使用方式——watchedComputedAPI。

//一个对象data
data:{
firstName:'Jing',
lastName:'Zhao'
},
//定义一个计算属性，通过get函数返回数据
computed:{
fullName:function(){
return this.firstName + ' ' + this.lastName;
}
},
//观察fullName的变化
watch:{
fullName:function(newVal,oldVal){
console.log('新值：'+newVal+'，旧值：'+oldVal);
}
}

在上述代码中，当计算属性computed中的数据变化时，会触发watch中的方法，实现了实时响应变化。

总的来说，Vue提供了多种API，能够帮助我们解决在Web应用开发中的数据响应问题。开发者需要根据项目需求进行选择，在实现同样的功能时，会有不同的代码风格与优化策略。