vue强制刷新组件的三种方式:$forceupdate、v-if、key
项目中遇到父组件给封装子组件传值,传的值改变后,页面显示没有进行相对的更改,针对解决这个问题进行三种组件刷新方式的使用记录。
1、$ forceupdate()
说明:$ forceupdate()方法是官方提供的方法, f o r c e U p d a t e 仅仅触发 b e f o r e U p d a t e 以及 u p d a t e d 钩子,也就是说, forceUpdate 仅仅触发beforeUpdate以及updated钩子,也就是说, forceUpdate仅仅触发beforeUpdate以及updated钩子,也就是说,forceUpdate 只是让vue重新渲染了一遍试图,并不会让组件先注销再重新创建。data、computed 不会被重置,created、mounted等钩子函数也不会被执行。 重新渲染不等于组件重载。
使用场景:当data中的某个内容进行了改变,但是页面没有进行实时的刷新,而通过打印能确定数据确实改变,此时可以使用$ forceupdate()来迫使当前组件刷新,但是仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
注:$ forceupdate()仅针对当前组件以及其插槽相关子组件,且子组件是否被渲染取决于组件标签内是否添加了内容。
2、v-if
v-if通过变量控制的形式是真的销毁 DOM,渲染开销比较大。可以触发被控制的组件 beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed 这6个生命周期,通过 v-if 实现强制刷新的开销要远远大于 $forceUpdate。
3、key属性
使用该属性需要保持key在页面的唯一性,不然会造成渲染错误,此属性是将子组件的 key 修改,这样Vue 就会认为子组件不能再使用了。会把旧 key 对应的子组件注销卸载,创建基于新 key 的子组件。因此,会触发完整的生命周期钩子。基本等同于v-if,实现强制刷新的开销也要远远大于 $forceUpdate,等同于v-if。