实时抓取网页数据(从服务端取到的数据需要实时反馈，否则将毫无意义！)
优采云 发布时间: 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开发，四年前端加产品。今日头条前端架构师。欢迎关注我，技术生活好有趣！
