实时抓取网页数据(从服务端取到的数据需要实时反馈,否则将毫无意义!)

优采云 发布时间: 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开发,四年前端加产品。今日头条前端架构师。欢迎关注我,技术生活好有趣!

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线