vue 让组件强制渲染的方法

场景:在组件内,搜索框进行搜索,再进入此页面搜索内容还在,如果没有清空搜索的方法,怎么办?

也会想到会有几种解决办法:

  1. 重新渲染整个页面
  2. 使用v-if hack
  3. 使用Vue 内置的forceUpdate方法
  4. 最好的方式:修改key值
一、使用key值进行强制渲染(推荐)
  1. 为什么选key值?
    如果key值不变,那么就不会改变组件;如果改变key值,旧组件被摆脱,新组件被创建。

当删除其中一个key的值,对其它并没有什么影响,只需要更新key值就可以,并且可以保留所有的组件。如果有很复杂的逻辑,DOM操作。。那么使用key值就会很有用。
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

二、v-if hark

vue 附带的 v-if 指令相当于判断,当组件为true时才会渲染;但是如果为false,那么这个组件就不会存在DOM元素。所以当我们第二次进行渲染时,还会进行一个全新的组件,就重新进行了一遍created、mounted等。

总结:最后推荐Key值进行强制渲染!

参考:添加链接描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值