今天在做一个vue的小项目功能,通过vuex里的mapGetters,把里面的数据保存在计算属性里,然后template通过这个数据渲染到页面上,这个功能需要通过点击来更新数据,由于需要更新的数据是对象的属性,在mapMutations里更新到计算属性后,页面并不会重新渲染,因此计算属性不会进行深度监听,即对象里的属性。
这个时候,vue给我们提供了一个强制重新渲染的函数: this.
f
o
r
c
e
U
p
d
a
t
e
(
)
;
修
改
完
数
据
后
执
行
这
个
函
数
,
会
刷
新
渲
染
当
前
页
面
,
但
是
不
会
影
响
到
其
他
页
面
和
组
件
。
而
我
在
另
外
的
组
件
页
面
b
里
也
需
要
同
样
修
改
数
据
同
步
的
功
能
,
由
于
我
使
用
了
k
e
e
p
−
a
l
i
v
e
缓
存
了
页
面
,
刚
才
使
用
的
t
h
i
s
.
forceUpdate();修改完数据后执行这个函数,会刷新渲染当前页面,但是不会影响到其他页面和组件。 而我在另外的组件页面b里也需要同样修改数据同步的功能,由于我使用了keep-alive缓存了页面,刚才使用的this.
forceUpdate();修改完数据后执行这个函数,会刷新渲染当前页面,但是不会影响到其他页面和组件。而我在另外的组件页面b里也需要同样修改数据同步的功能,由于我使用了keep−alive缓存了页面,刚才使用的this.forceUpdate()函数只是刷新了页面b,影响不到需要更新的页面a,这个时候可以使用vue提供的钩子activated,可以在缓存路由被激活时触发,再重新在里面执行this.$forceUpdate() 重新渲染
vue 手动刷新渲染
最新推荐文章于 2024-06-21 08:48:28 发布