Vue页面如何~及时更新页面数据

短命女 2022-09-04 04:50 243阅读 0赞

### Vue页面如何~及时更新页面数据 ###

*  前言：什么是Vue单页面
 *  反问：vue页面为什么~需要重新渲染页面数据？
 *  正题：如何让单页面二次（后续）访问页面，数据渲染（更新）

> We need to be thinking about tomorrow. So we keep going.  
> 我思想明日，是故吾继。

# 前言：什么是Vue单页面 #

*  代码层面，可以将一个页面HTML、JS、CSS代码统一写在一个 .Vue文件里。
 *  页面展示：通过控制当前页面路径\#号后面的路由名称，来达到控制（切换）不同页面的展示效果，请记住：这样显隐方式~页面不会重新请求api。
 *  补充：（凡事有利也有弊）对于页面不需要二次刷新来说，不重新请求api，节约服务器资源，用户在界面上体验度好，但是，如果某个单页面需要二次加载（及时更新数据~比如：增删修改后），此时页面不会重新请求api！（为什么？在看一遍我前面的文字概述！）

# 反问：vue页面为什么~需要重新渲染页面数据？ #

*  vue中，我们一般将请求方法，放在mounted( )中，但是只有第一次页面加载会触发mounted（），而后续是不会触发这个生命周期函数的！，若此时你做完增删修操作，数据怎么更新，怎么办？

# 正题：如何让单页面二次（后续）访问页面，数据渲染（更新） #

*  使用页面的watch侦听事件，监控路由发生改变，则请求需要更新数据的方法（函数），如下图：这里更新数据的方法是querySalaryList()。

> 如图：1 和 2 前者，就是监听路由发生改变，就触发！导致其他页面也会受到影响，（我第一次使用时，用的就是1方式，导致我请求里的弹框，在跳转其他页面都出现，这是非常不好的！！！）怎么办，就使用 2 方式，当获取路由是特定路由，才触发事件…![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]: /images/20220829/e52e8e77ef774f6894b690cd6e9293bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]: /images/20220829/0b8e7d9f53dc44c3b4fcfa133d61eb87.png