目前在用VUE做一个网页，上面有个实时数据变化展示，如何才能做到不页面刷新使页面数据变化？
题主描述的这个问题，其实在前端表格领域是最常见的需求之一。
这里简单罗列几点表格组件中最常用的功能：怎样让表格样式丰富多变的同时，又能实现数据驱动？
怎样给单元格中优雅地嵌入诸如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 编辑器
