页面更新

vue主动刷新页⾯及列表数据删除后的刷新实例

1.场景

在处理列表时，常常有删除⼀条数据或者新增数据之后需要重新刷新当前页⾯的需求。

2.遇到的问题

1.⽤vue-router重新路由到当前页⾯，页⾯是不进⾏刷新的

2.采⽤()，或者(0)刷新时，整个浏览器进⾏了重新加载，闪烁，体验不好

3.解决⽅法

provide/inject组合

作⽤：允许⼀个祖先组件向其所有⼦孙后代注⼊⼀个依赖，不论组件层次有多深，并在起上下游关系成⽴的时间⾥始终⽣效。

:

声明reload⽅法，控制router-view的显⽰或隐藏，从⽽控制页⾯的再次加载

:

在页⾯注⼊组件提供（provide）的reload依赖，在逻辑完成之后（删除或添加...）,直接()调⽤，即可刷新当前页⾯。

e/inject⽤法

provide：选项应该是⼀个对象或返回⼀个对象的函数。该对象包含可注⼊其⼦孙的属性。

inject：⼀个字符串数组，或⼀个对象，对象的key是本地的绑定名

提⽰：provide和inject绑定并不是可响应的。这是刻意为之的。如果你传⼊了⼀个可监听的对象，那么其对象的属性还是可响应的。

==========================================

深⼊理解数据驱动

以上算是开发过程中的⼀个坑，⽤了⼀段时间，今天再读代码的时候，感觉被坑的很严重。

1.获取列表⽅法

2.重新获取数据

3.这样再次调⽤获取数据，即可同步实现页⾯数据更新（不会重新刷新页⾯），同时保证有分页时，能够停留在当前页（刷新前如果是第⼆页，刷新后依然在第

⼆页），