您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识
目前在用VUE做一个网页，上面有个实时数据变化展示，如何才能做到不页面刷新使页面数据变化？
数据,表格,数据源目前在用VUE做一个网页，上面有个实时数据变化展示，如何才能做到不页面刷新使页面数据变化？
发布时间：2020-12-06加入收藏来源：互联网点击：
目前在用VUE做一个网页，上面有个实时数据变化展示，如何才能做到不页面刷新使页面数据变化？
回答于 2019-09-11 08:43:50
回答于 2019-09-11 08:43:50
既然是vue,做了数据绑定了，那你只要实时对数据做更新就行了。至于是定时还是sse,websocket，都行了，看接口怎么设计的
回答于 2019-09-11 08:43:50
题主描述的这个问题，其实在前端表格领域是最常见的需求之一。这里简单罗列几点表格组件中最常用的功能：
怎样让表格样式丰富多变的同时，又能实现数据驱动？怎样给单元格中优雅地嵌入诸如checkbox、button、autocomplete、超链接，甚至图片、图表、二维码、富文本等前端常见的元素？怎样高效地实现排序、筛选、分组、树、数据校验，甚至数据汇总等能力？以上是不是还能命中几个题目没提到的潜在需求呢？
要设计表格组件，这些问题都不得不考虑，下面我以目前市场上比较成熟的表格组件SpreadJS为例，谈一谈部分需求的设计思路。SpreadJS是纯前端的表格控件，本身的实现不依赖任何插件、框架或后端库，比较能说明问题：
怎样让表格样式丰富多变的同时，又能实现数据驱动？
SpreadJS采用了数据与视图分离、并与数据源绑定的设计。跟样式相关的内容保存在单元格属性中，与数据源(JSON)分离开，通过数据绑定关系保存数据和单元格位置的映射。渲染引擎再根据这些信息，实现数据展示、交互的能力：
表格模板与数据源双向绑定
可以实际操作一下SpreadJS的表格绑定功能。
通过这样的设计，数据驱动所需的元素就都有了，接下来实现渲染内容随数据源变更、新数据追加推送、条件改变、公式计算等因素联动都已不是难题。
怎样给单元格中优雅地嵌入诸如checkbox、button、autocomplete、超链接，甚至图片、图表、二维码、富文本等前端常见的元素？
SpreadJS是采用Canvas渲染的表格区域，当需要修改单元格内容时，会响应操作事件，创建一个input元素在单元格上，填写后执行回填，将数据返回数据源。渲染层把基础功能进行了封装，并暴露了原型接口。
这样的设计为扩展和丰富输入形式提供了可能。比如我们可以定义，当双击单元格时，不弹出input，而是弹出Autocomplete组件，我们要做的只是重写“弹出input”的方法即可。如图：
SpreadJS AutoComplete
模态窗同理：
SpreadJS 模态窗
参考示例：SpreadJS自定义单元格 —— 模态窗
怎样高效地实现排序、筛选、分组、树、数据校验，甚至数据汇总等能力
实际上有了以上两个案例的支撑，不难理解在这几个需求中，基本上都是对数据源本身的操作。主要不断地实现同一个接口（JavaScript里通过继承或重写prototype），可以优雅高效地实现。
相关资料：
SpreadJS 官方主页SpreadJS 产品文档在线 Excel 编辑器
回答于 2019-09-11 08:43:50
用setInterval
new Vue({
data: {
a: 1
},
mounted: ()=> {
this.timer = setInterval(() => { //setInterval实时刷新
fetch('http://example.com') //ajax请求
.then(res => {
this.a=res.a;
})
}, 1000)
},
beforeDestory: ()=>{
this.timer && clearInterval(this.brush); //销毁interval
}
})
回答于 2019-09-11 08:43:50
你这样形容第一个想到的就是ajax
虽然没用过vue，翻翻文档里肯定有类似的工具吧
回答于 2019-09-11 08:43:50
数据key写在data里(比如list)，如果是数组，数据变化调用Array.push就好了
比如源数据是 list([1,2,3,4])
调用接口后拿到数据newList([5,6,7,8])
this.list.push(newList)
下一篇：返回列表
相关链接 |
||
| 网友回复（共有 0 条回复） |