实时抓取网页数据(从服务端取到的数据需要实时反馈,否则将毫无意义!)
优采云 发布时间: 2021-11-08 06:22实时抓取网页数据(从服务端取到的数据需要实时反馈,否则将毫无意义!)
从服务器获取的数据需要实时反馈,否则毫无意义!
先介绍一下Vue.set()方法
注意:如果服务器返回的数据量很小,或者字段很少,可以使用vue的set方法。如果数据量很大,请直接看第二种情况。
官网API是这样介绍的:
Vue.set(目标,键,值)
范围:
{对象 | 数组} 目标
{字符串 | 数字}键
{any} 值
返回值:设置后的新值
用法:
向响应式对象添加一个属性,并确保这个新属性也是响应式的并触发视图更新。必须用来给响应式对象添加新属性,因为Vue无法检测普通的新属性(比如this.myObject.newProperty ='hi')
请注意,对象不能是 Vue 实例,也不能是 Vue 实例的根数据对象。
举个简单的小例子来介绍一下这个用法:
一:在data中定义一个对象:
data() {
return {
person:{
age:10,
name:'李古拉雷',
sex:1
}
}
}
二:向服务器发起请求返回一个新的数据对象:
person:{
age:20,
name:'高圆圆',
sex:0
}
这时候就需要把这个对象实时渲染到页面上
三:使用Vue.set()方法更新数据
如下:
methods: {
getPerson(){
this.$http({
method: "post",
url:this.$$baseURL + "sys/getPerson",
}).then(res => {
Vue.set(this.person,0,{age:res.data.age,name:res.data.name,sex:res.data.sex})
/**
* 0 更新的是位置0上的数据
*
*/
});
}
}
这样就可以将服务器返回的新数据实时更新到组件中。
先说第二种情况:
这种情况下,数据量大,字段多。使用 Vue.set() 方法有点太多了。这个时候我们应该怎么做?
核心思想是定义一个临时变量。因为calculated是一个计算属性,所以里面的值比较精细,可以实时渲染组件更新页面。
一:我们在data中定义一个大的临时对象
data() {
return {
myTempObj:{} // 这时一个很大的临时对象,字段特别多
}
}
二:我们在计算属性中也定义了一个非常大的对象
这个对象就是我们在页面中实际使用的对象
三:发起异步请求并从服务器返回数据
methods: {
getBigObj(){
this.$http({
method: "post",
url:this.$$baseURL + "sys/getBigObj",
}).then(res => {
this.myTempObj=res.bigObj ; // 在这里用临时变量接受服务端返回值
});
}
}
四:页面模板组件中的使用方法
{{item.name}}
以上两种情况可以解决从服务器获取的数据无法实时更新的问题。根据具体情况选择使用!
四年java开发,四年前端加产品。今日头条前端架构师。欢迎关注我,技术生活好有趣!